HTML5和CSS3逐漸成為WEB前端開發的必須技能，開發過程中檢查不同瀏覽器對HTML5和CSS3支持情況成了是一件非常煩心的事情。

比如我們要檢查某個瀏覽器是否支持canvas元素：

function SUP_canvas() {var elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));};

是否支持WebGL：

function SUP_webgl() {return !!window.WebGLRenderingContext;};

還有很多html5和css3其他屬性…，值得慶幸的是我們發現了Modernizr開源javascript庫

Modernizr是一個用來檢測瀏覽器是否支持HTML5以及CSS3特性的基于MIT證書的開源Javascript庫。Modernizr的 功能其實很簡單，就是用js檢測瀏覽器對HTML5/CSS3的特性支持情況，支持某個屬性，就在頁面的標 簽上添加一個相應的class，不支持的話就添加一個no-前綴的class，比如，如果檢測的瀏覽器支持video標簽，MODERNIZR就會 在標簽上添加video類，否則，添加no-video類。

最新的Modernizr是2.0.6版本的，如果你下載開發（development）版本，給我們提供全部的內容，如果要下載 PRoduction版本的modernizr，我們會發現，我們可以根據自己的需要進行訂制。在其下載頁面上，我們選擇自己所需的HTML和CSS特 性，然后生成一個javascript文件。這么做會極大程度上減少冗余代碼，減少不必要的檢測，對web前端這個很看重用戶體驗的地方，性能就是一點一 點壓出來的。

使用Modernizr也非常簡單，只要而且必須在標簽里應用就可以了，無需調用Modernizr_init()之類的初始化方法。 modernizr必須放在里，最好放在css聲明之后，因為HTML5 Shiv（用以在IE中啟用HTML元素）必須在之前執行，而且要使用modernizr添加的class，需要阻止FOUC。還有一點在于html聲明 里的no-js的class。它設置了一個默認狀態，如果頁面禁用了javascript我們就可以知道了。

用調試工具我們看到在html標簽里加了很多樣式類，從這些樣式類里我們可以完全看出您使用的瀏覽器對HTML5和CSS3支持情況，以“no-”開頭的，就是這個瀏覽器不支持的特性：

知道了這些特性的支持情況我們就可以使用css選擇器做一些表現上的差異，比如,如果不支持標簽，那么test類文本為紅色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同樣，我們也可以在JavaScript利用這些特性檢測的結果，代碼：

if(Modernizr.canvas){//開始畫圖啦！}else{alert("fuck!");}

Modernizr 2還提供了一種load機制，方便代碼管理，比如：

Modernizr.load({test: Modernizr.canvas,//檢查是否支持標簽及相應的屬性yep : 'canvas.js',//如果支持標簽及相應的屬性那么加載canvas.js，nope: 'no-canvas.js'//如果不支持標簽及相應的屬性那么加載no-canvas.js，});

如果直接用的是development版本的modernizr，你會發現，根本就沒有Modernizr.load，因為它是作為一個單獨文件發布的：yepnope.js。而在production版本，我們選擇將其包含在modernizr里。