您的位置：首页 > Web前端 > JavaScript

Modernizr.js-简

2017-03-17 16:04 267 查看

Modernizr：专为HTML5和CSS3开发的功能检测类库

Modernizr是一个开源的JS库
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如
@font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 <input>标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式。

从www.modernizr.com下载Modernizr的最新的稳定版

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模块而命名。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Modernizr 前端

相关文章推荐

新的分享

章节导航