HTML5CSS3新特性浏览器支持情况.docxVIP

代码检测HTML5/CSS3新特性的浏览器支持情况伴随着今年10月底HTML5标准版的发布，未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也是在逐渐支持，不能肯定说某个浏览器100%支持了HTML5。而且，IE11做了一个恶心的举动：在UA中去掉了“MSIE”标志，把appName改为了“Netspace”，并且开始支持-webkit-前缀的css属性，这是活生生要伪装成chrome的节奏。所以，HTML5/CSS3支持性的检测，还是靠特征检测（figure detection）或者说能力检测更好些。本篇就来介绍一下常用的检测方式都有哪些。HTML5部分检测HTML5新特性的方法主要有以下几种：1. 检查全局对象（window或navigator）上有没有相应的属性名2. 创建一个元素，检查元素上有没有相应的属性3. 创建一个元素，检测元素上有没有方法名称，然后调用该方法，看能否正确执行4. 创建一个元素，为元素的相应属性赋一个值，然后再获取此属性的值，看看赋值是否生效由于不同浏览器的不同行为，检测一些特性的时候，可能会用到上述几个方法的组合，接下来用上面的方法做一下常用特性的检测：canvasfunction?support_canvas(){?????var?elem?=?document.createElement(canvas);?????return?!!(elem.getContext??elem.getContext(2d));?}?一般来讲，创建canvas元素并检查getContext属性即可，但是在一些浏览器下不够准确，所以再检测一下elem.getContext(2d)的执行结果，就可以完全确定。以上代码摘自Modernizr：/Modernizr/Modernizr/issues/issue/97/关于canvas，有一点要补充的，那就是fillText方法，尽管浏览器支持canvas，我们并不能确切的确定它支持fillText方法，因为canvas API经历了各种修改，有一些历史原因，检测支持fillText的方法如下：function?support_canvas_text(){?????var?elem?=?document.createElement(canvas);?????var?context?=?elem.getContext(2d);?????return?typeof?context.fillText?===?function;?}?video/audiofunction?support_video(){?????return?!!document.createElement(video).canPlayType;?}??function?support_audio(){?????return?!!document.createElement(audio).canPlayType;?}?video和audio的写法相似。要检测video/audio支持的资源格式，可以调用canPlayType方法来进行检查，具体如下：unction?support_video_ogg(){?????var?elem?=?document.createElement(video);?????return?elem.canPlayType(video/ogg;?codecs=theora);?}?function?support_video_h264(){?????var?elem?=?document.createElement(video);?????return?elem.canPlayType(video/mp4;?codecs=avc1.42E01E);?}?function?support_video_webm(){?????var?elem?=?document.createElement(video);?????return?elem.canPlayType(video/webm;?codecs=vp8,?vorbis);?}??function?support_audio_ogg(){?????var?elem?=?document.createElement(au