名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
网页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里。
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,用网页hTML5教程为您的网页添加音效
下面是一个利用网页hTML5教程, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。