什么是 Modernizr? Modernizr 教程 -----HTML5 和 CSS3 开发利器 Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库 目前, 通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测 18 项 CSS3 功能以及 40 多项关于 HTML5 的功能 它比传统检测浏览器名称 ( 浏览器嗅探 ) 的方式更为可靠 一整套测试的执行时间仅需几微秒 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测, 从而实现效率优化 当使用 Modernizr 检测 CSS3 支持情况时, 你无需具备任何 JavaScript 的知识 你仅需在网页中插入文件, 它随即根据浏览器的功能情况在页面的 <html> 标签上添加一组类 相应类的名称已经符合标准化的要求并浅显易懂 例如, 如果浏览器支持 box-shadow 属性, 则需要添加相应的 boxshadow 类 ; 否则, 添加一个 no-boxshadow 类即可 你所要做的一切只不过是创建一个使用这些类的式样表, 以便为相应浏览器提供合适的式样 Modernizr 可轻松实现 JavaScript 解决方案, 即人们熟知的 polyfills 它模拟 HTML5 相关功能和技术, 如地理定位 然而, 你的确需要对 JavaScript 有基本了解以便使用这些功能和技术 术语 pol yfill 来源于一种填补裂缝的黏土的英国品牌 Polyfilla( 即美国人熟知的填泥料 ) 这里,polyfill 用来填补浏览器功能上的漏洞 有时,Modernizr 可无缝地执行这项任务 但本质上, 这只是一种修补工作, 所以, 不能依赖它产生无漏洞浏览器所实现的完全相同结果 下载 Modernizr 与其它 JavaScript 库相同的是,Modernizr 可提供 development 和 production 版本 与大多数库相比, 唯一的不同之处是, 空格和注释已经从 production 版本中删除了, 这样可以减少下载量的大小 Modernizr 采取了不同的方法 development 版本在某种意义上可称为是 厨房中的水槽 它几乎包含了一切 production 版本只包含了你选择的那些元素, 这样能够显著降低下载量 在很多情况下,p roduction 版本可以缩小为 development 版本大小的二十分之一 当使用 Modernizr 进行测试时, 我建议你下载 development 版本 一旦你掌握了它是如何运作的以 及它的能力, 你就可以下载一个自定义 production 版本以便在你的网站进行部署 本教程的示例文件包含的是 Modernizr 的 development 2.0.6 版本, 但是我建议你从 Modernizr 站 点上用最新更新的版本替代它 1. 下载本文附带的示例文件 ( 使用 modernizr.zip) 并且在 Dreamweaver 站点内将它们解压到一个方便的位置, 或者是为本教程创建一个新站点 2. 访问 Moderniz 网站, 其地址为 http://www.modernizr.com/ 3. 在 Download Modernizr 2 部分中, 单击 Development 按钮 ( 参见图 1) Modernizr 的 d evelopment 版本就会直接在你的浏览器窗口上打开
图 1. 选中 development 版本以便进行 Modernizr 测试注 : 如果你错误地单击了主导航菜单中的 Download 链接, 那么你将看到大量的复选框出现, 要求你去选择你想要的工具 这是为定制的 production 版本所设置 单击面板顶部的 Development 版本的链接, 或者单击浏览器的 Back 按钮返回主页并选中图 1 所示的 Development 按钮 4. 在浏览器的主菜单上, 选中 Save Page As, 并在示例文件的 js 文件夹里将它另存为 modernizr. js 如果有必要的话可以替换已有的文件 使用 Modernizr 检测 CSS 功能 如前所述,Modernizr 并没有尝试在旧版本的浏览器中添加新的功能, 但是它允许你按照你的风格去弥补 那些缺失的功能 为了展示这是如何运作的, 示例文件中包含了一个叫做 css_support_begin.html 的页面 如果你在新式浏览器中加载这个页面, 它应该看起来如图 2 所示
图 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-shado w 属性, 然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector :.no-boxshadow img { /* styles for browsers that don't support box-sha dow */ } 只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类, 因此其它的浏览器不会应用这个样式 规则 让我们将 Modernizr 添加到示例页面并检查它添加到 <html> 标签中的类 1. 复制 css_support_begin.html 并将它另存为 css_support.html 2. 打开你刚创建的复制文件, 并切换到 Code 视图或者 Split 视图 3. HTML markup 的前两行应该如下所示 : <!DOCTYPE HTML> <html> 4. 将 class="no-js" 添加到 <html> 标签中, 如下所示 : <!DOCTYPE HTML> <html class="no-js"> Modernizr 依赖于在浏览器中启用的 JavaScrip 当它启用时, 这种类会被动态地删除 但是, 在极少数情况下, 当 JavaScrip 没有启用时, 它依然存在于 HTML makup 中, 如果必要, 它允许你为这样的访问者创建特殊的样式规则 5. css_support.html 中的样式是嵌入在 <style> 块中 Modernizr 库需要被添加到样式加载之后的页面的 <head> 部分 在结束的 </style> 和 </head> 标签之间添加一条新的线, 并且使用 <s cript> 标签附加上 moderizr.js 最简单的方式是键入你自己的代码, 但是你也可以在 Insert 面板中使用 Script 按钮或者选中 Insert HTML Script Objects Script <head> 的最后三行应该如下所示 : </style> <script src="js/modernizr.js"></script> </head> 注 : 如果你使用 Insert 面板或者 Insert 菜单, 则 Dreamweaver 会添加 type="text/javascr ipt" 到开始的 <script> 标签中 这在 HTML5 中不再要求, 但是留着它并不会造成危害
6. 保存 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 hsla() multi-column layout cssgradients hsla csscolumns multiple backgrounds opacity reflection rgba() text-shadow multiplebgs opacity cssreflections rgba textshadow 无论在哪对特定的 CSS 属性进行测试, 类的名称和属性名称都是一样的, 然而这要求去除任何连字号或是 括号 其它类是按照它们参考的 CSS3 模块而命名 创建旧版本浏览器样式规则 参见表 1, 你可以看到 Modernizr 使用 boxshadow 和 csscolumns 分别表明了对 box-shado w 属性和多栏布局的支持 因此, 你可以使用 no-boxshadow 和 no-csscolumns 类为不支持 这些功能的浏览器创建特殊的样式规则 为了保证指令简单, 我将演示只有 CSS 声明的范例 你可以直接地将它们键入到 Code 视图中或者使用 New CSS Rule 对话框 1. 为.no-boxshadow img 创建一个新的 descendant (compound) selector 2. 设置 2 像素灰色实心的右边界和底边 ( 我选择 #8A8A8A) 由此产生的样式规则应该如下所示 :.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: # 8A8A8A 2px solid; } 这不像半透明的阴影那样有吸引力, 但是尽管如此, 它仍然使得图像能够从背景中略微地突起 3. 在不支持多栏布局的浏览器中, 你需要浮动图像并且调整它的页边距 为.no-csscolumns img 创建一个新的 descendant selector 4. 设置图像向左浮动, 并且将顶部和底部页边距设置为 3px, 右边距为 8px, 以及左边距为 0 样式声明如下所示 :.no-csscolumns img { margin: 3px 8px 3px 0; float: left; } 5. 确保这个样式规则是遵循.columns img 规则 两个规则有着相同的特殊性, 因此, 如果它们顺序颠倒, 则.columns img 的 10 像素的左边距可能会覆盖你刚刚创建的新规则 你可以将.no-cs
scolumns img 重命名为.no-csscolumns.columns img 以便于给它更高的特殊性, 但是最 好是保证 selector 越简单越好 ( 顺便说一下, 如果你不确定什么是特殊性, 查阅 Adrian Senior 的文章,Understanding Specificity 它虽然发表时间很长, 但是很有价值 ) 6. 保存 css_support.html, 并在新式浏览器中对它进行测试 它应该和以前看起来完全一模一样 7. 你应该在你的本地系统上或通过链接到 BrowserLab, 在旧版本的浏览器上对这个页面进行测试 虽然没有阴影或者栏目, 但是现在页面的式样是可接受的, 如图 5 所示 图 5. 旧版本浏览器使用的是可选的样式, 例如 IE6 在这个的简单范例中, 我只用了前缀为 no- 的类就为旧版本的浏览器创建了特殊的样式 但是, 按照它 们的能力, 你不同时使用这两个类 ( 带或不带前缀 ) 为浏览器创建不同的样式是绝对没有道理的 例如 :.csscolumns { /* rules for browsers that support multi-column layout */ }.no-csscolumns { /* rules for browsers that don't support multicolumn layout */ } 有时这种方法是合理的, 例如, 如果你想为每一级支持都创建一个完全不同的布局 但是如果它仅仅是一 个为旧版本浏览器提供可选择的样式的问题, 不要忘记, 浏览器会忽略它们无法识别的属性 如果你对所 有的样式都使用 Modernizr 类, 那么在 JavaScript 禁用的浏览器中你的页面将完全非样式化 使用 Modernizr 检测 HTML5 的支持功能 Modernizr 为开始的 <html> 标签添加的类名称起着双重目的作用 当页面加载时, 它们也是 Moderni zr 对象创建的 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 su pported } else { // script to run if local storage is not supported } 然而, 就 audio 和 video 而言, 返回值是一个字符串, 它表明着浏览器能够处理特定类型的置信水平 根据 HTML5 规范, 空的字符串表示该类型不支持 如果支持该类型, 那么返回值是 maybe 或是 pr obably 例如 : if (Modernizr.video.h264 == "") { // h264 is not supported } 使用 Modernizr 验证 HTML5 必需的表单字段 HTML5 添加了许多新的表单属性, 例如 autofocus, 当页面第一次加载时它会自动地将光标放在某个 指定的字段 另一个有用的属性是 required, 如果某个必需的字段留有空白, 那么它将阻止 HTML5 兼容的浏览器提交表单 ( 参见图 6)
图 6. 提交表单前,HTML5 兼容的浏览器会检查必需字段是否填写 这很好, 但是它会给你留下一个问题 : 旧版本的浏览器该怎么办? 一个解决方法是忽略它们, 并留给服务器侧的验证功能进行最终的检查 如果浏览器无法识别 requir ed 属性, 那么另外一个处理这种情况的用户界面更为友好的方法是创建一个小小的脚本对必需字段进行 检查 如下的指令显示了在 Modernizr 帮助下如何进行相应的操作 1. 在范例文件夹中复制 required_start.html 并保存为 required.html 2. 在结束的 </head> 标签前用 <script> 块按照如下所示将 modernizr.js 粘贴到页面中 : </style> <script src="js/modernizr.js"></script> </head> 3. 紧接在 Modernizr 库与页面连接的标签之后, 创建一个单独的 <script> 块, 并且在页面一 加载完就创建一个事件处理程序以便于执行代码 : <script src="js/modernizr.js"></script> <script> window.onload = func tion() { // code to execute when page loads }; </script> </head 4. 事件处理程序需要获得一个与表单元素有关的参考并在无法识别 autofocus 和 required 属性 的浏览器中模拟它们 处理 autofocus 的方式很简单 : window.onload = function() { // get the form and its input elements v ar form = document.forms[0], inputs = form.elements; // if no autofoc us, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } 该条件测试了 Modernizr.input.autofocus, 如果不支持 autofocus, 那么返回的值是 fals e 然而, 逻辑运算符 NOT( 一个感叹号 ) 却能使意思颠倒, 因此如果不支持 autofocus, 那么该条 件的求值结果为 true, 并且 inputs[0].focus() 将光标放在第一个输入字段 5. 如果不支持 required, 那么现在添加代码以便于检查必需字段 事件处理程序的完整代码如下所 示 : window.onload = function() { // get the form and its input elements v ar form = document.forms[0], inputs = form.elements; // if no autofoc us, 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].getattribut e('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 a
re required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } 新代码产生了一个函数, 当提交表单时它能够遍历所有的输入元素, 以便于找到具有 required 属性的 字段 当它找到某个字段时, 它会从值中除去开头和结尾的空白, 并且如果结果是一个空的字符串, 那么 它会把结果添加到 required 数组中 在所有的字段都已经得到检查后, 如果数组中包含某些元素, 那么浏览器会显示一个与缺失字段名称有关的警告, 并阻止提交表单 6. 保存 required.html 并加载到某个浏览器中, 例如尚不支持 HTML5 表单的 IE 6-9 注意一下光标是如何自动地填入第一个字段的 7. 单击提交按钮而无需填写任何其它字段 你应该能看到一个警告提示你名称和邮箱字段需要填写 ( 参见图 7) 图 7. 脚本检测到不支持新属性的浏览器中的必需字段 8. 只填写其中一个必需字段, 再进行一次页面测试 当你单击 OK 关闭警告时, 你填写的字段仍然有它的内容, 这表明表单尚未提交 9. 同时填写两个必需表单, 并单击 submit 按钮 这一次, 所有表单字段被清空, 并且你应该能够看到隶属于 URL 的数据作为查询字符串出现在浏览器的地址栏 这就证实了表单数据已被提交 10. 在 HTML5 兼容的浏览器中, 例如最新版本的 Firefox Chrome 或者 Opera, 对这个页面进行测试 浏览器显示了它自己的类似于图 6 所示的错误信息, 而不是显示警告信息 注意 : Safari 5.1 错误地报告了它支持 required 属性, 所以它在没有验证必需字段的情况下就提 交了表单 这是 Safari 的缺陷, 然而在 Modernizr 里它是不存在的 创建版本
当你准备好对你的网站进行部署时, 推荐创建一个 Modernizr 的自定义 production 版本, 它只包含那 些你实际需要的元素 这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB 当前选 项的范围如图 8 所示 图 8. Modernizr 下载页面允许你仅选择那些你需要的功能选项可以便捷地按照如下类别进行分组 :CSS3 HTML5 Misc(ellaneous) 和 Extra 单击前三个标题旁边的 Toggle 按钮可任意地选择或者放弃选择分类中的所有复选框 在默认情形下,Extra 分类将会选中如下三个条目 : HTML5 Shim/IEPP: 它添加了两个脚本 HTML5 shim 和 IE Print Protector 它们迫使 IE 6-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/scottj ehl/respond 只有高级用户才会对 Extra 分类中的其它选项感兴趣 关于它们是什么和如何使用它们的更多细节, 参见 Modernizr 文档的扩展性部分 (Extensibility section of the Modernizr documentation) 下载 Modernizr 自定义版本 下面的说明描述了如何为范例文件创建一个 Modernizr 的自定义 production 版本 后续的练习需要使 用这一自定义版本, 它将展示如何使用 Modernizr.load() 加载外部 JavaScript 文件 1. 单击 http://www.modernizr.com/download/. 这将会打开如图 8 所示的界面 2. 在 CSS3 分类中, 选中 box-shadow 和 CSS columns. 3. 在 HTML5 分类中, 选中 Input Attributes. 4. 在 Extra 分类中, 取消选择 HTML5 Shim/IEPP. 5. 确保 Extra 分类中如下的选项被选中 ( 它们应该已经自动地被选中 ) Modernizr.load(yepnope.js) Add CSS Classes Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes 6. 单击 Generate 按钮 7. 当自定义脚本准备好 ( 一般在一到两秒内 ) 时, 在 Generate 按钮旁边会出现一个 Download 按钮 单击 Download 按钮并在范例网站的 js 文件夹中保存该文件 下载页面会给 production 脚本提供一个文件名, 例如 modernizr.custom.79475.js, 但是你或许会希望给它一个更加有意义的名称 在范例文件中, 我使用的名称是 modernizr.adc.js 8. 用自定义 production 脚本的链接替换 modernizr.js in css_support.html 和 required.htm l 的链接 注意 production 脚本只有 5KB, 而不是 development 版本的 44KB
9. 单击 css_support.html 中的 Live Code( 或者使用你的浏览器中的 development 工具 ) 现在, 如图 9 所示, 开始的 <html> 标签只有三个类 图 9. 现在 <html> 标签中的类只涉及必要的 CSS3 功能 使用 Modernizr 加载外部脚本 当创建 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 fo rm = document.forms[0], inputs = form.elements; // put the focus in t he 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 (v ar i = 0; i < inputs.length; i++) { att = inputs[i].getattribute('req uired'); // if required, get the value and trim whitespace if (att!= null) { val = inputs[i].value; // if the value is empty, add to requ ired array if (val.replace(/^\s+ \s+$/g, '') == '') { required.push(i nputs[i].name); } } } // show alert if required array contains any el ements if (required.length > 0) { alert('the following fields are req uired: ' + required.join(', ')); // prevent the form from being submi tted 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/c heck_required.js', complete: function() { init(); } }); </script> 这样就与之前运行的完全一致, 但是却可以降低已支持 required 属性的浏览器的下载负荷 为了测试多种条件, 你可以给 Modernizr.load() 传递一组对象 如需获得更多细节信息, 参见 Mo dernizr 文档上的 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 中被合并为 Moderniz r.load() 充分利用 HTML5 和 CSS3 的 Modernizr 功能 (Taking Advantage of HTML5 and CSS3 with Modernizr), 作者 :Faruk Ateş(Modernizr 项目负责人 ) 尽管基于 Modernizr 的较早版本, 但 该文章包含了一个关于通过 Modernizr 和 CSS3 获取的逐步性能改善的详细范例