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)