Modernizr的基本使用
先说说什么是Modernizr：
Modernizr 是一套 JavaScript 函式库，用来侦测浏览器是否支援次世代的网站技术。
Modernizr不同于传统透过解析浏览器的用户代理的识辨方式，认为这种方式亦不可靠，例如使用者可以手动更改它们浏览器的User agent、即便是相同的网页渲染引擎，在不同的浏览器中也不一定支援相同的功能。因此Modernizr通常会建立一个特定样式的元素，然后立刻尝试改写这些元素的设定，若在支援的浏览器上，元素会回传有意义的值。但在不支援的浏览器则会回传空值或“undefined”。Modernizr 利用这些结果来判断浏览器是否支援这些功能。
Modernizr能测试超过100种以上的次世代功能。测试的结果会储存在一个名为“Modernizr”的物件里，里面包含了测试结果的布林值。并且根据支援或不支援的功能，新增class名称给HTML元素。
--摘自《维基百科》
以前，html+css很难写出符合各种浏览器标准的代码，为了保证兼容性，对不同的浏览器运行不同的样式，html开发人员必须使用各种hacks，利用浏览器的漏洞来使不同的浏览器加载不同的css样式。此种解决方法只能说是便宜之计，而Modernizr提供了比较优雅的解决方案。
先看看怎么使用吧:
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<script src="js/modernizr.js" type="text/javascript"></script>
</head>
<body>
<h1>test</h1>
</body>
</html>
这里在运行的时候会被取代为:（用firebug之类的工具可以看到实际加载的类）
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
可以看到所有以“no-”开头的，就是这个浏览器不支持的特性。因此，只要在css种添加两种样式：
.canvas h1 {
color: blue;
}
.no-canvas h1 {
color: red;
} 由于html元素被添加了相应的class，使得两种样式在不同的情况下被加载了。 也可以使用javascript判断一个名为Modernizr的元素属性:
$(function() {
if (Modernizr.canvas) {
$('h1').text('canvas');
} else {
$('h1').text('no-canvas');
}
}); 也可以使用Modernizr.load()来加载:
// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
具体参考 http://modernizr.com/docs/