使用Modernizr 检测HTML5和CSS3浏览器支持功能（转自http://www.adobe.com/cn/devnet/dreamweaver/articles/using-moderni

时间 2019-11-20

标签使用 modernizr 检测 html5 html css3 css 浏览器支持功能 http www.adobe.com www adobe com devnet dreamweaver articles using moderni 栏目 HTML5 繁體版

原文原文链接

传统浏览器目前不会被彻底取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，做为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持状况。 Modernizr 并不是试图添加老版本浏览器不支持的功能，而是令你经过建立可选风格配置修改页面设计。它也能够经过加载定制的脚原本模拟老版本浏览器不支持的功能。javascript

Modernizr 简单易用，但不是万能的。成功使用 Modernizr 很大程度上取决于你的 CSS 和 JavaScript 技能。经过本指南，你能够了解如何为不支持多栏或投影的浏览器设置可选风格。此外，你还能够了解如何让老版本浏览器对使用最新 HTML5 要求（required）属性的表单进行验证，以及如何根据浏览器的功能有选择地加载脚本文件。css

什么是Modernizr？

Modernizr 是一个用来检测浏览器功能支持状况的 JavaScript 库。目前，经过检验浏览器对一系列测试的处理状况，Modernizr 能够检测18项 CSS3 功能以及40多项关于HTML5 的功能。它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。一整套测试的执行时间仅需几微秒。此外，Modernizr 网站经过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。html

当使用 Modernizr 检测 CSS3 支持状况时，你无需具有任何 JavaScript 的知识。你仅需在网页中插入文件，它随即根据浏览器的功能状况在页面的<html>标签上添加一组类。相应类的名称已经符合标准化的要求并浅显易懂。例如，若是浏览器支持 box-shadow 属性，则须要添加相应的 boxshadow 类；不然，添加一个 no-boxshadow类便可。你所要作的一切只不过是建立一个使用这些类的式样表，以便为相应浏览器提供合适的式样。html5

Modernizr 可轻松实现 JavaScript 解决方案，即人们熟知的 polyfills——它模拟HTML5 相关功能和技术，如地理定位。然而，你的确须要对 JavaScript 有基本了解以便使用这些功能和技术。术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla（即美国人熟知的填泥料）。这里，polyfill 用来填补浏览器功能上的漏洞。有时，Modernizr 可无缝地执行这项任务。但本质上，这只是一种修补工做，因此，不能依赖它产生无漏洞浏览器所实现的彻底相同结果。java

下载 Modernizr

与其它 JavaScript 库相同的是，Modernizr 可提供 development 和 production 版本。与大多数库相比，惟一的不一样之处是，空格和注释已经从 production 版本中删除了，这样能够减小下载量的大小。 Modernizr 采起了不一样的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素，这样可以显著下降下载量。在不少状况下，production 版本能够缩小为development版本大小的二十分之一。css3

当使用 Modernizr 进行测试时，我建议你下载 development 版本。一旦你掌握了它是如何运做的以及它的能力，你就能够下载一个自定义 production 版本以便在你的网站进行部署。git

本教程的示例文件包含的是 Modernizr的development 2.0.6 版本，可是我建议你从 Modernizr 站点上用最新更新的版本替代它。github

下载本文附带的示例文件（使用modernizr.zip）而且在 Dreamweaver 站点内将它们解压到一个方便的位置，或者是为本教程建立一个新站点。
访问 Moderniz 网站，其地址为 http://www.modernizr.com/ 。
在 Download Modernizr 2 部分中，单击 Development 按钮（参见图1）。Modernizr 的 development 版本就会直接在你的浏览器窗口上打开。

图1. 选中development版本以便进行Modernizr测试

注：若是你错误地单击了主导航菜单中的 Download 连接，那么你将看到大量的复选框出现，要求你去选择你想要的工具。这是为定制的 production 版本所设置。单击面板顶部的 Development 版本的连接，或者单击浏览器的 Back 按钮返回主页并选中图1所示的 Development 按钮。web

在浏览器的主菜单上，选中 Save Page As，并在示例文件的js文件夹里将它另存为 modernizr.js。若是有必要的话能够替换已有的文件。

使用 Modernizr 检测 CSS 功能

如前所述，Modernizr 并无尝试在旧版本的浏览器中添加新的功能，可是它容许你按照你的风格去弥补那些缺失的功能。为了展现这是如何运做的，示例文件中包含了一个叫作 css_support_begin.html 的页面。若是你在新式浏览器中加载这个页面，它应该看起来如图2所示。sql

图2. Firefox 5以多栏的格式显示了页面而且在图像中添加阴影

该页面的风格是使用了CSS3的 column-count 和 box-shadow 属性，以便以多栏的格式显示文本并在图像中添加阴影。旧版本的浏览器不支持这些属性中任何一项，所以在 Internet Explorer (IE) 7 中同一页面看起来如图3所示。

图3. IE7忽略了column-count 和 box-shadow属性

在IE9中，同一页面显示了图像阴影，可是文本和图3中所示的布局是同样的。

你在尝试弥补缺失的功能上采起什么方式取决于你的设计大纲的要求。要尝试使页面在全部的浏览器中看起来彻底同样将要涉及大量工做，可是你能够作一些简单的改进，好比在图像周围环绕文字，调整图像与文本的左边距，以及在图像底部和右边缘添加隐约的边界，以便使它更具三维立体的感受。

检测对 CSS3 功能的支持

Modernizr 使用 JavaScript 检测浏览器所支持的功能，可是，它并非使用 JavaScript 动态地加载不一样的样式表，而是使用很是简单的技术将类添加到页面的<html>标签。而后做为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。例如，若是页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。若是不支持，那么它用 no-boxshadow 类做为替代进行添加。

因为浏览器忽略它们没法识别的 CSS 属性，所以你能够放心地按照你的基本样式规则使用 box-shadow 属性，然而须要按照下面的格式为旧版本的浏览器添加单独的 descendant selector ：

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }

只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类，所以其它的浏览器不会应用这个样式规则。

让咱们将 Modernizr 添加到示例页面并检查它添加到<html> 标签中的类。

复制 css_support_begin.html 并将它另存为 css_support.html。
打开你刚建立的复制文件，并切换到 Code 视图或者Split视图。
HTML markup 的前两行应该以下所示：

<!DOCTYPE HTML> <html>

将class="no-js"添加到<html>标签中，以下所示：

<!DOCTYPE HTML> <html class="no-js">

Modernizr 依赖于在浏览器中启用的 JavaScrip。当它启用时，这种类会被动态地删除。可是，在极少数状况下，当 JavaScrip 没有启用时，它依然存在于 HTML makup 中，若是必要，它容许你为这样的访问者建立特殊的样式规则。

css_support.html 中的样式是嵌入在 <style> 块中。Modernizr 库须要被添加到样式加载以后的页面的 <head> 部分。在结束的 </style> 和 </head> 标签之间添加一条新的线，而且使用 <script>标签附加上 moderizr.js。最简单的方式是键入你本身的代码，可是你也能够在Insert面板中使用 Script 按钮或者选中 Insert – HTML–Script Objects–Script。<head> 的最后三行应该以下所示：

</style> <script src="js/modernizr.js"></script> </head>

注：若是你使用 Insert 面板或者Insert菜单，则 Dreamweaver 会添加 type="text/javascript" 到开始的 <script> 标签中。这在 HTML5 中再也不要求，可是留着它并不会形成危害。

保存 support_css.html 并在 Document 工具栏中单击 Live Code 按钮。目前 <html> 标签已经加入了超过40个类的名称，这些名称可以代表 WebKit 浏览器引擎中 Dreamweaver 的内置版本的功能（参见图4）。

图4. Modernizr添加了大量的代表浏览器功能的类

注：若是你的 Dreamweaver 版本没有 Live Code（或者你正使用不一样的 HTML 编辑器），那么你可使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。

如图4所示， no-js 类已经被js类替代，这代表 JavaScript 已经启用。

表1列举了 Modernizr 使用的类名称以代表对 CSS3 的支持。若是某个功能不支持，那么相应类的名称用no-做前缀。

表1. Modernizr 检测的 CSS3 功能

CSS 功能	Modernizr 类（属性）
`@font-face`	`fontface`
`::before` and `::after` pseudo-elements	`generatedcontent`
`background-size`	`backgroundsize`
`border-image`	`borderimage`
`border-radius`	`borderradius`
`box-shadow`	`boxshadow`
CSS animations	`cssanimations`
CSS 2D transformations	`csstransforms`
CSS 3D transformations	`csstransforms3d`
CSS transitions	`csstransitions`
flexible box layout	`flexbox`
gradients	`cssgradients`
`hsla()`	`hsla`
multi-column layout	`csscolumns`
multiple backgrounds	`multiplebgs`
`opacity`	`opacity`
reflection	`cssreflections`
`rgba()`	`rgba`
`text-shadow`	`textshadow`

不管在哪对特定的CSS属性进行测试，类的名称和属性名称都是同样的，然而这要求去除任何连字号或是括号。其它类是按照它们参考的CSS3模块而命名。

建立旧版本浏览器样式规则

参见表1，你能够看到Modernizr使用boxshadow 和 csscolumns 分别代表了对box-shadow 属性和多栏布局的支持。所以，你可使用no-boxshadow 和 no-csscolumns 类为不支持这些功能的浏览器建立特殊的样式规则。

为了保证指令简单，我将演示只有CSS 声明的范例。你能够直接地将它们键入到Code视图中或者使用New CSS Rule对话框。

为.no-boxshadow img建立一个新的descendant (compound) selector。
设置2像素灰色实心的右边界和底边（我选择#8A8A8A）。由此产生的样式规则应该以下所示：

 
  .no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }  
 

这不像半透明的阴影那样有吸引力，可是尽管如此，它仍然使得图像可以从背景中略微地突起。

在不支持多栏布局的浏览器中，你须要浮动图像而且调整它的页边距。为.no-csscolumns img建立一个新的descendant selector。
设置图像向左浮动，而且将顶部和底部页边距设置为3px，右边距为8px，以及左边距为0。样式声明以下所示：

.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }

确保这个样式规则是遵循.columns img规则。两个规则有着相同的特殊性，所以，若是它们顺序颠倒，则.columns img 的10像素的左边距可能会覆盖你刚刚建立的新规则。你能够将.no-csscolumns img重命名为.no-csscolumns .columns img以便于给它更高的特殊性，可是最好是保证selector越简单越好。（顺便说一下，若是你不肯定什么是特殊性，查阅Adrian Senior的文章，Understanding Specificity。它虽然发表时间很长，可是颇有价值。）
保存css_support.html，并在新式浏览器中对它进行测试。它应该和之前看起来彻底如出一辙。
你应该在你的本地系统上或经过连接到BrowserLab，在旧版本的浏览器上对这个页面进行测试。虽然没有阴影或者栏目，可是如今页面的式样是可接受的，如图5所示。

图5. 旧版本浏览器使用的是可选的样式，例如IE6。

在这个的简单范例中，我只用了前缀为no-的类就为旧版本的浏览器建立了特殊的样式。可是，按照它们的能力,你不一样时使用这两个类（带或不带前缀）为浏览器建立不一样的样式是绝对没有道理的。例如：

 
  .csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }  
 

有时这种方法是合理的，例如，若是你想为每一级支持都建立一个彻底不一样的布局。可是若是它仅仅是一个为旧版本浏览器提供可选择的样式的问题，不要忘记，浏览器会忽略它们没法识别的属性。若是你对全部的样式都使用 Modernizr 类，那么在 JavaScript 禁用的浏览器中你的页面将彻底非样式化。

使用Modernizr检测HTML5的支持功能

Modernizr 为开始的<html>标签添加的类名称起着双重目的做用。当页面加载时，它们也是 Modernizr 对象建立的 JavaScript 属性的名称。表1列举了与 CSS 有关的类和属性的名称。表2列举了剩下的与 HTML5 和相关技术有关的类和属性，例如地理位置。

表2. Modernizr 检测的与 HTML5 有关的功能

HTML5 有关功能	Modernizr 类（属性）
Application cache	`applicationcache`
Audio	`audio.type (ogg, mp3, wav, m4a)`
Canvas	`canvas`
Canvas text	`canvastext`
Drag and drop	`draganddrop`
Form input attributes	`input.attributeName`
Form input elements	`inputtypes.elementName`
Geolocation	`geolocation`
hashchange event	`hashchange`
History management	`history`
IndexedDB	`indexeddb`
Inline SVG	`inlinesvg`
Local storage	`localstorage`
Messaging	`postmessage`
Session storage	`sessionstorage`
SMIL	`smil`
SVG	`svg`
SVG clip paths	`svgclippaths`
Touch events	`touch`
Video	`video.type (ogg, webm, h264)`
WebGL	`webgl`
Web sockets	`websockets`
Web SQL database	`websqldatabase`
Web workers	`webworkers`

在大多数状况下，表1和表2列举的全部属性返回的都是 true 或者 false 。因此，你能够按照以下所示使用 JavaScript 对本地存储进行测试：

 
  if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }  
 

然而,就 audio 和 video 而言，返回值是一个字符串，它代表着浏览器可以处理特定类型的置信水平。根据 HTML5 规范，空的字符串表示该类型不支持。若是支持该类型，那么返回值是“maybe”或是“probably”。例如：

if (Modernizr.video.h264 == "") { // h264 is not supported }

使用 Modernizr 验证 HTML5 必需的表单字段

HTML5 添加了许多新的表单属性，例如 autofocus，当页面第一次加载时它会自动地将光标放在某个指定的字段。另外一个有用的属性是 required, 若是某个必需的字段留有空白，那么它将阻止HTML5兼容的浏览器提交表单（参见图6）。

图6. 提交表单前，HTML5 兼容的浏览器会检查必需字段是否填写

这很好，可是它会给你留下一个问题：旧版本的浏览器该怎么办？

一个解决方法是忽略它们，并留给服务器侧的验证功能进行最终的检查。若是浏览器没法识别 required 属性，那么另一个处理这种状况的用户界面更为友好的方法是建立一个小小的脚本对必需字段进行检查。以下的指令显示了在Modernizr帮助下如何进行相应的操做。

在范例文件夹中复制 required_start.html并保存为 required.html。
在结束的</head> 标签前用 <script>块按照以下所示将 modernizr.js 粘贴到页面中：

</style> <script src="js/modernizr.js"></script> </head>

紧接在 Modernizr 库与页面链接的标签以后，建立一个单独的 <script> 块，而且在页面一加载完就建立一个事件处理程序以便于执行代码：

 
  <script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head  
 

事件处理程序须要得到一个与表单元素有关的参考并在没法识别 autofocus 和 required 属性的浏览器中模拟它们。处理autofocus 的方式很简单：

 
  window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }  
 

该条件测试了 Modernizr.input.autofocus，若是不支持 autofocus，那么返回的值是 false。然而，逻辑运算符NOT（一个感叹号）却能使意思颠倒，所以若是不支持 autofocus，那么该条件的求值结果为 true，而且 inputs[0].focus() 将光标放在第一个输入字段。

若是不支持 required，那么如今添加代码以便于检查必需字段。事件处理程序的完整代码以下所示：

 
  window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }  
 

新代码产生了一个函数，当提交表单时它可以遍历全部的输入元素，以便于找到具备 required 属性的字段。当它找到某个字段时，它会从值中除去开头和结尾的空白，而且若是结果是一个空的字符串，那么它会把结果添加到 required 数组中。在全部的字段都已经获得检查后，若是数组中包含某些元素，那么浏览器会显示一个与缺失字段名称有关的警告，并阻止提交表单。

保存 required.html 并加载到某个浏览器中，例如尚不支持 HTML5 表单的 IE 6-9。注意一下光标是如何自动地填入第一个字段的。
单击提交按钮而无需填写任何其它字段。你应该能看到一个警告提示你名称和邮箱字段须要填写（参见图7）。

图7. 脚本检测到不支持新属性的浏览器中的必需字段

只填写其中一个必需字段，再进行一次页面测试。当你单击 OK 关闭警告时，你填写的字段仍然有它的内容，这代表表单还没有提交。
同时填写两个必需表单，并单击 submit 按钮。这一次，全部表单字段被清空，而且你应该可以看到隶属于 URL 的数据做为查询字符串出如今浏览器的地址栏。这就证明了表单数据已被提交。
在 HTML5 兼容的浏览器中，例如最新版本的 Firefox、Chrome 或者 Opera，对这个页面进行测试。浏览器显示了它本身的相似于图6所示的错误信息，而不是显示警告信息。

注意： Safari 5.1 错误地报告了它支持 required 属性，因此它在没有验证必需字段的状况下就提交了表单。这是 Safari 的缺陷，然而在 Modernizr 里它是不存在的。

建立版本

当你准备好对你的网站进行部署时，推荐建立一个 Modernizr 的自定义 production 版本，它只包含那些你实际须要的元素。这能够按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图8所示。

图8. Modernizr 下载页面容许你仅选择那些你须要的功能

选项能够便捷地按照以下类别进行分组：CSS三、HTML五、Misc(ellaneous) 和 Extra。单击前三个标题旁边的 Toggle 按钮可任意地选择或者放弃选择分类中的全部复选框。

在默认情形下，Extra 分类将会选中以下三个条目：

HTML5 Shim/IEPP：它添加了两个脚本— HTML5 shim 和 IE Print Protector—它们迫使 IE6-8 正确地设计并打印 HTML5 元素。若是你打算使用新的 HTML5 语义标签，例如 <header> 、<footer>、<nav> 、 <section> 、<article> 等等时，那么你才须要这个选项。
Modernizr.load(yepnope.js)：它添加了一个不包含在 development 版本中的可选择的脚本加载器。它增长了3KB 的下载量，因此若是你不须要它，你能够放弃选择它。稍后我将描述如何使用该加载器。
Add CSS Classes： 它将 Modernizr 类添加到开始的<html>标签。若是你想检测对 CSS3 功能支持，那么你必须选择这个选项。

若是你在 CSS3 分类中选中任何选项，那么以下 Extra 分类中的选项也会被选中：

Modernizr.testProp()
Modernizr.testAllProps()
Modernizr._domPrefixes()

不要取消选择这些选项。这样作将会自动地取消你在 CSS3 分类中已经选择的任何选项。

Extra 分类中的MQ Polyfill (respond.js) 添加了一个脚本，它可使IE 6-8中的 media queries 得到有限的支持。当你选中这个选项时，它会自动地选中Media Queries 和 Modernizr.testStyles()。如需知道更多关于media queries polyfill (respond.js)的信息，请访问https://github.com/scottjehl/Respond。

只有高级用户才会对 Extra 分类中的其它选项感兴趣。关于它们是什么和如何使用它们的更多细节，参见Modernizr 文档的扩展性部分（Extensibility section of the Modernizr documentation）。

下载 Modernizr 自定义版本

下面的说明描述了如何为范例文件建立一个 Modernizr 的自定义production版本。后续的练习须要使用这一自定义版本，它将展现如何使用 Modernizr.load() 加载外部 JavaScript 文件。

单击http://www.modernizr.com/download/. 这将会打开如图8所示的界面。
在 CSS3 分类中，选中box-shadow 和 CSS columns.
在 HTML5 分类中，选中 Input Attributes.
在 Extra 分类中，取消选择 HTML5 Shim/IEPP.
确保 Extra 分类中以下的选项被选中（它们应该已经自动地被选中）。
- Modernizr.load(yepnope.js)
- Add CSS Classes
- Modernizr.testProp()
- Modernizr.testAllProps()
- Modernizr._domPrefixes

单击Generate按钮。
当自定义脚本准备好（通常在一到两秒内）时，在 Generate 按钮旁边会出现一个 Download 按钮。单击 Download 按钮并在范例网站的js文件夹中保存该文件。下载页面会给 production 脚本提供一个文件名，例如 modernizr.custom.79475.js，可是你或许会但愿给它一个更加有意义的名称。在范例文件中，我使用的名称是 modernizr.adc.js。
用自定义 production 脚本的连接替换 modernizr.js in css_support.html 和 required.html 的连接。注意 production 脚本只有 5KB，而不是 development 版本的44KB。
单击 css_support.html 中的 Live Code（或者使用你的浏览器中的 development 工具）。如今，如图9所示，开始的<html>标签只有三个类。

图9. 如今<html>标签中的类只涉及必要的 CSS3 功能

使用 Moder 年 izr 加载外部脚本

当建立Modernizr的自定义production版本时，在默认情形下，必须选中包含 Modernizr.load() 的选项。Modernizr.load() 是 yepnope() 的别名，它是与 Modernizr 同步开发的独立脚本加载器。为了说明如何使用它，我给出一个简单范例。我已经将相应的脚本从 required.html 移到了 check_required.js，而且作了三个微小的改动以便于去除 Modernizr 测试以及将它赋值到一个名为 init 的变量中。修订的脚本以下所示：

 
  var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; };  
 

Modernizr.load() 的一个很大的优势是，根据测试浏览器能力的结果，它能够有条件地加载脚本—这就是为何起初叫它 yepnope() 的缘由。它能够异步地加载外部脚本—换句话说，就是可以在浏览器已加载 Document Object Model (DOM) 以后加载外部脚本—所以它能够有助于提高你的网站性能。

Modernizr.load() 的基本语法是将一个具备以下属性的对象传递给它：

test: 你但愿检测的 Modernizr 属性。
yep: 若是测试成功，你但愿加载的脚本的位置。使用一个多脚本数组。
nope: 若是测试失败，你但愿加载的脚本的位置。使用一个多脚本数组。
complete: 外部脚本一经加载就运行的函数（可选）。

yep 和 nope 二者都是可选的，只要你提供了其中一个便可。

为了在 check_required.js 中加载和执行脚本，须要在 modernizr.adc.js 已附着到页面以后添加以下<script> 块（代码位于required_load.html 中）：

 
  <script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>  
 

这样就与以前运行的彻底一致，可是却能够下降已支持 required 属性的浏览器的下载负荷。

为了测试多种条件，你能够给 Modernizr.load()传递一组对象。如需得到更多细节信息，参见 Modernizr 文档上的Modernizr.load() 教程。

一句忠告

Modernizr 是一个强大而有用的工具，可是这并不意味着你就应该使用它。并非在全部情形下均必须使用 Modernizr 给浏览器提供多种样式。若是你主要关注的对象是 Internet Explorer，那么考虑使用IE conditional comments。你也可使用CSS层叠覆盖一些样式。例如，先使用hexadecimal color，而后使用 rgba() 或hsla() 覆盖它。旧版本的浏览器会使用第一个值而且忽略第二个值。

Modernizr 真正地变成现实是当它与 polyfills 和其它 JavaScript 相结合的时候。可是记住，一般很容易建立属于你本身的适合支持功能的测试。例如，下面就是你测试某个浏览器是否支持 required 属性的所有代码（代码位于required_nomodernizr.html 中）：

 
  var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }  
 

下一步阅读方向

本教程已经涵盖了 Modernizr 的全部主要功能如需了解关于这些功能的更多信息，请查阅相应的官方文档，其网站地址为 http://www.modernizr.com/docs/。此外，你还能够找到下列有用资源：

yepnopejs.com 提供关于 yepnope()的深刻讨论，它已经在 Modernizr 中被合并为Modernizr.load()。
充分利用HTML5和CSS3的Modernizr功能（Taking Advantage of HTML5 and CSS3 with Modernizr），做者：Faruk Ateş（Modernizr 项目负责人）尽管基于Modernizr 的较早版本，但该文章包含了一个关于经过 Modernizr 和 CSS3 获取的逐步性能改善的详细范例。

使用Modernizr 检测HTML5和CSS3浏览器支持功能 （转自http://www.adobe.com/cn/devnet/dreamweaver/articles/using-moderni