HTML5 Feature Detection
Tags: html, features, javascript, dom
Published: 2021-03-22 15:37:28

---
title: HTML5 Feature Detection
published: true
description: HTML5 Feature Detection
tags: html5, features, Javascript, DOM
---

# 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.