全国服务热线:4008-888-888

技术知识

解决HTML5新标识的访问器适配版难题

HTML5标准终究是不久才界定进行的标准,也有1些访问器其实不能适用在其中的新标识和新特性,特别是IE8及下列版本号访问器。下列详细介绍1些在网页页面中应用HTML5新标识的实践活动方式,目地是让HTML5中的新标识在低等访问器中也获得比较有限的适用,不至于危害全部的网页页面作用。

  • 让访问器鉴别HTML5标准中的新标识

IE8访问器中都还没加上对HTML5新标识的适用,因此在IE8中没法立即呈现HTML5新标识中的內容。庆幸的是IE8/IE7/IE6适用根据document.createElement方式造成的标识,能够运用这1特点让这些访问器适用HTML5新标识,编码以下:

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

访问器适用新标识后,还必须加上标识默认设置的款式:

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

这样每段简易的JavaScript编码和CSS编码便可以让IE8及下列版本号访问器适用HTML5中的新标识。自然最好是的方法是立即应用完善的架构,现阶段有好几个根据这1观念的架构,应用数最多的是html5shim架构,html5shim的应用方式很简易,在网页页面的head一部分加上架构的引入便可:

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
  • HTML5中新特点的向后适配

广义的HTML5,是包含了HTML5、CSS3和新的API。由于新特点或多或少会存在访问器的适配难题,因此在应用新特点时检验访问器是不是适用此特点是是非非常必要的。当访问器不适用新特点时,能够做适合的向后适配解决。现阶段,并沒有1个统1的方式检验新特点的适用,一些新特点有对应的API能够鉴别,一些新特点则只能根据1些技能来鉴别。好在海外有热情的工程项目师们开发设计了好几个检验新特点的架构,在其中检验精确率和应用率较高的是Modernizr。

Modernizr架构的基本原理是全自动检验访问器是不是适用新特点,并在<html>标识上加上对应的类。假如访问器适用某个特点,则会加上1个以特点名字取名的类,反之,则加上1个以“no-”为前缀再加特点名字取名的类。另外也会转化成1个名为modernizr的目标,根据分辨此目标上的意味着各特点的特性值,能够了解当今访问器是不是适用此新特点。Modernizr架构另外也包括了html5shim架构的作用,便可以让IE8及下列访问器适用新标识。

Modernizr的应用方式很简易,最先在head一部分引进架构的JavaScript文档:

<script src="js/modernizr.min.js"></script>

其次在html标识上加上1个名字为no-js的类:

<html class="no-js">

假如访问器沒有禁用JavaScript,则访问器载入网页页面后,html标识上的类会动态性更换和加上。载入后,html标识相近以下:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

在CSS编码中,能够根据应用这些类加上向后适配编码,以下是1个应用多情况图的事例:

#nice {
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}

对此架构感兴趣爱好的读者,能够访问Modernizr的官网,得到更多更详尽的示例和应用方法。

  • 声频和视頻的适配

声频和视頻是在网页页面中常见的多新闻媒体标识,但访问器适配则是较为错乱,因此这里做为1个独立的话题。声频和视頻是较为早的获得访问器原生态适用的特点,让声频和视頻的播发已不限定于第3方的软件,特别是在挪动服务平台中。声频和视頻是1块大生日蛋糕,各访问器厂商都想分得最大的那1块,这也致使访问器适用声频和视頻的文件格式出現的分裂。访问器的适用声频文件格式的目录以下:

访问器

版本号

适用文件格式

Internet Explorer

9.0+

MP3, AAC

Chrome

6.0+

Ogg Vorbis, MP3, WAV(9.0+)

Firefox

3.6+

Ogg Vorbis, WAV

Safari

5.0+

MP3, AAC, WAV

Opera

10.0+

Ogg Vorbis, WAV

大概有80%的访问器适用HTML5的<audio>标识,可是并沒有1种统1的声频文件格式。从适用的文件格式看来,要让全部的访问器能够播发audio元素上的声频,最好的方法是出示MP3和Ogg两种文件格式,适配编码以下:

<audio controls>
    <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
    <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
    <!-- 向后适配编码:如,显示信息提醒信息内容、出示免费下载连接应用flash播发器等 -->
    访问器不适用<code>audio</code>标识
</audio>

视頻也是有和声频相近的情况,以下是访问器适用视頻的文件格式目录:

访问器

版本号

适用文件格式

Internet Explorer

9.0+

MP4

Chrome

6.0+

MP4,WebM,Ogg

Firefox

3.6+

WebM,Ogg

Safari

5.0+

MP4

Opera

10.0+

WebM,Ogg

从访问器适用的视頻文件格式看来,最好的方法是出示WebM和MP4两种文件格式的视頻。适配编码以下:

<video controls>    
    <source src=video.webm type=video/webm>    
    <source src=video.mp4 type=video/mp4>      
    <!—向后适配编码: -->      
    <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>  
</video>

以上所述是网编给大伙儿详细介绍的解决HTML5新标识的访问器适配版难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服