Tìm hiểu Modernizr là gì ?
Có rất nhiều bạn khi đọc những bài viết trong đó có nêu đến Modernizr , thì thường thắc mắc không biết nó là gì, và tại sao lại phải sử dụng đến nó. Hôm nay mình sẽ dành hẳn một bài viết để có thể giải thích cho các bạn hiểu tại sao phải sử dụng Modernizr cũng như cách dùng nó cho trang web của mình.
Mặc dầu CSS3 cũng như HTML5 ra đời cũng lâu rồi, tuy nhiên vẫn còn rất nhiều trình duyệt cũ, đặc biệt là những phiên bản từ IE8 trở xuống, vẫn chưa hỗ trợ những tính năng mới mà CSS3 và HTML5 mang lại. Chính vì điều này mà khi chúng ta áp đặt những thuộc tính trong CSS3 vào trang web của mình, thì các trình duyệt cũ thường gây ra lỗi hiển thị vì chúng không hiểu những thuộc tính đó.
Để khắc phục điều này, một thư viện JavaScript đã ra đời và có tên gọi là Modernizr . Modernizr có nhiệm vụ là phát hiện ra các trình duyệt nào không hỗ trợ những tính năng mới của CSS3 hay HTML5 , và khi phát hiện ra, chúng sẽ chèn những đoạn class thay thế vào ngay bên trong thẻ html tương ứng với những tính năng đó. Giả sử trình duyệt không hiểu tính năng @font-face có trong CSS3, thì nó sẽ tự động chèn class fontface vào bên trong thẻ html
1
| <html class=" fontface "> |
Tương tự , nếu trình duyệt không hỗ trợ tính năng multiple backgrounds, CSS gradients hoặc CSS transforms thì nó tiếp tục chèn thêm các class tương ứng như “no-multipebgs“, “no-cssgradients” và “no-csstransforms“. và việc mà chúng ta cần làm là chỉ định dạng css thêm cho các class này cho những trình duyệt không hỗ trợ.
1
| .no-multipebgs img { /* định dạng css cho những trình duyệt không hỗ trợ Multi Background */ } |
Cách sử dụng :
– Đầu tiên các bạn vào trang http://modernizr.com/ để download về máy.
– Kế tiếp chèn nó vào khai báo :
– Kế tiếp chèn nó vào khai báo :
1
| <script src="js/modernizr-1.0.min.js"></script> |
– Cuối cùng là chèn class ” no-js ” vào bên trong thẻ <html>
1
| <html class="no-js"> |
Nếu việc cài đặt thành công , thì khi load trang, bên trong thẻ <html> chúng ta sẽ nhận được như thế này :
1
| <html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> |
Trên đây là những điều cơ bản mà mình muốn chia sẻ cho các bạn dễ hiểu và sử dụng, nếu các bạn muốn tìm hiểu nâng cao hơn có thể vào trực tiếp trang chủ của Modernizr.
Tìm hiểu Modernizr là gì ?
![]()
Reviewed by Unknown
on
05:52
Rating:
Không có nhận xét nào: