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)