標籤：
Modernizr協助我們檢測瀏覽器是否實現了某個feature，如果實現了那麼開發人員就可以充分利用這個feature做一些工作，反之沒有實現開發人員也好提供一個fallback。所以，我們要明白的是Modernizr只是幫我們檢測feature是否被支援，它並不能夠給瀏覽器添加那些本來不支援的feature。
Modernizr在2010和2011年均贏得了 .net Award for Open Source App of the Year ，要知道它的競爭者都是像Wordpress、Drupal這些重量級選手。同時在2011年，它的首席開發人員 Paul Irish 贏得了Developer of the Year大獎。
其實，這個類庫使用非常簡單，簡單到你把 官方文檔 (單頁)從頭到尾看一遍就完全瞭解它的使用方法了。接下來，我做一點簡單的介紹。
Setting-Up Modernizr在官方網站( http://modernizr.com )上我們可以看到有兩個下載選項，Development和Production版本。其實它們都會導向同一個下載頁面，只不過前者會幫我們把選項預先勾上而已。
通常我們需要檢測的新特性基本都囊括在了這些選項中，我們可以根據自己需要，定製化的選擇需要檢測的feature。
下載完後我們就可以在 <head> 中引用這個類庫。由於Modernizr幫我們內建了 html5shiv 類庫，所以我們必須在 <body> 載入之前引用這個類庫。當然你如果針對的是IE9+的瀏覽器，那麼大可以在頁面元素載入完後再引入，但這樣就會有 FOUC 這樣極不友好的效果出現。
最後，我們需要在 <html> 標籤中加入 no-js 類，以免瀏覽器禁用了JavaScript。
使用了Modernizr後，頁面中渲染後的html代碼是這個樣子的：
其中有很多以no作為首碼的class，當然大部分都沒有這個首碼。事實上，如果一個類名以no作為首碼，比如 no-touch 這表示瀏覽器不支援touch特性，這也是最新版本的Chrome不支援的兩個feature之一：
Modernizr有一個 test頁面 ，可以檢測當前瀏覽器支援的特性。Chrome目前是對HTML5和CSS3新特性支援最好的瀏覽器，沒有之一。
言歸正傳。當我們引入了Modernizr.js類庫後， <html> 標籤的class屬性就會被相應的賦值，以顯示瀏覽器是否支援某類CSS屬性。比如在IE6下面，不支援boderradius特性，那麼在 <html> 標籤中就會出現 no-borderradius 類，我們可以做一些fallback的工作：
.no-borradius div{ /*-- do some hacks here --*/}Browser Feature Test
檢測瀏覽器是否支援某項特性，我們可以用這種文法：
Modernizr.featuretodetect
Modernizr對象是類庫建立的全域變數，我們可以在頁面的任意位置使用。比如我們需要檢測瀏覽器是否支援WebGL，可以這麼做：
if(Modernizr.webgl){ /* support WebGL */}else{ /* not support WebGL */}Modernizr.load()
基於 YepNope.js ，Modernizr.load()根據一些條件判斷來動態選擇載入CSS和JavaScript，這無疑對避免不必要的資源載入有極大的協助。
你可以在這裡( HTML5 Cross Browser Polyfills )找到幾乎所有新特性的fallback解決方案。
Modernizr.load( test: Modernizr.webgl, yep : ‘three.js‘, nope: ‘jebgl.js‘ );
當瀏覽器支援WebGL的時候，就引入 three.js 這個類庫做一些3D效果。瀏覽器不支援WebGL的時候可以使用 jebgl.js 做一些fallback操作。
還有一個比較酷的例子來自官方文檔。我們在用jQuery類庫的時候，通常都是這種寫法：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script><script>window.jQuery || document.write(‘<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>‘)</script>
現在用Modernizr.load()可以這麼寫：
Modernizr.load([ { load: ‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js‘, complete: function () { if ( !window.jQuery ) { Modernizr.load(‘js/libs/jquery-1.7.1.min.js‘); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: ‘needs-jQuery.js‘ }]);Summary
Modernizr為我們做了最複雜的一步，我們只需要像模組一樣將程式碼群組裝起來。當然，Modernizr還有一些其他的用法，比如Modernizr.mq()方法用來檢測media query，這對Responsive Design可以幫上很多忙。諸如這些API在官方文檔中都有涉及，建議在使用的時候仔細瞭解一下即可。
Modernizr.js介紹與使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
