Hướng dẫn Cách viết CSS filter và CSS hacks cho các phiên bản của trình duyệt IE6 và IE7

[PVS]

Cách viết CSS filter và CSS hacks cho các phiên bản của trình duyệt IE6 và IE7

Với những ai mới làm quen với việc thiết kế website thì việc viết CSS để tương thích không những trên các hãng trình duyệt web khác nhau mà còn phải tương thích trên nhiều phiên bản của hãng đó là một việc khá đau đầu. Chắc không ít người phải vò đầu bực tức vì viết CSS đã đời trên các trình duyệt web hiện đại xong sau đó thử trên các trình duyệt cũ hơn thì giao diện nhảy lung tung thậm chí bị vỡ hoàn toàn. Vấn đề này thường gặp khi bạn xem thiết kế của mình trên các trình duyệt cũ như IE6 hoặc IE7. Điều này có thể hiểu được vì thời IE6 và IE7 thịnh hành thì thiết kế dùng các thẻ table vẫn đang còn thống trị.

Có nhiều cách để bạn sửa lỗi này, trong bài trước mình có giới thiệu phương pháp lọc trình duyệt IE bằng các dòng chú thích HTML có điều kiện, khi đó bạn phải tạo các file CSS riêng để sửa các lỗi trên mỗi phiên bản.

Trong bài này chúng ta sẽ tìm hiểu một số cách để viết mã CSS filter và CSS hacks cho các phiên bản của trình duyệt IE6 và IE7.

CSS filter
Chúng ta biết rằng từ phiên bản IE7 trở về trước thì tính năng chọn thẻ con trực tiếp vẫn chưa được áp dụng, lợi dụng điều này chúng ta có một cách đơn giản để viết các thuộc tính mà chỉ có các trình duyệt hiện đại mới áp dụng bằng cách chọn thẻ con trực tiếp. Ví dụ sau chúng ta sẽ áp dụng giá trị position là absolute cho IE6 và các trình duyệt có hỗ trợ position fixed thì sẽ viết bằng cách chọn thẻ con.

#test{
  position: absolute;
}
html>body #test{
  position: fixed;
}

Thông qua cách viết này đầu tiên chúng ta viết CSS mà IE6 có hỗ trợ sau đó viết lại chúng cho các trình duyệt hiện đại bằng cách chọn thẻ con trực tiếp (dấu >).

Dùng thẻ chọn bằng dấu sao
Chúng ta cũng có một cách đơn giản và cách thức viết cũng gần giống như trên là dùng thẻ chọn bằng dấu * cho thẻ gốc là thẻ html. Trong khi tất cả các trình duyệt hiện đại đều bỏ qua cách chọn dùng với dấu * trước thẻ html thì trình duyệt IE5.5 và IE6 lại hiểu chúng. Lợi dụng điều này chúng ta có cách fix như ví dụ sau.

.test {
  position: fixed;
}
* html .test{
  position: absolute;
}

Đầu tiên chúng ta viết CSS cho các trình duyệt hiện đại sau đó viết lại CSS mà trình duyệt IE5.5 và IE6 có hỗ trợ bằng quy tắc như trên.

Dùng dấu Backslash "\"
Có thể bạn không cần phải viết CSS cho người dùng IE5 nhưng nếu bạn quan tâm chúng ta sẽ cũng tìm hiểu cách thức để áp dụng CSS cho chúng, cách thức áp dụng cũng vô cùng đơn giản.

Những trình duyệt hiện đại sẽ áp dụng cách thức viết thuộc tính có xen kẽ dấu "\" trong khi đó trình duyệt IE5.5 về trước sẽ bỏ qua thuộc tính này. Ví dụ:

.test {
  height: 500px;
  he\ight: 400px;
}

Theo ví dụ trên thì những trình duyệt hiện đại sẽ áp dụng giá trị chiều cao được khai báo lại là 400px trong khi đó IE5.5 về trước sẽ duy trì chiều cao là 500px. Để áp dụng cách thức này cần lưu ý quy tắc viết dấu "\" là nó phải nằm giữa thuộc tính, không được để ở vị trí đầu tiên và nó cũng không được xuất hiện trước ký tự tới "f", hoặc từ "A" tới "F" hoặc từ dạng số 0-9.

Dùng dấu gạch dưới underscore
Chúng ta có thể áp dụng cách thức viết thêm dấu gạch dưới "_" ngay đầu thuộc tính để áp dụng cho các trình duyệt từ IE6 về trước. ví dụ:

.test {
  position: fixed; // cho trình duyệt hiện đại
  _position: absolute; // cho IE phiên bản <= 6
}

Chỉ với những cách áp dụng đơn giản như trên chúng ta đã biết cách viết CSS cho trình duyệt IE cũ, chúng ta chỉ việc viết lại thuộc tính CSS theo một quy tắc nào đó mà chỉ trình duyệt IE cũ hiểu hoặc chỉ những trình duyệt hiện đại hiểu. Áp dụng các cách viết trên chũng ta sẽ khắc phục các lỗi phổ biến trên IE6 như việc gấp đôi margin khi hai phần tử có thuộc tính block và float gần nhau, hoặc viết lại các font cho các trình duyệt cũ hiển thị không như mong muốn.

Chúc các bạn thành công.

Nguồn: sothichweb.com​