Modernizr：专为HTML5和CSS3开发的功能检测类库
Modernizr的原理
Modernizr 使用 JavaScript 检测浏览器所支持的功能，但是，它并不是使用 JavaScript 动态地加载不同的样式表，而是使用非常简单的技术将类添加到页面的<html>标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。
例如，如果页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。如果不支持，那么它用 no-boxshadow 类作为替代进行添加。
由于浏览器忽略它们无法识别的 CSS 属性，因此你可以放心地按照你的基本样式规则使用 box-shadow 属性，然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector ：
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }
只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类，因此其它的浏览器不会应用这个样式规则。
下表列举了 Modernizr 使用的类名称以表明对 CSS3 的支持。 如果某个功能不支持，那么相应类的名称用no-作前缀。
| 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模块而命名。
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
