我们需要一款便携的工具，来帮助我们创造超越平凡的设计，而Modernizr正是我们所需要的。

在Modernizr网站上，选择一个大的开发者版本脚本，或者是一个包含了我们需要使用的特性测试的定制版本。在性能优化如此重要的今天，我们不应该在线上站点使用开发者版本。配置好项目后，下载脚本并链接到文档中。

在脑中始终保持渐进增强的理念——引入任何脚本的时候，都要考虑脚本不能被激活的状况。在html元素上,增加相应的no-js样式，为不支持JavaScript的浏览器设置基本的样式，激活Modernizr的功能。

当Modernizr运行时，它会在JavaScript被激活时候，使用js来替代no-js样式。Modernizr会帮助我们来评估浏览器，它会根据检测结果，向html元素上添加相应的class属性和值，而不是使用用户代理字符串嗅探的方式。

当浏览器不支持某一个特性的时候，Modernizr会自动在这个class上增加一个no-前缀。

我们可以利用这些属性和值，根据浏览器对CSS属性的支持情况，调整页面来适应。

在下面的例子中，我们使用了多重背景图片，我们也许会从CSS支持能力最差的浏览器开始，为其构建一个基本样式。在这个例子里，我们为section元素设置一个背景图片。

section { 
background : url(section.png) no-repeat 50% 0; }

当Modernizr库检测到浏览器支持多重背景渲染时，我们可以通过额外的特定选择器，为元素增加多重背景图片。

.multiplebgs section { 
background-image : url(section-left.png), url(section-right.png); 
background-repeat : no-repeat, no-repeat; 
background-position : 0 0, 100% 0; }

Modernizr的目的并不是要对浏览器不支持的特性进行支持，它不会让所有浏览器里的展示变得一模一样。相反的，它会基于不同的特性检测结果，来呈现不同的设计。这意味着，Modernizr仍然是一款专业Web开发工具。