HTML5和CSS3特征检测-Modernizr

HTML5和CSS3逐渐成为WEB前端开拓的必需手艺，开拓进程中搜查差异赏识器对HTML5和CSS3支持环境成了是一件很是烦心的工作。

好比我们要搜查某个赏识器是否支持canvas元素：

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

是否支持WebGL：

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

尚有许多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操作这些特征检测的功效，代码：

if(Modernizr.canvas){
//开始绘图啦！

}else{
alert("fuck!");
}

Modernizr 2还提供了一种load机制，利便代码打点，好比：

Modernizr.load({
test: Modernizr.canvas,//搜查是否支持标签及响应的属性
yep : 'canvas.js',//假如支持标签及响应的属性那么加载canvas.js，
nope: 'no-canvas.js'//假如不支持标签及响应的属性那么加载no-canvas.js，
});

假如直接用的是development版本的modernizr，你会发明，基础就没有Modernizr.load，由于它是作为一个单独文件宣布的：yepnope.js。而在production版本，我们选择将其包括在modernizr里。

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

本文来历：http://www.css88.com/archives/3828

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!