(Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.)
-
return !!document.createElement('audio').canPlayType;
-
var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
-
var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
-
var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
-
var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));
-
return !!document.createElement('canvas').getContext;
-
var c = document.createElement('canvas'); return c.getContext && typeof c.getContext('2d').fillText == 'function';
-
return 'type' in document.createElement('command');
-
return 'options' in document.createElement('datalist');
-
return 'open' in document.createElement('details');
-
return 'type' in document.createElement('device');
-
return 'noValidate' in document.createElement('form');
-
return 'sandbox' in document.createElement('iframe');
-
return 'srcdoc' in document.createElement('iframe');
-
return 'autofocus' in document.createElement('input');
-
return 'placeholder' in document.createElement('input');
-
var i = document.createElement('input'); i.setAttribute('type', 'color'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'email'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'number'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'range'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'search'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'tel'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'url'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'date'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'time'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'datetime'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'datetime-local); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'month'); return i.type !== 'text';
-
var i = document.createElement('input'); i.setAttribute('type', 'week'); return i.type !== 'text';
-
return 'value' in document.createElement('meter');
-
return 'value' in document.createElement('output');
-
return 'value' in document.createElement('progress');
-
return 'valueAsDate' in document.createElement('time');
-
return !!document.createElement('video').canPlayType;
-
return 'track' in document.createElement('track');
-
return 'poster' in document.createElement('video');
-
var v = document.createElement('video'); return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
-
var v = document.createElement('video'); return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
-
var v = document.createElement('video'); return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
-
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 -
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';
<audio>
<audio>
in MP3 format
<audio>
in Vorbis format
<audio>
in WAV format
<audio>
in AAC format
<canvas>
<canvas>
text API
<command>
<datalist>
<details>
<device>
<form>
constraint validation
<iframe sandbox>
<iframe srcdoc>
<input autofocus>
<input placeholder>
<input type="color">
<input type="email">
<input type="number">
<input type="range">
<input type="search">
<input type="tel">
<input type="url">
<input type="date">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">
<meter>
<output>
<progress>
<time>
<video>
<video>
captions
<video poster>
<video>
in WebM format
<video>
in H.264 format
<video>
in Theora format
contentEditable
text/html
❧
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