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。
Working With Classes
使用了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在官方文檔中都有涉及，建議在使用的時候仔細了解一下即可。