<p class="zw">我们需要一款便携的工具，来帮助我们创造超越平凡的设计，而Modernizr正是我们所需要的。</p> <p class="zw">在Modernizr网站上，选择一个大的开发者版本脚本，或者是一个包含了我们需要使用的特性测试的定制版本。在性能优化如此重要的今天，我们不应该在线上站点使用开发者版本。配置好项目后，下载脚本并链接到文档中。</p> <pre class="代码无行号"><code><script src="js/modernizr.js"></script></code></pre> <p class="zw">在脑中始终保持渐进增强的理念——引入任何脚本的时候，都要考虑脚本不能被激活的状况。在<code>html</code>元素上,增加相应的<code>no-js</code>样式，为不支持JavaScript的浏览器设置基本的样式，激活Modernizr的功能。</p> <pre class="代码无行号"><code><html class="no-js"> </html></code></pre> <p class="zw">当Modernizr运行时，它会在JavaScript被激活时候，使用<code>js</code>来替代<code>no-js</code>样式。Modernizr会帮助我们来评估浏览器，它会根据检测结果，向<code>html</code>元素上添加相应的<code>class</code>属性和值，而不是使用用户代理字符串嗅探的方式。</p> <pre class="代码无行号"><code><html class="js backgroundblendmode borderimage csscalc csscolumns cssfilters flexbox flexboxlegacy flexboxtweener cssgradients shapes cssvhunit cssvmaxunit cssvminunit cssvwunit"></code></pre> <p class="zw">当浏览器不支持某一个特性的时候，Modernizr会自动在这个<code>class</code>上增加一个<code>no-</code>前缀。</p> <pre class="代码无行号"><code><html class="js no-backgroundblendmode no-borderimage no-csscalc no-csscolumns no-cssfilters no-flexbox no-flexboxlegacy no-flexboxtweener no-cssgradients no-shapes no-cssvhunit no-cssvmaxunit no-cssvminunit no-cssvwunit"></code></pre> <p class="zw">我们可以利用这些属性和值，根据浏览器对CSS属性的支持情况，调整页面来适应。</p> <p class="zw">在下面的例子中，我们使用了多重背景图片，我们也许会从CSS支持能力最差的浏览器开始，为其构建一个基本样式。在这个例子里，我们为<code>section</code>元素设置一个背景图片。</p> <pre class="代码无行号"><code>section { background : url(section.png) no-repeat 50% 0; }</code></pre> <p class="zw">当Modernizr库检测到浏览器支持多重背景渲染时，我们可以通过额外的特定选择器，为元素增加多重背景图片。</p> <pre class="代码无行号"><code>.multiplebgs section { background-image : url(section-left.png), url(section-right.png); background-repeat : no-repeat, no-repeat; background-position : 0 0, 100% 0; }</code></pre> <p class="zw">Modernizr的目的并不是要对浏览器不支持的特性进行支持，它不会让所有浏览器里的展示变得一模一样。相反的，它会基于不同的特性检测结果，来呈现不同的设计。这意味着，Modernizr仍然是一款专业Web开发工具。</p>
