07/09/2018, 10:32

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ụ: Điều tuyệt vời ở đây là bạn có thể sử dụng conditional comment để ...

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ụ:

 

Đ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:

 

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:

 
 

Ở đây gt và lt 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ó gte và lte 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.

0