Modernizr.js介绍与使用 - 个人学习记录

言归正传。当我们引入了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在官方文档中都有涉及，建议在使用的时候仔细了解一下即可。

赏