HTML5 technologies

HTML5 technology validation


When your browser displays a web page, it constructs a Document Object Model (DOM) – a collection of objects that are represented by HTML elements on the page. Every element – every <p>, every <div> and every <span> – is shown in the DOM as a separate object (there are also global objects like window or element, but they are too specific).

All DOM objects can have basic properties applied, but some objects have more properties than others. In browsers that support HTML5 capabilities, individual objects have unique properties. Looking into the DOM will tell you which features are supported.

Here are four basic techniques for exploring browser-supported technologies. Starting with simpler and ending with complex techniques.

1. Check that certain properties are available for global objects (such as window or navigator).

Example: test for geolocation support

2. Create an element, then check that properties for this element exist.

Example: paintability test

3. We create an element, then we check that some methods are available for this element, then we call this method and look at the return value.

Example: test to check supported video formats

4. Create an element, set certain values ​​for its properties, then check if these values ​​are returned.

Example: test to check what types of <input> tag are supported

Library Modernizr

Open Source Modernizr is an MIT-licensed JavaScript library for testing support for most HTML5 and CSS3 features. At the time of this writing, the latest version is 1.6, make sure you have the latest version. For use, include the following line in your document.

<! DOCTYPE html>
<meta charset = “utf-8”>
<title> Dive Into HTML5 </title>
<script src = “modernizr.min.js”> </script>


Modernizr starts automatically, so you don’t need to use any modernizr_init () function to call the library. At startup, a global Modernizr object is created that contains a boolean value for each technology. For example, if the browser supports the <canvas> tag, then Modernizr.canvas will return true. If the browser does not support this feature, then Modernizr.canvas will return false.

if (Modernizr.canvas) {
// You can draw something!
} else {
// Alas, no native drawing support


Your browser supports drawing.

HTML5 defines the <canvas> tag as “a bitmap canvas that can be used to display charts, play computer games, or display other images on the fly.” The canvas itself is a rectangle on the page that draws whatever you want using JavaScript. HTML5 defines a set of functions called the “Canvas API” for drawing shapes, outlines, creating gradients, and transforming.

Technique # 2 is used to test the Canvas API. If your browser supports drawing, there will be a <canvas> element in the DOM that we apply the getContext () method to. If the browser does not support drawing, only basic properties will work for <canvas>, not specific properties.

function supports_canvas () {
return !! document.createElement (‘canvas’). getContext;

This function creates a dummy <canvas> element. Such an element does not apply to the document, it cannot even be seen. He only rests in memory, nowhere and does nothing, like a boat in a serene river.

return !! document.createElement (‘canvas’). getContext;

When you create a dummy <canvas>, it can be checked for the getContext () method. This method will exist if the browser supports drawing.

return !! document.createElement (‘canvas’). getContext;

Finally, we cast the result to a boolean type (true or false) using the double negation technique.

return !! document.createElement (‘canvas’). getContext;

This function defines support for the basic elements of the Canvas API, including shapes, paths, gradients, and textures. It does not define the third-party explorercanvas library used by Internet Explorer.

Instead of writing your own function, you can use Modernizr to define support for the Canvas API.

if (Modernizr.canvas) {
// You can draw something!
} else {
// Alas, no native drawing support