查看你的浏览器是否支持最新的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 }