转载自：http://blog.chinaunix.net/uid-21633169-id-4286857.html传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 Jav ...
![[转]Modernizr的介绍和使用](/images/loading.gif)
转载自：http://blog.chinaunix.net/uid-21633169-id-4286857.html
传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。
什么是Modernizr？
因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到<html>元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no- boxshadow class添加到<html>元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功 能，不支持的浏览器上继续使用以前的方式。
4. 使用案例2——对本地存储进行测试
Modernizr除了添加相应的class到<html>元素以外，还提供一个全局的Modernizr JavaScript对象，该对象提供了不同的属性来表示某种新特性在当前浏览器下是否支持。例如，下面的代码可以用于判断浏览器是否支持canvas和 local storag。对于多个开发人员在多版本浏览器下开发测试的时候很有好处的。
大家可以统一代码
全局的Modernizr对象也可以用来探测是否支持CSS3特性，下面的代码用于测试是否支持border-radius 和CSS transforms:
audio 和 video 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。 根据 HTML5 规范，空的字符串表示该类型不支持。 如果支持该类型，那么返回值是“maybe”或是“probably”。 例如：
if (Modernizr.video.h264 == "") { // h264 is not supported }提交表单前，HTML5 兼容的浏览器会检查必需字段是否填写
代码产生了一个函数，当提交表单时它能够遍历所有的输入元素，以便于找到具有 required 属性的字段。 当它找到某个字段时，它会从值中除去开头和结尾的空白，并且如果结果是一个空的字符串，那么它会把结果添加到 required 数组中。 在所有的字段都已经得到检查后，如果数组中包含某些元素，那么浏览器会显示一个与缺失字段名称有关的警告，并阻止提交表单。
创建自定义版本
当你准备好对你的网站进行部署时，推荐创建一个 Modernizr 的自定义 production 版本，它只包含那些你实际需要的元素。 这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图所示。
参考：
- http://www.mhtml5.com/2011/03/676.html
- http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
- http://zh.wikipedia.org/wiki/Modernizr
- http://modernizr.com/docs/
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：[转]Modernizr的介绍和使用
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
