浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
日期：2012-4-17??來源：GBin1.com
在線演示? 本地下載
大家是不是在開發(fā)設(shè)計(jì)過程中遇到如下情況？某些瀏覽器不支持HTML5或者CSS3的某些標(biāo)簽和屬性。而我們希望開發(fā)的網(wǎng)站或者web應(yīng)用能在所有的瀏覽器中運(yùn)行正確，針對不支持的瀏覽器我們可以提供其它fallback方式來彌補(bǔ)。
今天這篇文章呢，我們將介紹一個(gè)開發(fā)利器 - Modernizer，Modernizer是一個(gè)Javascript的類庫API，對于大部分的前端開發(fā)人員來說，使用它是一件非常簡單的事情。相信大家會(huì)非常喜歡這個(gè)類庫，無論你是開發(fā)人員還是設(shè)計(jì)人員！
什么是Modernizr?
開始之前我們還是介紹一下什么是Modernizer， Modernizer是一個(gè)Javascript的類庫，幫助你有效的檢測瀏覽器的支持類型，典型的情況是它能夠幫助你使用如下的顯示方式來告訴你瀏覽器的相關(guān)信息：
“Hey, browser! Do you support [insert feature here]? Great, let’s see it in action! But if you don’t support it, I want you to do this instead: [insert behaviour here].”
實(shí)際上它并不像其它的javascript添加功能到瀏覽器，例如特效或者處理，它只是簡單的告訴你瀏覽器是否支持你需要的特性。
使用它能夠讓你很輕松的面對HTML5和CSS3的問題，使用Modernizer能夠很有效的幫助你控制瀏覽器不支持的特性。
如何使用Modernizr?
Modernizer的使用非常簡單，和其它js類庫類似，我們只需要將它引入需要調(diào)用的頁面即可，如下：
<!doctype html> <html> <head><script src="gbin1/js/modernizr-2.5.3.min.js"></script> </head> <!-- 其它的html內(nèi)容 -->注 意在下載Modernizr類庫的時(shí)候，你可以自己自定義自己需要的功能，也可以現(xiàn)在完整開發(fā)版本，這個(gè)你可以自己根據(jù)需要決定。我們都知道js文件的大 小對于網(wǎng)站加載來說很重要，所以，一般情況，產(chǎn)品環(huán)境不建議大家使用Modernizr的完整開發(fā)版本，當(dāng)然，如果你學(xué)習(xí)或者開發(fā)的話，可以使用。
Modernizr如何工作的？
實(shí)際上Modernizr在后臺(tái)頁面中生成了很多的class，這些class你如果使用firebug可以很容易的看到，當(dāng)然，如果你使用”查看源代碼“的話，肯定是看不到的，因?yàn)樗麄兌际莿?dòng)態(tài)生成的。
那么究竟Modernizr如何工作的呢？ 其實(shí)在頁面加載過程中，Modernizr將會(huì)后臺(tái)運(yùn)行一些測試，包括了HTML5或者CSS3相關(guān)屬性的測試用例。然后基于測試結(jié)果來添加class來修改頁面標(biāo)簽。
如果你在IE9中查看生成頁面，你將看到如下結(jié)果：
如果你在Firefox11中查看生成頁面，你將看到如下結(jié)果：
如果你在Chrome17.0.963.83中查看生成頁面，你將看到如下結(jié)果：
可以看到不同的瀏覽器中支持的屬性不盡一樣，如果Modernizr判斷該屬性支持的話，例如：
flexbox在Chrome中支持，則添加flexbox到HTML標(biāo)簽，而在firefox和IE9中，不支持，則添加no-flexbox到HTML標(biāo)簽。
通過這種方法，我們可以在CSS中有效定義不同瀏覽器支持下的CSS，如下：
.borderradius .roundcorner{border: 10px solid #CCC;border-radius: 5px 5px 5px 5px; }.no-borderradius .roundcorner{border-radius: 5px solid #505050; }以上代碼在最新的IE，firefox和chrome中都可以正常顯示10px的邊框及其5px的圓角，但如果使用IE7，則不能顯示圓角，只顯示5px的邊框。
通過以上引用Modernizr生成的class，我們可以有效的控制頁面元素。?
具體的CSS3或者HTML5的測試，請參考Modernizr文檔。
動(dòng)態(tài)實(shí)現(xiàn)PolyFill加載
這里我們先解釋一下什么事PolyFill：
" polyfill (n): a JavaScript shim that replicates the standard API for older browsers （ polyfill是一個(gè)javascript的替換解決代碼用來在較老版本瀏覽器中實(shí)現(xiàn)標(biāo)準(zhǔn)的API ）"
有些時(shí)候，比如CSS3的動(dòng)畫在某些瀏覽器中不支持，我們需要使用javascript來使得網(wǎng)站在所有瀏覽器中的體驗(yàn)都是一樣，使用Modernizr的load方法可以有效的實(shí)現(xiàn)這樣的功能，如下：
Modernizr.load({test: Modernizr.cssanimations,yep : 'animations.css',nope: 'animations-polyfill.js' });想了解更多ployfill，可以參考這個(gè)官方文檔：http://modernizr.com/docs/#polyfills
來源：瀏覽器html5/css3兼容性檢測的javascript類庫 - Modernizr簡單介紹
轉(zhuǎn)載于:https://my.oschina.net/gbin1/blog/53868
總結(jié)
以上是生活随笔為你收集整理的浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wp7使用Cocos2d-X for X
- 下一篇： 动态加载javascript