[转]使用Modernizr 检测HTML5和CSS3浏览器支持功能

注：如果你的 Dreamweaver 版本没有 Live Code（或者你正使用不同的 HTML 编辑器），那么你可以使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。

如图4所示， no-js 类已经被js类替代，这表明 JavaScript 已经启用。

表1列举了 Modernizr 使用的类名称以表明对 CSS3 的支持。如果某个功能不支持，那么相应类的名称用no-作前缀。

表1. Modernizr 检测的 CSS3 功能

CSS 功能	Modernizr 类（属性）
`@font-face`	`fontface`
`::before` and `::after` pseudo-elements	`generatedcontent`
`background-size`	`backgroundsize`
`border-image`	`borderimage`
`border-radius`	`borderradius`
`box-shadow`	`boxshadow`
CSS animations	`cssanimations`
CSS 2D transformations	`csstransforms`
CSS 3D transformations	`csstransforms3d`
CSS transitions	`csstransitions`
flexible box layout	`flexbox`
gradients	`cssgradients`
`hsla()`	`hsla`
multi-column layout	`csscolumns`
multiple backgrounds	`multiplebgs`
`opacity`	`opacity`
reflection	`cssreflections`
`rgba()`	`rgba`
`text-shadow`	`textshadow`

无论在哪对特定的CSS属性进行测试，类的名称和属性名称都是一样的，然而这要求去除任何连字号或是括号。其它类是按照它们参考的CSS3模块而命名。

参见表1，你可以看到Modernizr使用boxshadow 和 csscolumns 分别表明了对box-shadow 属性和多栏布局的支持。因此，你可以使用no-boxshadow 和 no-csscolumns 类为不支持这些功能的浏览器创建特殊的样式规则。

为了保证指令简单，我将演示只有CSS 声明的范例。你可以直接地将它们键入到Code视图中或者使用New CSS Rule对话框。