HTML5新功能检测

CANVAS

function supports_canvas(){

    return !!document.createElement('canvas').getContext;

} 

 

CANVAS TEXT

supports_canvas_text(){
    if(!supports_canvas()){returnfalse;}
    var dummy_canvas = document.createElement('canvas');
    var context = dummy_canvas.getContext('2d');
    return typeof context.fillText =='function' }

 如果像IE6不支持canvas，可以考虑使用explorercanvas

 

VIDEO

function supports_video(){
return !!document.createElement('video').canPlayType;
}

不支持video，考虑 Video for Everybody!

 

VIDEO FORMAT

/**
 * format can be: 
 *    'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
 *    'video/ogg; codecs="theora, vorbis"'
 *    'video/webm; codecs="vp8, vorbis"'
 * 
 * returns:
 *    "probably" if the browser is fairly confident it can play this format
 *    "maybe" if the browser thinks it might be able to play this format
 *    "" if the browser is certain it cannot play this format
 **/
function support_video_format(format){
if(!supports_video()) {return false;}
var v = document.createElement('video');
return v.canPlayType(format);
}

 

LOCAL STORAGE

function supports_local_storage(){
try{
return 'localStorage' in window && window['localStorage'] != null;
} catch(e) {  
// because of the old implememtation of Firefox,
// an exception will be raised if cookie are disabled
return false;
}
}

 

WEB WORKERS

function supports_web_workers(){
return !!window.Worker;
}

 

OFFLINE

function supports_offline(){
return !!window.applicationCache;
}

 

GEOLOCATION

function supports_geolocation(){
return !!navigator.geolocation;
}

也可以使用Gears如果浏览器不支持地理定位

 

INPUT TYPE

function support_input_type(type){
var i = document.createElement('input');
i.setAttribute('type', type);
return i.type !== "text"
}

 

INPUT PLACEHOLDER

function supports_input_placeholder(){
var i = document.createElement('input');
return 'placeholder' in i;
}

 

INPUT AUTOFOCUS

function supports_input_autofocus(){
var i = document.createElement('input');
return 'autofocus' in i;
}

 

MICRODATA

function supports_microdata(){
return !!document.getItems;
}

 

 除了上面的测试方法，Modernizr是一个免费开源的检测HTML5功能的类库。