Leaderboard ads banner

Conditional Comment trong CSS

Conditional Comment trong CSS là một kiểu comment cho phép đoạn mã CSS được comment có thể vẫn được chạy trên trình duyệt IE. Nói cách khác tất cả các trình duyệt đều sẽ bỏ qua đoạn comment này trừ Internet Explorer. Ví dụ:

<!--[if IE 6]>
// Mã lệnh được đặt trong này chỉ được chạy trên Internet Explorer 6
<![endif]-->

Điều tuyệt vời ở đây là bạn có thể sử dụng conditional comment để khắc phục các lỗi về CSS trên Internet Explorer khi trình duyệt này luôn có nhiều sư khác biệt khi chạy cùng một source code CSS trên cùng một trang web.

Tính năng Conditional Comment được bỏ trong phiên bản Internet Explorer 10 và vì vậy đoạn mã sau không có ý nghĩa trên bất cứ phiên bản nào của tất cả các trình duyệt phổ biến hiện nay:

<!--[if IE 10]>
// Mã lệnh này sẽ được coi như một comment thông thường
<![endif]-->

Tuy nhiên phiên bản Internet Explorer 10 là phiên bản được Microsoft cải tiến rất nhiều so với các phiên bản trước đó và chính vì vậy cũng hạn chế những sự khác biệt khi chạy CSS với phiên bản này.

Ngoài cú pháp dành cho I.E 6 như ở trên bạn cũng có thể sử dụng cú pháp như sau:

<!--[if gt IE 6]>
// mã lệnh này chỉ có thể được hiểu bởi phiên bản IE nhỏ hơn 6
<![endif]-->
<!--[if lt IE 6]>
// mã lệnh này chỉ có thể được hiểu bởi phiên bản IE lớn hơn 6
<![endif]-->

Ở đây gtlt lần lượt được sử dụng để quy định phiên bản lớn hơn 6 và nhỏ hơn 6 sẽ sử dụng mã lệnh CSS bên trong các conditional comment ở trên. Ở đây gt là viết tắt của greater thanlt là viết tắt của less than.

Tương tự chúng ta cũng có gtelte là viết tắt của greater than or equalless than or equal để quy định các phiên bản lớn hơn hoặc bằng hoặc nhỏ hơn hoặc bằng một phiên bản nào đó.

Mặc dù với sự tiện lợi của conditional comment khi nó cho phép bạn có thể viết riêng các đoạn mã CSS cho các phiên bản của IE một cách dễ dàng. Tuy nhiên, bạn cũng không lạm dụng quá mức conditoinal comment vì nó sẽ khiến mã lệnh CSS của bạn trở lên khó kiểm soát hơn. Bạn chỉ nên sử dụng conditional comment chỉ khi nào không thể tìm được giải pháp nào khác để khắc phục lỗi hiển thị trên trình duyệt IE.

Nội dung không được để trống

Bài Viết Liên Quan