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>
加载之前引用这个类库。
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操作。
更多细节请参考官网:http://modernizr.cn/