Bình luận điều kiện lọc trình duyệt IE

Bình luận điều kiện là một nguồn sở hửu của trình duyệt Internet Explorer cung cấp cơ chế loại các phiên bản trình duyệt đặc biệt. Phần mở rộng này được giới thiệu từ phiên bản IE5. Đã từ rất lâu rồi tôi không còn thấy người dùng sử dụng trình duyệt IE5 nữa thậm chí IE6 hiện giờ cũng thuộc hàng cổ hiếm, tuy nhiên đã thiết kế thì bạn không thể bỏ qua các phiên bản này được, bởi vậy bạn có thể sử dụng bình luận điều kiện linh hoạt để tùy biến cho các phiên bản IE.

Những bình luận điều kiện sử dụng cú pháp đặc biệt. Mã đánh dấu HTML được bao trong một biểu thức điều kiện, và được đặt bên trong bình luận HTML, nếu biểu thức là true thì HTML bên trong sẽ được thực thi ngược lại là false thì HTML bên trong sẽ được ẩn. Bởi vì bình luận có điều kiện được đặt với bình luận HTML. HTML được bọc xung quanh cũng sẽ ẩn với tất cả các trình duyệt không hổ trợ bình luận có điều kiện. Bạn có thể đặt bất kỳ điều gì bạn muốn bên trong biểu thức bình luận có điều kiện, nhưng hữu dụng nhất có lẽ là việc đặt liên kết tới các tập tin CSS hoặc JavaScript bên ngoài tùy theo bạn muốn nó ảnh hưởng tới phiên bản nào của IE.

Chúng ta hãy cùng xem xét ví dụ sau.

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Bạn có thể thấy điều kiện được đặt trong dấu ngoặc vuông và bắt đầu bằng từ khóa if. Nội dung HTML được giới hạn bởi biểu thức mở <!--[if]> và biểu thức đóng <![endif]-->. Trong ví dụ trên nhờ biểu thức điều kiện mà nội dung bên trong là thẻ liên kết tới file CSS sẽ có hiệu lực với tất cả các trình duyệt nào là IE, các trình duyệt khác sẽ bỏ qua biểu thức bình luận điều kiện và nó sẽ trở thành một bình luận HTML thông thường.

Sau đây sẽ là các từ khóa sử dụng bên trong biểu thức điều kiện mở.

• IE -> nếu có số theo sau là nói tới phiên bản của trình duyệt IE
• lt -> ít hơn
• lte -> ít hơn hoặc bằng
• gt -> lớn hơn
• gte -> lớn hơn hoặc bằng
• ! -> phủ định
• () -> biểu thức phụ
• & -> và
• | -> hoặc

Ví dụ nếu bạn muốn sử dụng đoạn đánh dấu HTML cho trình duyệt IE phiên bản 7 bao gồm cả 7 chấm.

<!--[if IE 7 ]>
<pChỉ IE7 thấy nội dung này</p>
<![endif]-->

Ví dụ nếu bạn muốn sử dụng đoạn đánh dấu HTML cho các phiên bản trình duyệt IE ngoại trừ từ phiên bản IE7 trở lên, tức là bạn muốn nội dung có hiệu lực từ nhỏ hơn phiên bản IE7 như IE5 chấm và IE6 chấm.

<!--[if lt IE 7 ]>
<p>Chỉ những trình duyệt nhỏ hơn IE7 thấy nội dung này</p>
<![endif]-->

Nếu bạn muốn bao gồm cả IE7 nữa thì ví dụ trên bạn thay từ khóa "lt" thành "lte" nghĩa là nhỏ hơn hoặc bằng.

Các từ khóa khác bạn vận dụng tương tự như "gt"(greater than - lớn hơn), "gte"(greater than or equal to - lớn hơn hoặc bằng). Bạn hãy xem ví dụ sau, vị dụ nói rằng nội dung đánh dấu được sử dụng từ trình duyệt IE6 trở lên.

<!--[if gte IE 6 ]>
<p>Chỉ IE6 và lớn hơn mới thấy nội dung này</p>
<![endif]-->

Bạn cũng có thể sử dụng not để loại trừ trình duyệt như ví dụ sau sẽ loại trừ trình duyệt IE phiên bản 6.

<!--[if !IE 6]>
<p>Chỉ IE5 hoặc IE7 hoặc các phiên bản khác IE6 thấy nội dung này</p>
<![endif]-->

Bạn có thể sử dụng nhiều điều kiện trong biểu thức bằng các từ khóa "&" hay "|". Ví dụ sau nói rằng nếu là trình duyệt IE phiên bản 6 hoặc 7 thì mới thấy nội dung này.

<!--[if (IE 6)|(IE 7)]>
<p>IE6 or IE7 only </p>
<![endif]-->

Tóm lại tùy theo chủ đích bạn muốn loại bỏ trình duyệt thì có nhiều cách viết bình luận điều kiện nhưng cách sau đây là phổ biến nhất. Ví dụ ta tạo một file main.css và các phiên bản khác bao gồm ie7.css, ie6.css, ie5.css rồi sau đó viết biểu thức bình luận điều kiện như sau.

<link href="main.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 5]>
<link href="ie5.css" rel="stylesheet" type="text/css">
<![endif]-->

Hoặc bạn cũng có thể viết như sau, đây là cách mà tôi vẫn dùng thường xuyên.

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

Qua bài này các bạn đã biết cách làm thể nào lọc trình duyệt để sử dụng các thẻ liên kết cho từng phiên bản trình duyệt IE cụ thể từ đó bạn có thể thiết kế website của mình hiển thị tốt trên tất cả các phiên bản của trình duyệt IE.