Modernizr 是一個(gè)很小的用來檢測(cè)下一代 Web 技術(shù)原生實(shí)現(xiàn)可用性的 JavaScript 庫。

HTML5 和 CSS3 都引入了各自的新特性，但是同時(shí)也有很多瀏覽器不支持這些新特性。

Modernizr 提供了一種簡(jiǎn)單的方式檢測(cè)任意新特性，從而讓我們可以采取相應(yīng)的操作。比如，瀏覽器還不支持視頻特性，那么我們可以顯示一個(gè)簡(jiǎn)單的頁面。

我們還可以基于某個(gè)特性的可用性來創(chuàng)建 CSS 規(guī)則，如果瀏覽器不支持某個(gè)新特性，那么這些規(guī)則將會(huì)自動(dòng)應(yīng)用到網(wǎng)頁上。

可以從 Modernizr 官網(wǎng) 下載最新版的程序。

語法

開始使用 Modernizr 之前，需要在 HTML 頁面的頭部引入這個(gè) JavaScript 庫，如下所示：

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

正如上面提到的，我們可以基于特性的可用性來創(chuàng)建 CSS 規(guī)則，如果瀏覽器不支持這個(gè)新特性，那么這些規(guī)則就會(huì)自動(dòng)應(yīng)用到網(wǎng)頁上。

下面是處理支持和不支持特性的一個(gè)簡(jiǎn)單語法：

/* 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>

這里要注意的是，我們需要為想要處理的瀏覽器還不支持的特性或者屬性使用 “no-” 前綴。

下面是通過 JavaScript 檢測(cè)特定屬性的語法：

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

便于學(xué)習(xí)上述概念 - 請(qǐng)使用不同的瀏覽器進(jìn)行在線練習(xí)。

Modernizr 提供的特性檢測(cè)

下面是可以通過 Modernizr 進(jìn)行檢測(cè)的特性列表：

http://wiki.jikexueyuan.com/project/html5/images/modernizr3.png" alt="" /> http://wiki.jikexueyuan.com/project/html5/images/modernizr2.png" alt="" />