modernizr.js的介绍和使用
原文链接：https://www.cnblogs.com/-simon/p/5907053.html
Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现开发人员也好提供一个fallback。所以，我们要明白的是Modernizr只是帮我们检测feature是否被支持，它并不能够给浏览器添加那些本来不支持的feature。
Modernizr在2010和2011年均赢得了 .net Award for Open Source App of the Year ，要知道它的竞争对手都是像Wordpress、Drupal这些重量级选手。同时在2011年，它的首席开发者 Paul Irish 赢得了Developer of the Year大奖。
其实，这个类库使用非常简单，简单到你把 官方文档 (单页)从头到尾看一遍就完全了解它的使用方法了。接下来，我做一点简单的介绍。
Setting-Up Modernizr
在官方网站( http://modernizr.com )上我们可以看到有两个下载选项，Development和Production版本。其实它们都会导向同一个下载页面，只不过前者会帮我们把选项预先勾上而已。
通常我们需要检测的新特性基本都囊括在了这些选项中，我们可以根据自己需要，定制化的选择需要检测的feature。
下载完后我们就可以在 <head> 中引用这个类库。由于Modernizr帮我们内置了 html5shiv 类库，所以我们必须在 <body> 加载之前引用这个类库。当然你如果针对的是IE9+的浏览器，那么大可以在页面元素加载完后再引入，但这样就会有 FOUC 这样极不友好的效果出现。
最后，我们需要在 <html> 标签中加入 no-js 类，以免浏览器禁用了JavaScript。
Working With Classes
使用了Modernizr后，页面中渲染后的html代码是这个样子的：
其中有很多以no作为前缀的class，当然大部分都没有这个前缀。事实上，如果一个类名以no作为前缀，比如 no-touch 这表示浏览器不支持touch特性，这也是最新版本的Chrome不支持的两个feature之一：
Modernizr有一个 test页面 ，可以检测当前浏览器支持的特性。Chrome目前是对HTML5和CSS3新特性支持最好的浏览器，没有之一。
言归正传。当我们引入了Modernizr.js类库后， <html> 标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性。比如在IE6下面，不支持boderradius特性，那么在 <html> 标签中就会出现 no-borderradius 类，我们可以做一些fallback的工作：
.no-borradius div{
/*-- do some hacks here --*/
}
Browser Feature Test
检测浏览器是否支持某项特性，我们可以用这种语法：
Modernizr.featuretodetect
Modernizr对象是类库创建的全局变量，我们可以在页面的任意位置使用。比如我们需要检测浏览器是否支持WebGL，可以这么做：
if(Modernizr.webgl){
/* support WebGL */
}
else{
/* not support WebGL */
}
Modernizr.load()
基于 YepNope.js ，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。
你可以在这里( HTML5 Cross Browser Polyfills )找到几乎所有新特性的fallback解决方案。
Modernizr.load(
test: Modernizr.webgl,
yep : 'three.js',
nope: 'jebgl.js'
);
当浏览器支持WebGL的时候，就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。
还有一个比较酷的例子来自官方文档。我们在用jQuery类库的时候，通常都是这种写法：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>
现在用Modernizr.load()可以这么写：
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
Summary
Modernizr为我们做了最复杂的一步，我们只需要像模块一样将代码组装起来。当然，Modernizr还有一些其他的用法，比如Modernizr.mq()方法用来检测media query，这对Responsive Design可以帮上很多忙。诸如这些API在官方文档中都有涉及，建议在使用的时候仔细了解一下即可。
