HTML5和CSS3特性检测-Modernizr

HTML5和CSS3逐渐成为WEB前端开发的必须技能,开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素:

[code=”javascript”]

function SUP_canvas() {
var elem = document.createElement(‘canvas’);
return !!(elem.getContext && elem.getContext(‘2d’));
};

[/code]
是否支持WebGL:
[code=”javascript”]

function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

[/code]
还有很多html5和css3其他属性…,值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单,就是用js检测浏览器对HTML5/CSS3的特性支持情况,支持某个属性,就在页面的标 签上添加一个相应的class,不支持的话就添加一个no-前缀的class,比如,如果检测的浏览器支持video标签,MODERNIZR就会 在标签上添加video类,否则,添加no-video类。

最新的Modernizr是2.0.6版本的,如果你下载开发(development)版本,给我们提供全部的内容,如果要下载production版本的modernizr,我们会发现,我们可以根据自己的需要进行订制。在其下载页面上,我们选择自己所需的HTML和CSS特性,然后生成一个javascript文件。这么做会极大程度上减少冗余代码,减少不必要的检测,对web前端这个很看重用户体验的地方,性能就是一点一点压出来的。

使用Modernizr也非常简单,只要而且必须在标签里应用就可以了,无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里,最好放在css声明之后,因为HTML5 Shiv(用以在IE中启用HTML元素)必须在之前执行,而且要使用modernizr添加的class,需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态,如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类,从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况,以“no-”开头的,就是这个浏览器不支持的特性:

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异,比如,如果不支持标签,那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样,我们也可以在JavaScript利用这些特性检测的结果,代码:
[code=”javascript”]
if(Modernizr.canvas){
//开始画图啦!

}else{
alert(“fuck!”);
}
[/code]

Modernizr 2还提供了一种load机制,方便代码管理,比如:
[code=”javascript”]
Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : ‘canvas.js’,//如果支持标签及相应的属性那么加载canvas.js,
nope: ‘no-canvas.js’//如果不支持标签及相应的属性那么加载no-canvas.js,
});
[/code]

如果直接用的是development版本的modernizr,你会发现,根本就没有Modernizr.load,因为它是作为一个单独文件发布的:yepnope.js。而在production版本,我们选择将其包含在modernizr里。

官方网址:http://www.modernizr.com/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » HTML5和CSS3特性检测-Modernizr

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    先坐沙发再认真看!

    融点8年前 (2011-07-18)回复
  2. #-48

    表示关注下。。。。有空学习下html5和css3 试试

    上海游腾网络8年前 (2011-07-25)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏