modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况

使用modernizr.js检测浏览器对html5和css3的支持情况

1.modernizr 是什么？

modernize 是一个js库————一个用于检测当前浏览器对html5&css3 的支持情况，其中包括对css3 的@font-face、border-radius、 border-image、box-shadow、rgba() 的支持检测，以及html5 的audio、video、localStorage、sessionStorage 等的支持情况。

2. 如何使用它？

使用非常简单，只需要在官网下载modernize.js 文件，并在页面的head 标签中引用:

It's just a test for modernizr.js by alexchen

接着在html标签中加入class='nojs' 类：

就可以了。

加载页面之后你会看到html 标签的class 中多出了很多类，像下面这样：

在class 中列出了所有当前浏览器支持的html5&css3 的一些特性，如果是不支持的，则会在class 中显示一个以no- 开头的类，比如不支持canvas 则会有一个no-canvas 的类，比如在ie8 下面，则会得到如下类，并且会为我们生成一些默认的样式:

DISPLAY: block

}

aside {

DISPLAY: block

}

dialog {

DISPLAY: block

}

figcaption {

DISPLAY: block

}

figure {

DISPLAY: block

}

footer {

DISPLAY: block

}

header {

DISPLAY: block

}

hgroup {

DISPLAY: block

}

main {

DISPLAY: block

}

nav {

DISPLAY: block

}

section {

DISPLAY: block

}

mark {

BACKGROUND: #ff0; COLOR: #000

}

template {

DISPLAY: none

}

因此，当检测到浏览器不支持某些h5和css3 的特性时，我们就需要编写额外的处理代码来让页面实现平稳退化 。同时，modernizr.js 还会为我们创建一个全局对象Modernizr ,通过访问属性的方式我们可以获取某特性是否支持，如果支持则返回true 反之则为false ,看个栗子，在ie8 中，不支持canvas ,因此对应的类为no-canvas ，我们也可以通过Modernizr 对象来获取，代码如下：

>>Modernizr.canvas

>>false

根据检测结果我们就可以对某些特性的特出处理来达到平稳退化 的效果