HTML5特性检测

有四种技术可以用于检测浏览器是否支持某种HTML5特性:

1.检测全局对象是否拥有特定的属性

以检测地理位置为例：

function supports_geolocation(){
return !!navigator.geolocation;//如果浏览器支持地理位置API的话，全局的navigator上一定会有一个geolocation属性，反之对象上该属性为undefined。对于js中的!!：若navigator.geolocation为undefined，那么，!为true，!!为false
 }

 //或者用Modernizr(Moderniz是一个开源的JavaScript类库，用于检测浏览器是否支持HTML5及CSS3特性)
if(Modernizr.geolocation){

alert("yes Modernizr.geolocation");
 }else{
alert("no Modernizr.geolocation");
 }

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

以检测画布canvas为例

//2.1此方法用于检测浏览器是否支持canvas API，那么，浏览器是否支持canvas 文本 API呢？，请看2.2
function supports_canvas(){
return !!document.createElement("canvas").getContext;
}
//或者用Moderniz
if(Modernizr.canvas){
alert("yes canvas");
}else{
alert("no canvas");
}
//2.2.检测浏览器是否支持canvas 文本 API
function supports_canvas_text(){
if(!supports_canvas()){
return false;
}
var canvasEle=document.createElement("canvas");
var context=canvasEle.getContext("2d");
return typeof context.fillText == "function";
}
//或者用Modernizr
if(Modernizr.canvastext){
alert("yes text canvas");

}else{

alert("notext canvas");

}

3.创建一个元素，然后检测这个元素的DOM对象是否拥有特定的方法

以video为例

//3.1检测浏览器是否支持视频
function supports_video(){
return !!document.createElement("video").canPlayType;
}
if(Modernizr.video){
alert("yes video");
}else{
alert("no video");
}
//3.2检测浏览器具体支持哪种视频格式(有两种视频格式算法：H264,Ogg)
//Safari和iPhone的H264
function support_h264_baseline_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/mp4; codecs='avc1.42E01E,mp4a.40.2'");
}
//chrome和firefox的Ogg
function supports_ogg_theora_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/ogg; codecs='theora,vorbis'");
}
//WebM格式（是一种新的开源视频编码格式，并会在Chrome,Firefox和Opera这些主流浏览器的下一个版本得到广泛支持，未来可能广泛应用的）
function supports_webm_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/webm;codecs='vp8,vorbis'");
}

4.创建一个元素，给这个元素的DOM对象设定特定的属性值（即key=value），然后检测浏览器是否保留了该属性值

以HTML5新增input类型为例（注意：HTML5中新提供了13中类型input，由于 ele.setAttribute("type","color");，若自己写判断方法的话，就得写13个，故采用Modernizr的方法(但是也得写13个判断，因为要需要什么便来判断什么，因为Modernizr.inputtypes是所有input控件的统称，故必然返回true，具体分辨不了。故要对症下药）

function supports_inputColor(){
var ele=document.createElement("input");
ele.setAttribute("type","color");
return ele.type!=="text";
}
//或者
if(!Modernizr.inputtypes.date){//指的是不支持
alert("no input  date");

//自己构建一个类似的控件
}else{

alert("yes input date");

}

HTML5检测其他特性的常用实例（下面实例也属于上面四种检测方法中的一种）：

/*检测是否支持本地存储*/
function supports_local_storage(){
return ("localStorage" in window)&&window["localStorage"]!==null;
}
//或者
if(Modernizr.localstorage){
alert("yes localstorage");
}else{

alert("no localstorage");

}
/*检测浏览器是否支持Web Workers*/
function support_web_workers(){
return !!window.Worker;
}
if(Modernizr.webworkers){
alert("yes webworkers");
}else{

alert("no webworkers");
}
/*检测浏览器是否支持离线Web应用*/
function support_offline(){
return !!window.applicationCache;
}
//或者
if(Modernizr.applicationcache){
alert("yes applicationcache");
}

else{

alert("no applicationcache");

}
/*检测是否支持占位文本*/
function supports_placeholder(){
var ele=document.createElement("input");
return "placeholder" in ele;
}
//或者
if(Modernizr.input.placeholder){
alert("yes Modernizr.input.placeholder");
}else{

alert("no Modernizr.input.placeholder");
}
/*检测浏览器是否支持自动聚焦*/
function supports_input_autofocus(){
var ele=document.createElement("input");
return "autofocus" in ele;
}
//or
if(Modernizr.input.autofocus){
alert("yes Modernizr.input.autofocus");
}else{

alert("no Modernizr.input.autofocus");
}
/*检测浏览器是否支持微数据 注意：Modernizr目前还不支持检测微数据AIP，故只能自己写相应的检测方法*/
function supports_microdata_api(){
return !!document.getItems;
}