javascript
浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
為什么80%的碼農都做不了架構師？>>> ??
日期：2012-4-17??來源：GBin1.com
在線演示? 本地下載
大家是不是在開發設計過程中遇到如下情況？某些瀏覽器不支持HTML5或者CSS3的某些標簽和屬性。而我們希望開發的網站或者web應用能在所有的瀏覽器中運行正確，針對不支持的瀏覽器我們可以提供其它fallback方式來彌補。
今天這篇文章呢，我們將介紹一個開發利器 - Modernizer，Modernizer是一個Javascript的類庫API，對于大部分的前端開發人員來說，使用它是一件非常簡單的事情。相信大家會非常喜歡這個類庫，無論你是開發人員還是設計人員！
什么是Modernizr?
開始之前我們還是介紹一下什么是Modernizer， Modernizer是一個Javascript的類庫，幫助你有效的檢測瀏覽器的支持類型，典型的情況是它能夠幫助你使用如下的顯示方式來告訴你瀏覽器的相關信息：
“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].”
實際上它并不像其它的javascript添加功能到瀏覽器，例如特效或者處理，它只是簡單的告訴你瀏覽器是否支持你需要的特性。
使用它能夠讓你很輕松的面對HTML5和CSS3的問題，使用Modernizer能夠很有效的幫助你控制瀏覽器不支持的特性。
如何使用Modernizr?
Modernizer的使用非常簡單，和其它js類庫類似，我們只需要將它引入需要調用的頁面即可，如下：
<!doctype html> <html> <head><script src="gbin1/js/modernizr-2.5.3.min.js"></script> </head> <!-- 其它的html內容 -->注 意在下載Modernizr類庫的時候，你可以自己自定義自己需要的功能，也可以現在完整開發版本，這個你可以自己根據需要決定。我們都知道js文件的大 小對于網站加載來說很重要，所以，一般情況，產品環境不建議大家使用Modernizr的完整開發版本，當然，如果你學習或者開發的話，可以使用。
Modernizr如何工作的？
實際上Modernizr在后臺頁面中生成了很多的class，這些class你如果使用firebug可以很容易的看到，當然，如果你使用”查看源代碼“的話，肯定是看不到的，因為他們都是動態生成的。
那么究竟Modernizr如何工作的呢？ 其實在頁面加載過程中，Modernizr將會后臺運行一些測試，包括了HTML5或者CSS3相關屬性的測試用例。然后基于測試結果來添加class來修改頁面標簽。
如果你在IE9中查看生成頁面，你將看到如下結果：
如果你在Firefox11中查看生成頁面，你將看到如下結果：
如果你在Chrome17.0.963.83中查看生成頁面，你將看到如下結果：
可以看到不同的瀏覽器中支持的屬性不盡一樣，如果Modernizr判斷該屬性支持的話，例如：
flexbox在Chrome中支持，則添加flexbox到HTML標簽，而在firefox和IE9中，不支持，則添加no-flexbox到HTML標簽。
通過這種方法，我們可以在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文檔。
動態實現PolyFill加載
這里我們先解釋一下什么事PolyFill：
" polyfill (n): a JavaScript shim that replicates the standard API for older browsers （ polyfill是一個javascript的替換解決代碼用來在較老版本瀏覽器中實現標準的API ）"
有些時候，比如CSS3的動畫在某些瀏覽器中不支持，我們需要使用javascript來使得網站在所有瀏覽器中的體驗都是一樣，使用Modernizr的load方法可以有效的實現這樣的功能，如下：
Modernizr.load({test: Modernizr.cssanimations,yep : 'animations.css',nope: 'animations-polyfill.js' });想了解更多ployfill，可以參考這個官方文檔：http://modernizr.com/docs/#polyfills
來源：瀏覽器html5/css3兼容性檢測的javascript類庫 - Modernizr簡單介紹
轉載于:https://my.oschina.net/gbin1/blog/53868
總結
以上是生活随笔為你收集整理的浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wp7使用Cocos2d-X for X
- 下一篇： C# PictureBox加载图片并显示