HTML5 - Modernizr

Modernizr là một nhỏ JavaScript Library phát hiện tính khả dụng của các triển khai gốc cho các công nghệ web thế hệ tiếp theo

Có một số tính năng mới đang được giới thiệu thông qua HTML5 và CSS3 nhưng đồng thời nhiều trình duyệt không hỗ trợ các tính năng tin tức này.

Modernizr cung cấp một cách dễ dàng để phát hiện bất kỳ tính năng mới nào để bạn có thể thực hiện hành động tương ứng. Ví dụ: nếu một trình duyệt không hỗ trợ tính năng video thì bạn muốn hiển thị một trang đơn giản.

Bạn có thể tạo quy tắc CSS dựa trên tính khả dụng của tính năng và các quy tắc này sẽ tự động áp dụng trên trang web nếu trình duyệt không hỗ trợ tính năng mới.

Bạn có thể tải xuống phiên bản mới nhất của tiện ích này từ Modernizr Download .

Cú pháp

Trước khi bắt đầu sử dụng Modernizr, bạn sẽ phải đưa thư viện javascript của nó vào tiêu đề trang HTML của mình như sau:

<script src="modernizr.min.js" type="text/javascript"></script>

Như đã đề cập ở trên, bạn có thể tạo các quy tắc CSS dựa trên tính khả dụng của tính năng và các quy tắc này sẽ tự động áp dụng trên trang web nếu trình duyệt không hỗ trợ tính năng mới.

Sau đây là cú pháp đơn giản để xử lý các tính năng được hỗ trợ và không được hỗ trợ:

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

Ở đây, điều đáng chú ý là bạn cần phải thêm tiền tố "no-" cho mọi tính năng / thuộc tính bạn muốn xử lý cho trình duyệt không hỗ trợ chúng.

Sau đây là cú pháp để phát hiện một tính năng cụ thể thông qua Javascript:

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

Các tính năng được phát hiện bởi Modernizr

Sau đây là danh sách các tính năng có thể được phát hiện bởi Modernizr:

Đặc tính Thuộc tính CSS Kiểm tra JavaScript
@mặt chữ .mặt chữ Modernizr.fontface
Tranh sơn dầu .Tranh sơn dầu Modernizr.canvas
Văn bản Canvas .canvastext Modernizr.canvastext
Âm thanh HTML5 .audio Modernizr.audio
Định dạng âm thanh HTML5 NA Modernizr.audio [định dạng]
Video HTML5 .video Modernizr.video
Định dạng video HTML5 NA Modernizr.video [định dạng]
rgba () .rgba Modernizr.rgba
hsla () .hsla Modernizr.hsla
hình ảnh biên giới .borderimage Modernizr.borderimage
bán kính biên giới .borderradius Modernizr.borderradius
hộp bóng .boxshadow Modernizr.boxshadow
Nhiều nền .multiplebgs Modernizr.multiplebgs
sự mờ đục .opacity Modernizr.opacity
Hoạt ảnh CSS .cssanimations Modernizr.cssanimations
Cột CSS .csscolumns Modernizr.csscolumns
CSS Gradients .cssgradients Modernizr.cssgradients
Phản chiếu CSS .cssreflections Modernizr.cssreflections
Chuyển đổi CSS 2D .csstransforms Modernizr.csstransforms
Chuyển đổi CSS 3D .csstransforms3d Modernizr.csstransforms3d
Chuyển đổi CSS .csstransitions Modernizr.csstransitions
API vị trí địa lý .geolocation Modernizr.geolocation
Loại đầu vào NA Modernizr.inputtypes [loại]
Thuộc tính đầu vào NA Modernizr.input [thuộc tính]
lưu trữ cục bộ .lưu trữ cục bộ Modernizr.localstorage
sessionStorage .sessionstorage Modernizr.sessionstorage
Nhân viên web .webworkers Modernizr.webworkers
applicationCache .applicationcache Modernizr.applicationcache
SVG .svg Modernizr.svg
Đường dẫn Clip SVG .svgclippaths Modernizr.svgclippaths
SMIL .smil Modernizr.smil
Cơ sở dữ liệu Web SQL .websqldatabase Modernizr.websqldatabase
IndexedDB .indexeddb Modernizr.indexeddb
Ổ cắm web .websockets Modernizr.websockets
Sự kiện Hashchange .hashchange Modernizr.hashchange
Quản lý lịch sử .historymanagement Modernizr.historymanagement
Kéo và thả .kéo và thả Modernizr.draganddrop
Nhắn tin nhiều cửa sổ .crosswindowmessaging Modernizr.crosswindowmessaging
API plugin addTest () NA Modernizr.addTest (str, fn)