如何检测浏览器是否支持HTML5

以下内容总结自《html5揭秘》

四种基本检测方法

在支持HTML5的特性的浏览器中，与HTML5特性相关的DOM对象会有特定的HTML5相关属性，所以通过检测这些DOM对象可以快速检测出HTML5是否被支持。

4种基本检测方法，从简单到复杂依次是：

1、检测全局对象（如window和navigator）是否拥有特定属性。

举例：检测是否支持本地存储

function supportLocalStorage（）{

return ("localStorage" in window)&&window["localStorage"] !== null;

}

举例：检测是否支持web workers

function supportWebWorkers（）{

return ！！window.Worker;//若不支持，则该属性的值为undefined

}

2、创建一个元素，然后检测该元素的DOM对象是否拥有特定的属性。

举例：检测是否支持canvas

function supportCanvas（）{

return !!document.createElement("canvas").getContext; //检测是否有getContext（）方法，但没有调用此方法

}

举例：检测是否支持video

function supportVideo（）{

return !!document.createElement("video").canPlayType; //检测是否有canPlayType（）方法，但没有调用此方法

}

3、创建一个元素，然后检测这个元素的DOM对象是否拥有特定方法，同时调用这个方法并检查这个返回值。

举例：检测浏览器是否支持的某种视频格式

function supportVideoType（）{

return document.createElement("video").canPlayType('video/mp4；codecs="avc1.42E01E, mp4a.40.2"'); 

//调用特性方法，返回值为：probably、maybe、“”

}

4、创建一个元素，然后检测该元素的DOM对象设定的属性值，然后检查浏览器是否保留了该属性值。

举例：检测input元素是否支持“color”type

function supportColorType（）{

var i=document.createElement("input")

i.setAttibute("type","color"); 

return i.type !=="text"//text为默认的type

}

使用Modernizr：一个HTML5检测库

Modernizr是一个开源javascript类库，用于检测浏览器是否支持HTML5和CSS3。只有在页面顶部加上

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

Modernizr是自动运行的，在运行时会创建一个名为Modernizr的全局对象，这个对象为每一个可检测的特性都会创建一个对应的布尔类型的属性。例如：你的浏览器支持canvas API，则Modernizr.canvas的属性值就为true，反之为false。