Modernizr:一個HTML5特征檢測庫 Modernizr幫助我們檢測瀏覽器是否實現了某個特征，如果實現了那么開發人員就可以充分利用這個特征做一些工作
Modernizr是自動運行的，無須調用諸如modernizr_init()之類的初始化方法
Modernizr的官網地址http://modernizr.com/
在官網首頁你就可以下載modernizr.js（它分兩個版本Development和Production版本。其實它們都會導向同一個下載頁面，只不過前者會幫我們把選項預先勾上而已。）
當我把下載的modernizr.js引用到頁面中時（這時我什么也沒做），看如下的圖片就知道modernizr.js是自執行的
使用了Modernizr后，頁面中渲染后的html代碼是這個樣子的：
其中有很多以no作為前綴的class，當然大部分都沒有這個前綴。事實上，如果一個類名以no作為前綴，比如?no-touch?這表示瀏覽器不支持touch特性
modernizr還有一個test頁面，大家可以在自己的瀏覽器里面打開這個test頁面看看瀏覽器對于html5和css3的支持情況（據我所知chrome應該是對html5和css3支持最好的一個瀏覽器）
test頁面的地址http://modernizr.github.io/Modernizr/test/index.html
HTML5特征檢測（分別介紹使用JS原生方法檢測及使用modernizr類庫檢測） /* *@desc:檢測瀏覽器是否支持canvas API */ function supports_canvas() { return !!document.createElement('canvas'
).getContext;} if (Modernizr.canvas) { // support }
else { // not support }
// 瀏覽器支持canvas API并不意味著支持canvas文本API（原因是繪制文本的函數是后來才被納入規范中） /* *@desc:檢測瀏覽器是否支持canvas 文本API */ function supports_canvas_text() { if (!
supports_canvas()) { return false ;} var dummy_canvas = document.createElement('canvas'
); var context = dummy_canvas.getContext('2d'
); return typeof context.fillText == 'function'
;} if (Modernizr.canvastext) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否HTML5的video */ function supports_video() { return !!document.createElement('video'
).canPlayType;} if (Modernizr.video) { // support }
else { // not support }
// 檢測視頻格式 /* *@desc:檢測Mac 和iPhone支持的受專利保護的格式 */ function supports_h264_baseline_video() { if (!
supports_video()) { return false ;} var v = document.createElement('video'
); return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"'
);} /* *@desc:檢測被Mozilla Firefox和其它一些開源瀏覽器 支持的開放視頻格式 */ function supports_ogg_theora_video() { if (!
supports_video()) { return false ;} var v = document.createElement('video'
); return v.canPlayType('video/ogg;codecs="theora,vorbis"'
);} /* *@desc:WebM（一種開源的視頻編碼格式） 檢測被Chrome FireFox Opera支持的開放視頻格式 */ function supports_webm_video() { if (!
supports_video()) { return false ;} var v = document.createElement('video'
); return v.canPlayType('video/webm;codecs="vp8,vorbis"'
);} if (Modernizr.video) { // 可以播放視頻格式 但播放哪種格式的呢 if (Modernizr.video.ogg) {} else { if (Modernizr.video.h264) {} else { if (Modernizr.video.webm) {}}}} else { // not support }
/* *@desc:檢測瀏覽器是否支持本地存儲 */ function supports_local_storage() { return ('localStorage'
in window) && window['localStorage'] !=
null ;} if (Modernizr.localstorage) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否支持web worker */ function supports_local_storage() { return !!
window.Worker;} if (Modernizr.webworkers) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否支持離線web應用 */ function supports_offline() { return !!
window.applicationCache;} if (Modernizr.applicationcache) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否支持地理定位 */ function supports_geolocation() { return !!
navigator.geolocation;} if (Modernizr.geolocation) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否占位文本 */ function supports_input_placeholder() { var i = document.createElement('input'
); return 'placeholder'
in i;} if (Modernizr.input.placeholder) { // support }
else { // not support }
/* *@desc:檢測瀏覽器是否支持自動聚焦 */ function supports_input_autofocus() { var i = document.createElement('input'
); return 'autofocus'
in i;} if (Modernizr.input.autofocus) { // support }
else { // not support }
還有很多，這里就不一一介紹了，總之，通過上面的特征檢測可以知道，用modernizr.js更加方便，使用原生的方法相對來說會要復雜一些。
細說modernizr.js Modernizr幫助我們檢測瀏覽器是否實現了某個feature，如果實現了那么開發人員就可以充分利用這個feature做一些工作，反之沒有實現開發人員也好提供一個fallback。
舉例來說，當我們引入了Modernizr.js類庫后，?<html>?標簽的class屬性就會被相應的賦值，以顯示瀏覽器是否支持某類CSS屬性。比如在IE6下面，不支持boderradius特性，那么在?<html>?標簽中就會出現?no-borderradius?類，我們可以做一些fallback的工作：
.no-borradius div {
/* -- do some hacks here -- */
}
上面我們已經介紹了，檢測瀏覽器是否支持某項特性，我們可以用這種語法：
Modernizr.featuretodetect
再舉一個通常的例子
<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>
一般我們都會這樣加載jQuery類庫，先從Google CDN上拿，如果沒拿到再加載本地的。
Modernizr.load()根據一些條件判斷來動態選擇加載CSS和JavaScript，這無疑對避免不必要的資源加載有極大的幫助。
那么上面的例子可以用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' }
]); 事實上Modernizr.load最簡單的語法如下所示：
Modernizr.load(test: Modernizr.webgl,yep : 'three.js'
,nope: 'jebgl.js'
); 也就是當瀏覽器支持WebGL的時候，就引入?three.js?這個類庫做一些3D效果。瀏覽器不支持WebGL的時候可以使用?jebgl.js?做一些fallback操作。
有興趣可以去官網看看具體API
總結
以上是生活随笔 為你收集整理的HTML5系列四（特征检测、Modernizr.js的相关介绍） 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
