Detecting HTML5 Features
1. There are four basic techniques for detecting whether a browser supports a particular feature:
a) C heck if a certain property exists on a global object
b) Create an element, then check if a certain property exists on that element.
c) Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
d) Create an element, set a property to a certain value, then check if the property has retained its value.
2. Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. Modernizr runs automatically when you include its javascript library in your page and when it runs, it creates a global object called Modernizr , that contains a set of Boolean properties for each feature it can detect.
3. HTML5 defines the <canvas> element as “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations.
4. I f your browser supports the canvas API, the DOM object it creates to represent a <canvas> element will have a getContext() method. If your browser doesn’t support the canvas API, the DOM object it creates for a <canvas> element will only have the set of common properties, but not anything canvas-specific:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
5. Even if your browser supports the canvas API , it might not support the canvas text API. If your browser supports the canvas tesxt API, the DOM object it creates to represent a <canvas> element will have the getContext() method and the object returned from getContext(‘2d’) will have a fillText function:
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
6. HTML5 defines a new element called <video> for embedding video in your web pages. The <video> element is designed to be usable without any detection scripts. You can specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support. Browsers that don’t support HTML5 video will ignore the <video> element completely.
7. If your browser supports HTML5 video, the DOM object it creates to represent a <video> element will have a canPlayType() method. If your browser doesn’t support HTML5 video, the DOM object it creates for a <video> element will have only the set of properties common to all elements:
function supports_video() {
return !!document.createElement('video').canPlayType;
}
8. Browsers can’t agree on a single codec. However, they seem to have narrowed it down to two. One codec costs money (because of patent licensing), but it works in Safari and on the iPhone. (This one also works in Flash if you use a solution like Video for Everybody! ) The other codec is free and works in open source browsers like Chromium and Mozilla Firefox .
9. The following function checks for the patent-encumbered format supported by Macs and iPhones:
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
In technical terms, you’re asking the browser whether it can play H.264 Baseline video and AAC LC audio in an MPEG-4 container.
The following function checks for the open video format supported by Mozilla Firefox and other open source browsers:
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}
In technical terms, you’re asking the browser whether it can play Theora video and Vorbis audio in an Ogg container.
WebM is a newly open-sourced (and non-patent-encumbered) video codec that will be included in the next version of major browsers, including Chrome, Firefox , and Opera . You can check the support of WebM like :
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}
10. The canPlayType() returns a string:
- "probably" if the browser is fairly confident it can play this format
- "maybe" if the browser thinks it might be able to play this format
- "" (an empty string) if the browser is certain it can’t play this format
11. HT ML5 storage provides a way for web sites to store information on your computer and retrieve it later. If your browser supports HTML5 storage, there will be a localStorage property on the global window object. If your browser doesn’t support HTML5 storage, the localStorage property will be undefined. Due to an unfortunate bug in older versions of Firefox, this test will raise an exception if cookies are disabled, so the entire test is wrapped in a try..catch statement.
function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}
12. Web Workers provide a standard way for browsers to run JavaScript in the background. These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing. If your browser supports the Web Worker API, there will be a Worker property on the global window object. If your browser doesn’t support the Web Worker API, the Worker property will be undefined.
function supports_web_workers() {
return !!window.Worker;
}
13. Offline web applications start out as online web applications. The first time you visit an offline-enabled web site, the web server tells your browser which files it needs in order to work offline. These files can be anything — HTML , JavaScript, images, even videos . Once your browser downloads all the necessary files, you can revisit the web site even if you’re not connected to the Internet. Your browser will notice that you’re offline and use the files it has already downloaded. When you get back online, any changes you’ve made can be uploaded to the remote web server.
14. If your browser supports offline web applications, there will be an applicationCache property on the global window object. If your browser doesn’t support offline web applications, the applicationCache property will be undefined:
function supports_offline() {
return !!window.applicationCache;
}
15. Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. If your browser supports the geolocation API , there will be a geolocation property on the global navigator object. If your browser doesn’t support the geolocation API , the geolocation property will not be present inside of navigator :
function supports_geolocation() {
return 'geolocation' in navigator;
}
16. HTML5 defines over a dozen new input types that you can use in your forms.
a) <input type="search"> for search boxes
b) <input type="number"> for spinboxes
c) <input type="range"> for sliders
d) <input type="color"> for color pickers
e) <input type="tel"> for telephone numbers
f) <input type="url"> for web addresses
g) <input type="email"> for email addresses
h) <input type="date"> for calendar date pickers
i) <input type="month"> for months
j) <input type="week"> for weeks
k) <input type="time"> for timestamps
l) <input type="datetime"> for precise, absolute date+time stamps
m) <input type="datetime-local"> for local dates and times
17. You can check the support of new input types in the following way: create a dummy <input> element in memory. The default input type for all <input> elements is "text " . Set the type attribute on the dummy <input> element to the input type you want to detect. If your browser supports that particular input type, the type property will retain the value you set. If your browser doesn’t support that particular input type, it will ignore the value you set and the type property will still be "text " .
18. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon you click on (or tab to) the input field, the placeholder text disappears. If your browser supports placeholder text in input fields, the DOM object it creates to represent an <input> element will have a placeholder property:
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
19. The autofocus attribute moves the focus to a particular input field. But because it’s just markup instead of a script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior. f your browser supports autofocusing web form controls, the DOM object it creates to represent an <input> element will have an autofocus property:
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}
20. Microdata is a standardized way to provide additional semantics in your web pages. If your browser supports the HTML5 microdata API , there will be a getItems() function on the global document object. If your browser doesn’t support microdata, the getItems() function will be undefined:
function supports_microdata_api() {
return !!document.getItems;
}
21. The HTML5 history API is a standardized way to manipulate the browser history via script. If your browser supports the HTML5 history API , there will be a pushState() function on the global history object. If your browser doesn’t support the history API , the pushState() function will be undefined:
function supports_history_api() {
return !!(window.history && history.pushState);
}