HTML5 Showcase Welcome to the Dive Into HTML5 online course!

Advertise here

eXTReMe Tracker

You are here: Home Dive Into HTML5


The All-In-One
Almost-Alphabetical
No-Bullshit Guide to
Detecting Everything

(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');
<textarea placeholder>
return 'placeholder' in document.createElement('textarea');
<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';
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 'src' 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"').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);
Local storage
try {
  return 'localStorage' in window && window['localStorage'] !== null;
} catch(e) {
  return false;
}
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);
Undo
return typeof UndoManager !== 'undefined';
IndexedDB
return !!window.indexedDB;
Web Sockets
return !!window.WebSocket;
Web SQL Database
return !!window.openDatabase;
Web Workers
return !!window.Worker;
Widgets: am I in one?
return typeof widget !== 'undefined';
XMLHttpRequest: cross-domain requests
return "withCredentials" in new XMLHttpRequest;
XMLHttpRequest: send as form data
return !!window.FormData;
XMLHttpRequest: upload progress events
return "upload" in new XMLHttpRequest;

Further Reading

Specifications and standards:

JavaScript libraries:

This has been “The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything.” The full table of contents has more if you’d like to keep reading.

Did You Know?

In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and DRM-free PDF. The paid edition is called “HTML5: Up & Running,” and it is available now. This appendix is included in the paid edition.

If you liked this appendix and want to show your appreciation, you can buy “HTML5: Up & Running” with this affiliate link or buy an electronic edition directly from O’Reilly. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.

Copyright MMIX–MMXI Mark Pilgrim