Discovering new HTML5 APIs

08 January 2015

Recently came across a few HTML5 apis which attempt to bring native capabilities to the Web. We have all started using Hangouts on web, but the following is a list of other capabilities that are available as part of HTML5. These APIs are available as part of modern browsers and as a good developer, it is always recommended to perform feature detection before using each API.

Fullscreen API

The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode. All video sites use this by default now.

Any element can be pushed to fullscreen, and there’s even a CSS pseudo-class `:fullscreen’ to allow some control over the screen while in fullscreen mode.

Page Visibility API

The Page Visibility API provides developers an event to listen in on, telling developers when the user focuses on a page’s tab, and also when the user moves to another tab or window:

This can be used to a great extent to save bandwidth, especially on mobile web browsing to save bandwidth when the tab is not focused.

getUserMedia API

The getUserMedia API is incredibly interesting; this API provides access to device media, like your camera. Using this API, the <video> tag, and canvas, you can take beautiful photos from within your web browser. This opens capabilities on all devices to be used by your web applications.

Battery API

The Battery API is obviously a mobile-targeted API providing insight into the device’s battery level and status.

Knowing battery API and status can signal to the web application not to use battery-intensive processes.

Link Prefetching

Link prefetching allows developers to silently preload site contents to project a more fluid, seamless web experience

Element.classList

This is one of the most sought APIs by JS developers for simplifying plugin and other JS development.

ContextMenu API

The new ContextMenu API opens the web pages context menu and instead of overriding the browser context menu, the new ContextMenu API allows the developers to simply add items to the browser’s context menu.

Element.dataset

The dataset API allows developers to get and set data- attribute values

window.postMessage API

For web applications, whic acts as gateway and providers, this is a most sought after API. The postMessage API allows for messaging between windows and IFRAME elements.

Though the messages can be strings only. JSON.stringify and JSON.parse can be used for more extensive messaging structure.

autofocus Attribute

The autofocus attribute ensures that a given BUTTON, INPUT, or TEXTAREA element is focused on when the page is ready.

All the code snippets are available at