Judge Your Browser Support HTML5 Tag

查看你的浏览器是否支持最新的HTML5标签，这里我会用自带的系统函数和Modernizr做对比

 

1，canvas标签的支持(提供画图功能，将取代falsh)

//自定义方法
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

//Modermizr判断  后面排版和这个一样，就不做多的声明
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available 
}

  2，video,audio标签的支持（在网页上直接播放视频，不在需要像html4那样麻烦）

 

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

if (Modernizr.video) {
// let's play some video!
} else {
// no native video support available
// maybe check for QuickTime or Flash instead
}

 

 3，video formats（对视频格式的支持）

 

function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}
}

 

 4,Local Storage（本地信息存储，类似cookie的东西，但是cookie只允许几K，而它可以有5M）

 

function supports_local_storage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}

if (Modernizr.localstorage) {
// window.localStorage is available!
} else {
// no native support for local storage :(
// maybe try Gears or another third-party solution
}

 

 5,Web Workers(用于预取数据或执行其他预先操作，从而提供一个更加实时的 UI)

 

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

if (Modernizr.webworkers) {
// window.Worker is available!
} else {
// no native support for web workers
// maybe try Gears or another third-party solution
}

 

 6,Offline Web Applications(HTML5的各种本地存储方式(如本地存储和session存储)

 

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

if (Modernizr.applicationcache) {
// window.applicationCache is available!
} else {
// no native support for offline 
// maybe try Gears or another third-party solution
}

 

 7,Geolocation(获取客户端当前地理位置信息)

 

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

if (Modernizr.geolocation) {
// let's find out where you are!
} else {
// no native geolocation support available
// maybe try Gears or another third-party solution
}

 

 8,Input Types（新增的表单类型）

 

<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="tel">
<input type="url">
<input type="email">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">

 if (!Modernizr.inputtypes.date) {

// no native support for <input type="date">
// maybe build one yourself with
}

 9,Placeholder Text（input中的替换文本，本来可以用js实现，现在可以不用写js了）

 

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

if (Modernizr.input.placeholder) {
// your placeholder text should already be visible!
} else {
// no placeholder suppor
// fall back to a scripted solution
}

 

 10,Form Autofocus（表单元素自动获得焦点）

 

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

if (Modernizr.input.autofocus) {
// autofocus works!
} else {
// no autofocus support
// fall back to a scripted solution
}