前端初学者——初探Modernizr.js Modernizr.js笔记

时间 2019-11-22

标签前端初学者初探 modernizr.js modernizr 笔记栏目 JavaScript 繁體版

原文原文链接

什么是Modernizr？

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

下载 Modernizr

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

　　重点：

　　　　<head> 的最后三行应该以下所示：

　　　　</style>

　　　　</head>

　　在html标签中添加no-js的class，当支持javascript的浏览器启动时，会动态地删除这个no-js的class。而且会在html标签中添加当前浏览器所支持的元素同名class。

如图所示。

　　你能够在浏览器中检查元素时看到html标签中增长的类，而在本地源代码中并没有改动。

　　例如，在页面中的img标签，如若浏览器不支持阴影，则.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }将会发挥做用。也就是说，你能够看到Modernizr使用boxshadow 和 csscolumns 分别代表了对box-shadow 属性和多栏布局的支持。所以，你可使用no-boxshadow 和 no-csscolumns 类为不支持这些功能的浏览器建立特殊的样式规则。

一句忠告

　　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

}

初学者笔记，更多内容请点击原文：

http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html

或者点击堂主的文章：http://www.osmn00.com/translation/221.html

笔者新手上路，见谅见谅。