11.2 Modernizr · JavaScript 標準參考教程

[TOC] ## 概述隨著HTML5和CSS3加入越來越多的模塊，檢查各種瀏覽器是否支持這些模塊，成了一大難題。Modernizr就是用來解決這個問題的一個JavaScript庫。首先，從modernizr.com下載這個庫。下載的時候，可以選擇所需要的模塊。然后，將它插入HTML頁面的頭部，放在head標簽之中。 ~~~ <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <script src="js/modernizr.js"></script> </head> </html> ~~~ ## CSS的新增class 使用Modernizr以后，首先會把html元素的class替換掉。以chrome瀏覽器為例，新增的class大概是下面的樣子。 ~~~ <html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg blobbuilder blob bloburls download formdata"> ~~~ IE 7則是這樣： ~~~ <html class="js no-touch postmessage no-history no-multiplebgs no-boxshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-csstransforms no-csstransitions fontface localstorage sessionstorage no-svg no-inlinesvg wf-loading no-blobbuilder no-blob no-bloburls no-download no-formdata"> ~~~ 然后，就可以針對不同的CSS class，指定不同的樣式。 ~~~ .button { background: #000; opacity: 0.75; } .no-opacity .button { background: #444; } ~~~ ## JavaScript偵測除了提供新增的CSS class，Modernizr還提供JavaScript方法，用來偵測瀏覽器是否支持某個功能。 ~~~ Modernizr.cssgradients; //True in Chrome, False in IE7 Modernizr.fontface; //True in Chrome, True in IE7 Modernizr.geolocation; //True in Chrome, False in IE7 if (Modernizr.canvas){ // 支持canvas } else { // 不支持canvas } if (Modernizr.touch){ // 支持觸摸屏 } else { // 不支持觸摸屏 } ~~~ ## 加載器 Modernizr允許根據Javascript偵測的不同結果，加載不同的腳本文件。 ~~~ Modernizr.load({ test : Modernizr.localstorage, yep : 'localStorage.js', nope : 'alt-storageSystem.js', complete : function () { enableStorgeSaveUI();} }); ~~~ Modernizr.load方法用來加載腳本。它的屬性如下： * test：用來測試瀏覽器是否支持某個屬性。 * yep：如果瀏覽器支持該屬性，加載的腳本。 * nope：如果瀏覽器不支持該屬性，加載的腳本。 * complete：加載完成后，運行的JavaScript代碼。可以指定在支持某個功能的情況，所要加載的JavaScript腳本和CSS樣式。 ~~~ Modernizr.load({ test : Modernizr.touch, yep : ['js/touch.js', 'css/touchStyles.css'] }); ~~~ ## 參考鏈接 * Chris Griffith,?[Up and running with Modernizr](http://www.adobe.com/devnet/html5/articles/up-and-running-with-modernizr.html)