Modernizr 与 Polyfill
之前提到,Modernizr 是 HTML5 和 CSS3 的特性检测工具,这里简单介绍一下它的用法。最简单的用法是在页面的 <head> 中添加 Modernizr 的 JavaScript 文件:
<!doctype html>
<html>
<head>
<script src="modernizr-2.6.2.js"></script>
</head>
<body>
</body>
</html>
Modernizr 脚本执行后,你会发现页面类似下面的样子(以 IE9 为例):
<!doctype html>
<html class=" js no-flexbox no-flexboxlegacy canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage no-webworkers no-applicationcache svg inlinesvg no-smil svgclippaths">
<head>
<script src="modernizr-2.6.2.js"></script>
</head>
<body>
</body>
</html>
可以看到,Modernizr 检测了数十个 HTML5 和 CSS3 特性之后,将结果记录在 html 标签的 class 属性中,其中带 no 前缀的表示浏览器不支持该特性,不带 no 前缀的表示浏览器支持该特性。这样,我们就可以根据 html 标签的这些 class 属性,在 CSS 文件中针对不同的特性应用不同的样式。例如 .no-touch #someid:hover #menu {display: block;}。
Modernizr 脚本运行后也生成了一个 Modernizr 对象,以布尔值记录了上面所有这些特性。因此,我们就可以在 JavaScript 中简单地利用诸如 if (Modernizr.touch) {...} 这样的代码针对触屏设备作优化。
但使用 CSS 的样式限制和 JavaScript 的条件判断,还是有个缺点:我们需要将各种可能性对应的代码都包含在 CSS 和 JavaScript 文件中,这样文件就变得很臃肿。针对这个问题,Modernizr 中包含了 YepNope.js 这个条件加载器,可以针对不同的特性加载不同的 CSS 和 JavaScript 文件。例如:
Modernizr.load({
test: Modernizr.touch,
yep : ['touch.css', 'touch.js'],
nope: ['mouse.css', 'mouse.js'],
complete: function() {
doSomeThing();
}
});
或者我们对缺乏某功能的浏览器加载 Polyfill(填充)库:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
参考资料:
[1] Modernizr: the feature detection library for HTML5/CSS3
[2] yepnope.js | A Conditional Loader For Your Polyfills!
[3] HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki
[4] What is a Polyfill? - remy sharp’s b:log
[5] The Developer’s Guide To Writing Cross-Browser JavaScript Polyfills
[6] 图灵社区 : 阅读 : HTML5逸事:一袋“腻子粉”的故事
Modernizr 与 Polyfill的更多相关文章
- 一种基于ES5的JavaScript继承
关于JavaScript继承,方式非常多,包含compile-to-javascript的语言TypeScript, CoffeeScript以及站点MDN, GitHub, Modernizr各种p ...
- 使用Modernizr探测HTML5/CSS3新特性(转载)
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...
- [转]Modernizr的介绍和使用
转载自:http://blog.chinaunix.net/uid-21633169-id-4286857.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入 ...
- Modernizr的介绍和使用
传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...
- 前端的瑞士军刀:Modernizr.js
前言 Modernizr.js既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验. 作用: 从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标 ...
- 使用Modernizr探测HTML5/CSS3新特性
[转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...
- 为 Html 5 和 CSS 3.0 而生——Modernizr的介绍和使用
传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...
- 浏览器向下兼容之polyfill[阅后即瞎]
我们入门JavaScript的时候都写过polyfill: 比如手写一个弹窗, 手动模拟实现一个表格, 这些魔力的对象都是浏览器原生支持的, 虽然当我成为JS专家之后再也没造过轮子, 但是最近才发现我 ...
- 腻子脚本polyfill
腻子脚本 具体是指一段可以给老版本浏览器(ie9以前的版本)带来新特性的javascript脚本代码.如轻量级的脚本代码或Modernizr,Modernizr除了能让ie支持html5新元素之外,还 ...
随机推荐
- jquery ui autoComplete自动完成
官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "Ap ...
- JVM内存回收机制
1. JVM内存回收机制简述 http://www.cnblogs.com/lzrabbit/p/3826738.html
- poj2352Stars
http://poj.org/problem?id=2352 二维逆序数 按一个数排序 转化为1维的 之前用树状数组写过 这次用线段树敲了下 #include <iostream> #in ...
- POJ 2455 Secret Milking Machine (二分+无向图最大流)
[题意]n个点的一个无向图,在保证存在T条从1到n的不重复路径(任意一条边都不能重复)的前提下,要使得这t条路上经过的最长路径最短. 之所以把"经过的最长路径最短"划个重点是因为前 ...
- Building QT projects from the command line
/************************************************************************ * Building QT projects fro ...
- Java 7 Fork/Join 并行计算框架概览
应用程序并行计算遇到的问题 当硬件处理能力不能按摩尔定律垂直发展的时候,选择了水平发展.多核处理器已广泛应用,未来处理器的核心数将进一步发布,甚至达到上百上千的数量.而现在 很多的应用程序在运行在多核 ...
- 【转】Angular运行原理揭秘 Part 1
当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...
- Tomcat配置JNDI数据源
经过3个多小时的努力,配置JNDI数据源(主要是通过DBCP连接池)终于搞定-还是Tomcat官方的说明好,不过全是英文的,大概还看得懂.百度上那么花花绿绿的太多了,一个也没成功!...本例使用的数据 ...
- ASP.NET MVC中默认Model Binder绑定Action参数为List、Dictionary等集合的实例
在实际的ASP.NET mvc项目开发中,有时会遇到一个参数是一个List.Dictionary等集合类型的情况,默认的情况ASP.NET MVC框架是怎么为我们绑定ASP.NET MVC的Actio ...
- Java Script 正则表达式的使用示例
一.语法 1.1 在JS中的使用代码 var myregex = new RegExp("^[-]?[0-9][0-9]{0,2}\\.[0-9]{5,15}\\,\s*[-]?[0-9][ ...