HTML5 Feature Detection
When someone asked "How can I check if my client browser supports HTML5?", this is not a technically correct question. HTML5 is not an entity that your browser either fully supports or does not. HTML5 is a collection of individual features, like canvas, video, geolocation, local storage, application cache (offline feature), etc.
The correct answer to ask then, is "How can I check if my client browser supports canvas, video, local storage, etc?"
Detecting Feature Support
When the client browser sends a request to the server, the server sends back a MIME type response. If a server is sending an HTML document, it would send a response with the MIME type Content-Type: text/html. When the browser sees this, it knows that it would have to construct a DOM (Document Object Model) structure.
Before displaying a nicely rendered HTML page, the browser creates a Javascript DOM structure with nodes. The HTML elements that you are familiar with (div span input etc) are converted into JS objects. To test this, let's create a div element. In your browser devtool (right click on your browser, then select Inspect), create an HTML div element with document.createElement('div');.
There are constructor methods for all HTML elements. You can add, delete, and modify these DOM objects. These elements are connected. If you have nested elements like <div><span>hello</span></div>, the div node is connected to the span node (the div node is the parent of the span node and the span node is the child of the div node). If you have neighboring elements like <h1>hello</h1><p>hello hello</p>, the h1 node is the sibling of the p node.
The overall structure of an HTML document is a tree-like structure with many parent-child and siblings relationships.
Keep in mind that this DOM API to construct, modify, and delete the nodes is not technically part of the Javascript language. DOM is part of the "Web API". It's like a library to interact with HTML that your browser provides.
Now that you know that the HTML document sent by the server is converted into a tree-like Javascript structure, you can detect feature support from the client-side using Javascript.
To detect canvas support, you can use:
!!document.createElement('canvas').getContext;
This returns either true or false. First, you create a canvas element. If the browser supports it, it will have a getContext method. If it doesn't, then it means that the client browser doesn't support it.
Simple, right? Let's look at another feature. Let's check if your browser supports the readOnly feature for the input element.
const inputEl = document.createElement('input');
'readOnly' in inputEl; // returns true
First you create an input element, then you check if it contains the 'readOnly' attribute. It's a slightly different approach to detect feature than with canvas, but overall it utilizes the same pattern: construct that element then check if a method / attribute exists.
Let's try a different attribute, the autocomplete feature. Note that this operation is case sensitive:
'autoComplete' in inputEl; // false
'autocomplete' in inputEl; // true
To check all available attributes in an element, you can attributes:
for (attr in inputEl) {
console.log(attr);
}
Some features require different detection approach, like web workers:
!!window.Worker;
The web worker feature is within the window global object. To detect it, just need to check if it is available in the window global object.
You can use the same approach to test application cache (offline support):
!!window.applicationCache;
To check the geolocation feature:
'geolocation' in navigator;
This time, you need to check the navigator global object for the geolocation attribute.
There are many, many other methods that you can check. This article is meant to be a starting point.
HTML5 features are all over the DOM APIs. Some you can check by constructing an HTML element, while another you can check either the window or the navigator global objects.
Take-homes
Your browser constructs a tree-like structure using DOM that is accessible using Javascript's Web API. Each HTML feature is accessible with Javascript.
Because the HTML elements are really just JS objects, you can detect if a feature exists using different approaches with JS.
What does this mean to you as a developer? If your app critically relies on a specific HTML5 feature, it's a good practice to check whether your client browser supports it, so you can take the appropriate action. If you're heavily relying on the <video> element, don't assume that all your client browsers can visibly see your <video>. Detect it first, then take the appropriate action.
Top comments (1)
Nice introduction for feature detection in the browser. We often take it for granted that the user has an HTML5-compliant browser but that's not always the case.