标签：
浏览器的发展参差不齐，以最新版 Firefox、Google Chrome、Safari 来说，它们支持的 HTML5、CSS3 特性恐怕也不尽相同，而况还有用户的情况，不同用户使用不同浏览器的不同版本，于是造成 Web 开发者在开发网站时，要面对数量庞大的浏览器种类。
如果开发时按最低标准，比如 IE6 不支持的特性，我们统统不用，那就没 Modernizr 什么事；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在早期浏览器上做一定的降级处理，这就是所谓 “Progressive Enhancement”，也是 Modernizr 要起的主要作用。
首先，下载 Modernizr 文件，然后在页面 <head></head> 中引用：
<script src="js/modernizr.js"></script>
需要注意这段代码的位置，放在 <head></head> 部分、所有样式表文件 link 后 – 之所以放样式表后面，是为了不阻塞 CSS 的加载。
放在 <head></head> 中的原因有二：
<body> 前执行，这样样式表才能识别 HTML5 中新增的标签如果这两样你都不介意，那么请随便找个位置添加 modernizr。
另外，我们还需要在 <html> 标签中添加一个 no-js 类：
<html class="no-js">
如果 Modernizr 正常运行，它会移除 no-js，添加一个 js 类；假如用户浏览器禁用 JavaScript，则 Modernizr 无法运行，html 标签就有 no-js。
在 HTML5 Boilerplate 里，<html> 标签是这样写的，比仅加一个 no-js 更复杂：
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
页面在加载完 Modernizr.js 后，会自动运行生成一个 JavaScript 对象Modernizr，这个对象中包含浏览器特性支持的真假值，另外，它还会给 <html>标签添加新的类(class)，以标明浏览器对 HTML5、CSS3 特性的支持情况。以我的 Firefox 21 for Linux 为例，一个 HTML5 Boilerplate 页面的 <html> 标签在 Modernizr 作用后会变成如下：
<html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
它表示我的浏览器支持 HTML5 的 geolocation、history，CSS3 的多背景图片等特性，一目了然。
这样，我们在使用 CSS3 时就可以做一定的降级，比如：
body {
background: url(background-top.png) top left no-repeat;
}
.multiplebgs body {
background: url(background-top.png) top left no-repeat,
url(background-bottom.png) bottom left repeat-x;
}
早期的浏览器下，我们使用一张背景图片，而支持多背景图片的浏览器下，我们将使用两张背景图片。
但这只是 Modernizr 的简单应用，它还有复杂应用，比如 HTML5 特性:
if (Modernizr.canvas) {
// 可以使用 canvas
} else {
// 浏览器没有原生的 canvas 支持，做一定的降级处理，或是加载 polyfills
}
基本上所有 HTML5 特性都有相应的 Polyfills 进行处理，至于是否必要，那就看项目需要了：有时候，你可以，不一定代表你要。毕竟，在 IE6 上支持 Geolocation 这样的特性意义不大。
另外，Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv，我们只要引用 Moernizr.js 文件，IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等，也可以使用 CSS 对它们进行样式化。
标签：
原文地址：http://www.cnblogs.com/stevenx1987/p/4176285.html
