使用Modernizr.js 检测用户浏览器的 HTML5 与 CSS3 特性Modernizr 是一个 JavaScr

Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

为什么使用 Modernizr

使用炫酷新颖的 web 技术是一件很有趣的事情，但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

查看 Modernizr 检测的特性列表。

http://modernizr.cn/docs/#features-css

http://modernizr.cn/

下载完后我们就可以在 <head> 中引用这个类库。由于Modernizr帮我们内置了 html5shiv 类库，所以我们必须在 <body> 加载之前引用这个类库。

检测浏览器是否支持某项特性，我们可以用这种语法：

Modernizr.featuretodetect

Modernizr对象是类库创建的全局变量，我们可以在页面的任意位置使用。比如我们需要检测浏览器是否支持WebGL，可以这么做：

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

基于 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操作。

更多细节请参考官网：http://modernizr.cn/