HTML5 CSS3新特性的浏览器支持情况

代码检测HTML5/CSS3新特性的浏览器支持情况伴随着今年10月底HTML5标准版的发布，未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。

然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。

在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。

一种方式是用erAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也是在逐渐支持，不能肯定说某个浏览器100%支持了HTML5。

而且，IE11做了一个恶心的举动：在UA中去掉了“MSIE”标志，把appName改为了“Netspace”，并且开始支持-webkit-前缀的css属性，这是活生生要伪装成chrome的节奏。

所以，HTML5/CSS3支持性的检测，还是靠特征检测（figure detection）或者说能力检测更好些。

本篇就来介绍一下常用的检测方式都有哪些。

HTML5部分检测HTML5新特性的方法主要有以下几种：1. 检查全局对象（window或navigator）上有没有相应的属性名2. 创建一个元素，检查元素上有没有相应的属性3. 创建一个元素，检测元素上有没有方法名称，然后调用该方法，看能否正确执行4. 创建一个元素，为元素的相应属性赋一个值，然后再获取此属性的值，看看赋值是否生效由于不同浏览器的不同行为，检测一些特性的时候，可能会用到上述几个方法的组合，接下来用上面的方法做一下常用特性的检测：canvas1.function support_canvas(){2. var elem = document.createElement('canvas');3. return !!(elem.getContext && elem.getContext('2d'));4.}一般来讲，创建canvas元素并检查getContext属性即可，但是在一些浏览器下不够准确，所以再检测一下elem.getContext('2d')的执行结果，就可以完全确定。

以上代码摘自Modernizr：/Modernizr/Modernizr/issues/issue/97/关于canvas，有一点要补充的，那就是fillText方法，尽管浏览器支持canvas，我们并不能确切的确定它支持fillText方法，因为canvas API经历了各种修改，有一些历史原因，检测支持fillText的方法如下：1.function support_canvas_text(){2. var elem = document.createElement('canvas');3. var context = elem.getContext('2d');4. return typeof context.fillText === 'function';5.}video/audio1.function support_video(){2. return !!document.createElement('video').canPlayType;3.}4.5.function support_audio(){6. return !!document.createElement('audio').canPlayType;7.}video和audio的写法相似。

要检测video/audio支持的资源格式，可以调用canPlayType方法来进行检查，具体如下：1.unction support_video_ogg(){2. var elem = document.createElement('video');3. return elem.canPlayType('video/ogg; codecs="theora"');4.}5.function support_video_h264(){6. var elem = document.createElement('video');7. return elem.canPlayType('video/mp4; codecs="avc1.42E01E"');8.}9.function support_video_webm(){10. var elem = document.createElement('video');11. return elem.canPlayType('video/webm; codecs="vp8, vorbis"');12.}13.14.function support_audio_ogg(){15. var elem = document.createElement('audio');16. return elem.canPlayType('audio/ogg; codecs="vorbis"');17.}18.function support_audio_mp3(){19. var elem = document.createElement('audio');20. return elem.canPlayType('audio/mpeg;');21.}22.function support_audio_wav(){23. var elem = document.createElement('wav');24. return elem.canPlayType('audio/wav; codecs="1"');25.}要注意的是，canPlayType的返回值并不是布尔类型，而是字符串，取值有以下几种：∙"probably"：浏览器完全支持此格式∙"maybe"：浏览器可能支持此格式∙""：空串，表示不支持localStorage一般来讲，检查全局对象是否有localStorage属性即可，如下：1.function support_localStorage(){2. try {3. return 'localStorage' in window && window['localStorage'] !==null;4. }5. catch(e){6. return false;7. }8.}在一些浏览器禁用cookie，或者设置了隐私模式什么的情况，检查属性或报错，所以加在try语句中，如果报错了认为不支持。

另外，还有一种更严格的检查方法，检查相应方法是否支持，如下：1.function support_localStorage(){2. try {3. if('localStorage' in window && window['localStorage'] !== null){4. localStorage.setItem('test_str', 'test_str');5. localStorage.removeItem('test_str');6. return true;7. }8. return false;9. }10. catch(e){11. return false;12. }13.}webWorker1.function support_webWorker(){2. return !!window.Worker;3.}applicationCache1.function support_applicationCache(){2. return !!window.applicationCache;3.}geolocation1.function support_geolocation(){2. return 'geolocation' in navigator;3.}input标签新属性input标签新增的属性包括：autocomplete、autofocus、list、placeholder、max、min、multiple、pattern、required、step，检测是否支持用上面提到的方法2即可，新建一个input标签，看是否有这些属性，以autocomplete为例：1.function support_input_autocomplete(){2. var elem = document.createElement('input');3. return 'autocomplete' in elem;4.}另外要特别注意list属性，因为它是与datalist标签连用的，所以检查的时候要一并检测datalist标签是否支持：1.function support_input_list(){2. var elem = document.createElement('input');3. return !!('list' in elem && document.createElement('datalist') &&window.HTMLDataListElement);4.}input标签新类型这里的类型就是指type的取值，input新增的type值包括：search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color。

检测这些值需要用上面提到的方法4，以number为例：1.function support_input_type_number(){2. var elem = document.createElement('input');3. elem.setAttribute('type', 'number');4. return elem.type !== 'text';5.}这是一种较为简单的检查方法，因为严格来讲，浏览器会为不同的类型提供不同的外观或实现，例如chrome 中range类型会长这样：我们要确切的知道浏览器为该类型提供了对应的实现，才可以认为是“支持的”，要从这个方面检测是有难度的，各浏览器实现都不一。