modernizr.js为HTML5和CSS3而生！

modernizr.js会检测当前浏览器是否支持CSS3的特性， 比如@font-face、border-radius、border-image、box-shadow、rgba()等， 同时也会检测是否支持HTML5的特性，比如audio、video、local storage、新的input标签的类型和属性等。 在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们。

modernizr.js帮助我们检测浏览器是否实现了某个功能，如果实现了那么开发人员就可以充分利用这个功能做一些工作， 反之没有实现开发人员也好提供一个fallback。所以，我们要明白的是modernizr.js只是帮我们检测功能是否被支持， 它并不能够给浏览器添加那些本来不支持的功能。

modernizr.js内置了html5shiv，所以，HTML5新增的标签可以放心的使用。

modernizr.js官网：https://modernizr.com

modernizr.js在GitHub上的网址：https://github.com/Modernizr/Modernizr

BootCDN⤵︎

<!--[if lt IE 9]>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<![endif]-->

step1、通过包管理器安装modernizr.js

step2、在HTML代码中引入JavaScript

<!--[if lt IE 9]>
    <script type="text/javascript" src="/bower_components/modernizr/dist/modernizr.min.js"></script>
<![endif]-->

考虑到IE9是支持HTML5和CSS3的，所以，我们判断浏览器是低于IE9才加载。

modernizr.js内置了html5shiv， 所以我们必须在body元素之前引用这个类库。当然你如果针对的是IE9+的浏览器，那么大可以在页面元素加载完后再引入， 但这样就会有FOUC这样极不友好的效果出现。

在html标签中加入no-js类，以免浏览器禁用了JavaScript。

页面渲染完成后，使用"Inspect Element"查看结果，你可能会发现， 在html标签中有一些以no-为前缀的class， 当然大部分都没有这个前缀。如果一个类名以no-作为前缀，比如no-touch， 这表示浏览器不支持touch特性。

我们可以根据这些以no-为前缀class进行hack。

示例：

.no-touch div {
    /*-- do some hacks here --*/
}

你要检测某个特性，使用Modernizr.feature，feature就是某个具体的特性。

示例：

if (Modernizr.webgl) {
    /* support WebGL */
} else {
    /* not support WebGL */
}

此方法基于YepNope.js实现。

示例：

Modernizr.load(
    test: Modernizr.webgl,
    yep : 'three.js',
    nope: 'jebgl.js'
);

当浏览器支持WebGL的时候，就引入three.js这个类库做一些3D效果。 浏览器不支持WebGL的时候可以使用jebgl.js做一些fallback操作。

根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

你可以在HTML5 Cross Browser Polyfills找到几乎所有新特性的fallback解决方案。