3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer

Trước kia, Internet Explorer ( IE ) là một trình duyệt tiến bộ nhất. Nhưng sau một khoảng thời gian ngưng phát triển, IE đã trở thành ‘thảm họa’ đối với các nhà thiết kế web như chúng ta. Microsoft đã cải tiến và cập nhật trình duyệt của họ, nhưng sự thật là IE vẫn đang tụt hậu một chút so với các trình duyệt dựa trên WebKitFirefox. Khi làm việc, chúng ta vẫn cần phải để ý đến sự phù hợp với các phiên bản trước của IE. Sau đây mình sẽ hướng dẫn  làm thế nào để trang web của bạn làm việc tốt hơn trong các trình duyệt của Microsoft.

Internet Explorer 8

htmlshiv.js

HTML5shiv của Remy tạo ra các yếu tố HTML5 như main, header, footer… thông qua JavaScript. Bằng cách nào đó các yếu tố được tạo ra thông qua JavaScript và bạn có thể dễ dàng style cho chúng.

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

selectivizr.js

Selectivizr.js là một nguồn tài nguyên đáng kinh ngạc, polyfilling sẽ load các selector và property không được hỗ trợ CSS, bao gồm các last-child sử dụng !important. Trên một mẫu thiết kế lại gần đây, mình đã nhúng selectivizr vào và nó hoạt động rất tốt trên các trình duyệt IE cũ. Đây là cách sử dụng:

<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->

Bạn chỉ nên sử dụng load nó ra trên các trình duyệt IE cũ.

Sử dụng các <html> Conditinal Comment

Các conditional comment này trong có vẻ xấu xí thật, nhưng xấu hay không, sự thật là chúng hoạt động rất hiệu quả và chính xác:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

Đoạn mã này ( snippet ) không yêu cầu hoặc phải chờ tải JavaScript, các style này được xác định ngay lập tức.

Trong khi Internet Explorer đang dần bắt kịp các đối thủ cạnh tranh, nhưng sự thật là các trình duyệt IE cũ vẫn còn được sử dụng rất nhiều, đặc biệt là các nước đang phát triển ( Việt Nam chẳng hạn ). Tin tốt là các nguồn tài nguyên này sẽ làm việc tốt cho tất cả các trình duyệt.

Related Post


Tạo Marquee nâng cao với CSS3 Animation
Thursday, October 24, 2013
Thông thường hiệu ứng Marquee mang lại cho chúng ta cảm giác khá nhàm chán, với dòng chữ chạy từ phải sang trái hoặc ngược lại. Còn nữa , khi chạy thường thì rất khó đọc chữ  mà còn hay bị giật
Sử dụng LESS để viết CSS
Thursday, September 26, 2013
Nếu là một web developer, chắc hẳn bạn đã quá quen thuộc với CSS, ngôn ngữ để định dạng hiển thị của trang web. CSS rất đơn giản, dễ học, nhất là với người mới bắt đầu. Tuy nhiên nó cũng có nhược điểm là khá “tĩnh”, điều này dẫn đến việc trong CSS rất khó để dùng lại các thuộc tính, khai báo của thành phần này vào thành phần khác. Đồng thời rất khó quản lý khi các đoạn mã CSS trở nên quá nhiều.
Search

Đăng ký nhận bài mới


Category

Blog Archive