之前提到，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的更多相关文章

  1. 一种基于ES5的JavaScript继承

    关于JavaScript继承,方式非常多,包含compile-to-javascript的语言TypeScript, CoffeeScript以及站点MDN, GitHub, Modernizr各种p ...

  2. 使用Modernizr探测HTML5/CSS3新特性（转载）

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  3. [转]Modernizr的介绍和使用

    转载自:http://blog.chinaunix.net/uid-21633169-id-4286857.html 传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入 ...

  4. Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...

  5. 前端的瑞士军刀：Modernizr.js

    前言 Modernizr.js既能给老版本浏览器打补丁,又能保证新浏览器渐进增强的用户体验. 作用: 从实际操作来看,Modernizr默认做的事情很少,除了(在你选择的情况下)给不支持html5的标 ...

  6. 使用Modernizr探测HTML5/CSS3新特性

    [转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...

  7. 为 Html 5 和 CSS 3.0 而生——Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Moderniz ...

  8. 浏览器向下兼容之polyfill[阅后即瞎]

    我们入门JavaScript的时候都写过polyfill: 比如手写一个弹窗, 手动模拟实现一个表格, 这些魔力的对象都是浏览器原生支持的, 虽然当我成为JS专家之后再也没造过轮子, 但是最近才发现我 ...

  9. 腻子脚本polyfill

    腻子脚本 具体是指一段可以给老版本浏览器(ie9以前的版本)带来新特性的javascript脚本代码.如轻量级的脚本代码或Modernizr,Modernizr除了能让ie支持html5新元素之外,还 ...

随机推荐

  1. 捕获Java线程池执行任务抛出的异常

    捕获Java线程池执行任务抛出的异常Java中线程执行的任务接口java.lang.Runnable 要求不抛出Checked异常, public interface Runnable { publi ...

  2. window下gvim中文界面改变成英文界面

    中文环境下设置GVIM的界面.菜单.提示为英文语言 修改你的_vimrc,通常为类似C:\Program Files\Vim 加入以下语句至末尾 " set the menu & t ...

  3. poj2478

    比较简单的树形dp; 定义s[i]为节点i的子树节点数和(包括自身):叶子节点s[j]=1; s[i]=signma(s[k])+1 (k是i的孩子) 则i满足的条件是 1.s[k]<=n di ...

  4. Unity3D之如何创建正确的像素比在屏幕上

    关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...

  5. SCOI2010游戏

    发现这题的并查集做法真是惊呆了 不过似乎匹配跑得更快? 对于一个联通块,假如不含环(就是一棵树),那么必定可以满足其中任意的p-1个点. 对于一个联通块,假如含环,那么必定全部的p个点都能满足. 那么 ...

  6. I.MX6 U-boot PWM hacking

    /******************************************************************************* * I.MX6 U-boot PWM ...

  7. insert /*+APPEND*/ 各种insert 插入速度比较

    SQL> select count(*) from t;COUNT(*)----------5442048****************************SQL> alter ta ...

  8. iOS开发之UITextField

    UITextField基本知识 UITextField展示的是一些可编辑的内容,并且与用户有一些交互.比如当你在虚拟键盘上按下return键时,一般会关联到键盘隐藏事件上.UITextField的一些 ...

  9. 在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  10. 解析activity之间数据传递方法的详解

    转自:http://www.jb51.net/article/37227.htm 本篇文章是对activity之间数据传递的方法进行了详细的分析介绍,需要的朋友参考下     1  基于消息的通信机制 ...