Cách tương thích trình duyệt khi viết CSS

2790
Cách tương thích trình duyệt khi viết CSS

Mở đầu

Chắc hẳn, đối với lập trình viên làm việc với CSS thì phần lớn sẽ phải đối mặt với một vấn đề rất nhức nhối và khá khó xử lý đó là tương thích trình duyệt. Đã không biết bao nhiêu lần code của tôi chạy ngon lành trên Chrome nhưng lại lỗi trên IE để rồi fix được trên IE thì lại lỗi trên FireFox. Trong bài viết này tôi xin giới thiệu với các bạn cách tương thích trình duyệt khi viết CSS. Hy vọng sẽ có ích cho các bạn. Nào cùng bắt đầu thôi!

Cách tương thích trình duyệt khi viết CSS

  Những điều cần biết về z-index trong css
  Tất tần tật về thuộc tính position trong CSS

Nhận diện trình duyệt và áp dụng CSS cho chỉ trình duyệt đó

Lấy ví dụ chúng ta có một file main.css như sau:

Nhưng trên IE tôi chỉ muốn width 80px.

Nếu bây giờ chúng ta có thể nhận diện trình duyệt trong stylesheet và áp dụng CSS riêng cho những trường hợp đặc biệt thì hay biết mấy.

Đợi đã… chúng ta hoàn toàn có thể làm như vậy. Hãy tạo thêm một file custom-IE.cssvà thêm nó vào trang index.html của bạn.

Trong file custom-IE.css chúng ta sẽ viết như sau:

Ta-đa! Vậy là chúng ta hoàn toàn có thể custom lại bất cứ thứ gì ta muốn mà không sợ ảnh hưởng đến các trình duyệt khác. Đối với các version thấp hơn của IE hay FireFox chúng ta cũng đề có thể nhận diện được.

Đối với tất cả các version của FireFox:

@-moz-document url-prefix() { 
// Viết CSS của bạn tại đây 
}

Đối với IE6 7:

@media screen\9 { 
// Viết CSS của bạn tại đây 
}

Đối với IE6 7 8:

@media \0screen\ ,screen\9 { 
// Viết CSS của bạn tại đây 
}

Đối với IE9:

@media screen and (min-width:0\0) { 
// Viết CSS của bạn tại đây 
}

Các bạn có thể tham khảo tại Browser Hacks.

Kết luận

Hy vọng qua bài viết này các bạn đã biết cách tương thích trình duyệt khi viết CSS.

Cảm ơn các bạn vì đã đọc bài!

Có thể bạn quan tâm:

Xem thêm việc làm Software Developers hot nhất trên TopDev

TopDev via viblo.asia

  BEM - Quy ước đặt tên dành cho class CSS
  Hô biến một file PSD thành giao diện web với HTML, CSS
SHARE