Modernizr Là Gì? Hướng Dẫn Sử Dụng Modernizr

Thảo luận trong 'Software' bắt đầu bởi Admin, 27 Tháng một 2016.

  1. Admin Nothing to lose.. your love to win..

    Bài viết:
    4,093
    Modernizr là một thư viện Javascript giúp tự động phát hiện và hỗ trợ những trình duyệt cũ sử dụng được HTML5 và CSS3 để chạy web không bị lỗi khi hiển thị. Ví dụ từ IE8 trở xuống không hiểu các thuộc tính của HTML5 và CSS3 khi chúng ta sử dụng sẽ bị lỗi. Modernizr sẽ tự động phát hiện và bổ sung, chèn các đoạn class thay thế vào để hỗ trợ trình duyệt hiển thị đú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.

    Mã:
    <html class="fontface">
    Cách sử dụng:

    Đầu tiên các bạn vào trang chủ Modernizr để tải bản Modernizr mới nhất về máy.

    Chèn đường dẫn file vào thẻ head:

    Mã:
    <script src="js/modernizr-1.0.min.js"></script>
    Bước tiếp theo là chèn class "no-js" vào thẻ <html>

    Việc chèn class này chỉ để Modernizr hoạt động. Không ảnh hưởng gì đến các mã khác.

    Mã:
    <html class="no-js">
    Nếu việc cài đặt thành công thì khi load trang bên trong thẻ <html> sẽ hiển thị như thế này:

    Mã:
    <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">
    Demo website sử dụng Modernizr, các bạn view source sẽ thấy:

    Hài Tết Mới Nhất
     
    Chỉnh sửa cuối: 25 Tháng mười một 2017
Từ Khóa:
Trả lời qua Facebook
Đang tải...