核心提示：HTML5Shiv允许就浏览器识别出HTML5元素，并可以为其添加样式-它只是简单地创建了HTML5对象，让CSS和JavaScript可以应用在元素本身。Modernizr做了同样的事情，并且在此基...
HTML5Shiv允许就浏览器识别出HTML5元素，并可以为其添加样式—-它只是简单地创建了HTML5对象，让CSS和JavaScript可以应用在元素本身。Modernizr做了同样的事情，并且在此基础上还添加了特性检测。它会告诉你特征存在与否，该怎么处理还是开发者自己决定的。
HTML5Shiv会使像
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="modernizr-2.8.3.min.js"></script>
</head>
<body>
<span class="span-svg">support</span>
<span class="span-no-svg">not support</span>
<script>
if(Modernizr.svg) {
alert(1)
} else {
alert(2);
}
</script>
</body>
</h
在head标签中添加modernzr的script，并且在html标签上添加类 “no-js”。在浏览器打开，可以发现，html标签上添加了很多类。如果浏览器支持该特性（比如svg），就会在html标签添加类svg；如果不支持svg，就会添加类no-svg。其他特性也是如此。所以我们就可以根据不同的类定制样式。
.svg span {display: none;}
.svg .span-svg {display: inline;}
.no-svg .span-no-svg {display: inline}
此外，可以在脚本中检测modernizr支持的特性，以便动态生成页面。脚本中生成了一个全局变量Modernizr。如果支持该特性，返回值是true；不支持时返回值是false。
if(Modernizr.svg) {
} else {}
另外一个有用的特性是Modernizr.load和yepnope，后者是一个资源加载器，默认集成在modernizr中。
<script>
Modernizr.load({
test: Modernizr.svg,
yep: 'svg.css', //支持该特性，加载资源
nope: 'no-svg.css' //不支持该特性，加载资源
})
// 测试多个的写法
Modernizr.load([
{
test: Modernizr.svg,
yep: ['svg.css', 'svg.js'],
nope: 'no-svg.css'
},
{
test: Modernizr.opacity,
yep: ['opacity.css', 'opacity.js'],
nope: 'no-opacity.js'
}
])
</script>
