前端初学者——初探Modernizr.js Modernizr.js笔记
2024-08-31 18:53:24
什么是Modernizr?
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(浏览器嗅探)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。
下载 Modernizr
与其它 JavaScript 库相同的是,Modernizr 可提供 development 和 production 版本。 与大多数库相比,唯一的不同之处是,空格和注释已经从 production 版本中删除了,这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素,这样能够显著降低下载量。 在很多情况下,production 版本可以缩小为development版本大小的二十分之一。
重点:
<head> 的最后三行应该如下所示:
</style>
<script src="js/modernizr.js"></script>
</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
笔者新手上路,见谅见谅。
最新文章
- javaScript中的空值和假值
- 浅析-博客Ping服务
- easyui 上传文件代码
- Qt之动画框架
- contesthunter暑假NOIP模拟赛第一场题解
- 实现从sql server存取二进制图片
- meteor icons &; splash配置
- apache2.4 +django1.9+python3+ubuntu15.10
- Repeater和Gridview前台显示行号的方法
- mac下的改装人生——关于ssd
- 阅读:AirBag Boosting Smartphone Resistance to Malware Infection
- react 入门
- 例子:js超级玛丽小游戏
- [JSOI2008]Blue Mary的战役地图(二分+哈希)
- 模块 import 与from
- or 的判断
- RabbitMq qos prefetch 消息堵塞问题
- 5分钟搞定jQuery+zepto.js+面向对象插件
- XOR Queries(莫队+trie)
- 【lojg152】 乘法逆元 2(数学)
热门文章
- CUDA数组分配
- e.preventdefault() 别滥用
- PHP中的生成XML文件的4种方法分享
- zen-Coding在Notepad++中的使用
- SpringMVC3中返回json字符串时500 Internal Server Error的处理方案
- redis 过期回调通知
- python与consul 实现gRPC服务注册-发现
- eclipse环境Dynamic web module version 3.1版本的进步,简化Dynamic web object 中Servlet类的配置,不用web.xml配置<;Servlet>;
- Vim---配置实用的.vimrc文件
- 【软件笔记】 ◆笔记&#183;I◆ 各类冷门函数细解