Khi chúng ta bắt tay vào viết CSS cho trang web, không phải lúc nào trang web của bạn cũng hiển thị đúng như ý muốn. Đối với mỗi trình duyệt khác nhau thì rất có thể trang web của bạn sẽ gặp phải lỗi hiển thị, các khung bị vỡ hoặc hay bị xuống dòng nhìn rất xấu. Bài viết này mình sẽ giới thiệu cho các bạn một vài cách để viết CSS riêng cho từng trình duyệt khác nhau.
Đối với người viết web, khả năng hiển thị tốt trên mọi trình duyệt là điều hết sức cần thiết, đối với Firefox thì trang của bạn hiển thị rất đẹp, nhưng còn đối với IE hay Google Chrome hay Opera thì sao? Quả thật việc này hay làm chúng ta đau đầu.
Có một cách rất đơn giản để phân biệt trình duyệt IE với tất cả trình duyệt khác dựa trên HTML. Bạn có thể tham khảo những cách sau.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]-->
Với đoạn code bên trên, hệ thống sẽ kiểm tra nếu là trình duyệt IE thì mới tải tập tin all-ie-only.css vào trang web của bạn.
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
Ngược lại, nếu như bạn muốn tải CSS riêng cho các trình duyệt không phải là IE thì bạn có thể sử dụng như đoạn code bên trên mình giới thiệu.
Nếu bạn muốn tải CSS riêng cho trình duyệt IE 6 thì làm như sau:
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->
Nếu bạn muốn tải CSS riêng cho trình duyệt IE 5, nhưng bạn muốn cho cụ thể và chính xác hơn thì làm như sau:
<!--[if IE 5.5000]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->
Nếu bạn muốn dùng theo kiểu so sánh trình duyệt lớn hơn IE 6 hoặc là từ IE 6 trở về sau hoặc là nhỏ hơn IE 6, hoặc từ IE phiên bản 6 trở về trước thì bạn dùng như sau:
<!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->
Như bên trên bạn sẽ thấy các từ so sánh như: less than (lt), less than or equal (lte), greater than (gt), greater than or equal (gte). Tùy vào trường hợp cụ thể của bạn mà sử dụng cho đúng.
Nếu bạn muốn sử dụng CSS riêng cho các trình duyệt khác IE 6 thì bạn dùng như sau:
<![if !(IE 6)]> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <![endif]>
Như vậy, có rất nhiều cách để bạn phân biệt CSS cho trình duyệt IE với các trình duyệt khác, phân biệt giữa các phiên bản của trình duyệt IE. Hy vọng rằng bài viết này sẽ giúp ích được bạn trong quá trình lập trình web.
