html5特征检测

sohighthesky

(Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.)
<audio> return !!document.createElement('audio').canPlayType; <audio> in MP3 format var a = document.createElement('audio');return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));<audio> in Vorbis format var a = document.createElement('audio');return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));<audio> in WAV format var a = document.createElement('audio');return !!(a.canPlayType && a.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));<audio> in AAC format var a = document.createElement('audio');return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));<canvas> return !!document.createElement('canvas').getContext; <canvas> text API var c = document.createElement('canvas');return c.getContext && typeof c.getContext('2d').fillText == 'function';<command> return 'type' in document.createElement('command'); <datalist> return 'options' in document.createElement('datalist');<details> return 'open' in document.createElement('details'); <device> return 'type' in document.createElement('device'); <form> constraint validation return 'noValidate' in document.createElement('form'); <iframe sandbox> return 'sandbox' in document.createElement('iframe'); <iframe srcdoc> return 'srcdoc' in document.createElement('iframe'); <input autofocus> return 'autofocus' in document.createElement('input'); <input placeholder> return 'placeholder' in document.createElement('input'); <input type="color"> var i = document.createElement('input');i.setAttribute('type', 'color');return i.type !== 'text';<input type="email"> var i = document.createElement('input');i.setAttribute('type', 'email');return i.type !== 'text';<input type="number"> var i = document.createElement('input');i.setAttribute('type', 'number');return i.type !== 'text';<input type="range"> var i = document.createElement('input');i.setAttribute('type', 'range');return i.type !== 'text';<input type="search"> var i = document.createElement('input');i.setAttribute('type', 'search');return i.type !== 'text';<input type="tel"> var i = document.createElement('input');i.setAttribute('type', 'tel');return i.type !== 'text';<input type="url"> var i = document.createElement('input');i.setAttribute('type', 'url');return i.type !== 'text';<input type="date"> var i = document.createElement('input');i.setAttribute('type', 'date');return i.type !== 'text';<input type="time"> var i = document.createElement('input');i.setAttribute('type', 'time');return i.type !== 'text';<input type="datetime"> var i = document.createElement('input');i.setAttribute('type', 'datetime');return i.type !== 'text';<input type="datetime-local"> var i = document.createElement('input');i.setAttribute('type', 'datetime-local);return i.type !== 'text';<input type="month"> var i = document.createElement('input');i.setAttribute('type', 'month');return i.type !== 'text';<input type="week"> var i = document.createElement('input');i.setAttribute('type', 'week');return i.type !== 'text';<meter> return 'value' in document.createElement('meter'); <output> return 'value' in document.createElement('output'); <progress> return 'value' in document.createElement('progress'); <time> return 'valueAsDate' in document.createElement('time'); <video> return !!document.createElement('video').canPlayType; <video> captions return 'track' in document.createElement('track'); <video poster> return 'poster' in document.createElement('video'); <video> in WebM format var v = document.createElement('video');return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));<video> in H.264 format var v = document.createElement('video');return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));<video> in Theora format var v = document.createElement('video');return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));contentEditable return 'isContentEditable' in document.createElement('span'); Cross-document messaging return !!window.postMessage; Drag-and-drop return 'draggable' in document.createElement('span'); File API return typeof FileReader != 'undefined'; Geolocation return !!navigator.geolocation; History return !!(window.history && window.history.pushState && window.history.popState); Local storage return ('localStorage' in window) && window['localStorage'] !== null; Microdata return !!document.getItems; Offline web applications return !!window.applicationCache; Server-sent events return typeof EventSource !== 'undefined'; Session storage try {  return ('sessionStorage' in window) && window['sessionStorage'] !== null;} catch(e) {  return false;}SVG return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect); SVG in text/html var e = document.createElement('div');e.innerHTML = '<svg></svg>';return !!(window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement);WebSimpleDB return !!window.indexedDB; Web Sockets return !!window.WebSocket; Web SQL Database return !!window.openDatabase; Web Workers return !!window.Worker; Undo return typeof UndoManager !== 'undefined';❧
Further Reading

Specifications and standards:

• HTML5
  
• Geolocation
  
• Server-Sent Events
  
• WebSimpleDB
  
• Web Sockets
  
• Web SQL Database
  
• Web Storage
  
• Web Workers
  

JavaScript libraries:

• Modernizr, an HTML5 detection library
  

 
From:http://diveintohtml5.org/everything.html