Modernizr là gì ? Sử dụng nó cho những trình duyệt cũ ra sao?
Chắc chắn có rất nhiều bạn đọc được nhiều bài viết có xuất hiện Modernizr, và đều thắc mắc Modernizr là gì? Sử dụng nó cho những trình duyệt cũ ra sao?. Cùng tìm hiều về Modernizr và ứng dụng của nó khi thiết kế website.
Modernizr là gì ?
Trước khi CSS3 và HTML5 ra đời thì đã có khá nhiều trình duyệt cũ, đặc biệt từ phiên bản IE8 trở xuống, tính năng chưa được hỗ trợ nhiều như CSS3 và HTML5. Chính vì vậy mà khi thiết kế website, lập trình viên áp đặt thuộc tính trong CSS3 vào thì những trình duyệt cũ thường báo lỗi hiển thị.
Khắc phục được vấn đề này, Modernizr ra đời. Bản chất của Modernizr là một thư viện JavaScript có nhiệm vụ phát hiện các trình duyệt không hỗ trợ những tính năng mới của CSS# và HTML5. Khi phát hiện ra, Modernizr sẽ chèn vào các đoạn Class thay thế vào bên trong thẻ HTML tương ứng với các tính năng đó.
Ví dụ: Trình duyệt không hiểu tính năng @font-face có trong CSS3, thì Modernizr 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 Modernizr cho trình duyệt cũ
– B1: Truy cập vào https://modernizr.com/ để download về máy.
– B2: Chèn nó vào khai báo :
|
1
|
<script src="js/modernizr-1.0.min.js"></script> |
– B3: Chèn class ” no-js ” vào bên trong thẻ <html> như sau:
|
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"> |
Thư viện moderizr được ví như cầu nối công nghệ cho các trình duyệt phiên bản cũ với công nghệ thiết kế website hiện đại. Nếu gặp bất kỳ khó khăn nào trong quá trình thiết kế website, hãy tìm đến với chúng tôi. Công ty thiết kế website chuyên nghiệp VN4U luôn đồng hành cùng bạn!
Cùng chuyên mục
Làm thế nào để nhúng JavaScript vào file HTML
Quang Khoa