Latest APIs in HTML5

The web is deriving at a fast pace. Every day a new framework, tools, and libraries are releasing with the ambition to become next jQuery. Here are some of the interesting HTML5 APIs, such as Navigation Timing API and Battery Status API. So, let’s dive deep in and know what are these about.

What is Navigation Timing API?

The Navigation Timing API provides data that can be used to measure the performance of a website. This API exposes several properties which offer information about the time at which certain events happen.

Navigation Timing API is W3C recommendation which means that its specifications will not be changed unless a new version is released. Unlike other JavaScript-based mechanisms that have been used for the same purpose, Navigation Timing API can provide end-to-end latency data that can be more useful and accurate.

Let us see an example of how you can measure perceived loading time:

function onLoad() {
var now = new Date().getTime();
var page_load_time = now – performance.timing.navigationStart;
console.log(“User-perceived page loading time: ” + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the Performance Timing interface. The list of events in order of occur rence is given below.

navigationStart: Is the time immediately after the browser finishes prompting to unload the previous document. If there is no previous document, then navigationStart is equal to fetchStart. This is the beginning of the page load time as perceived by the user.

unloadEventStart: unloadEventStart is the time immediately before the previous document’s unload event is fired. If there are no previous document, or if the previous document is from different origin then the value would be zero.

unloadEventEnd: If there are any redirects that point to a different origin then unloadEventStart and unloadEventEnd are both zero.

redirectStart: “redirectStart” represents the start time of the URL fetch that initiates a redirect.

redirectEnd: If there are any redirects then “redirectEnd” represents the time after the last byte of the last redirect response received.

requestStart: requestStart is the time before the browser sends a request for the URL.

responseStart: The time immediately after the browser receives the first byte of response.

responseEnd: The time immediately after the browser receives the last byte of the response.

In addition to the above set of properties, the Navigation Timing API also defines another object to determine how a user landed on a particular page. The object is called navigation and it belongs to windows.performance. It contains two properties i.e., “type” and “redirectCount”.

Type : This property provides the method by which the user navigated to the current page. The following are the list of values that “type” can hold.

⦁ If the user navigates to a page by typing the URL, clicking a link, submitting a form, or through a script operation, then the value of “type” is zero.
⦁ If the page is reloaded/refreshed, then the “type” is equal to one.
⦁ If the user navigates to a page by clicking back or forward buttons, then “type” is equal to two.
⦁ For other circumstances, “type” is equal to 255.

redirectCount: It is the number of redirects taken to the current page. If there are no redirects occurred or if any of the redirects are from a different origin, then the value is zero.

Browser Support: Browser support for this API is very good for both desktop and mobile. On a desktop, the Navigation Timing API can be implemented in Chrome, Firefox, Internet Explorer, and Opera. The only desktop browser that currently does not support this API is Safari. On mobile, the API can be implemented in iOS safari, UC browser, and Blackberry browser. Opera Mini is the only browser that does not support this API.

Battery Status API
What is Battery API?

The Battery Status API also referred as the Battery API, is an API that provides information about systems battery level. It also defines events that are fired when changes of the battery level or status take place. This can be used to adjust user’s applications resource usage to minimise battery drain when the battery is low or to save changes before the battery runs out in order to prevent data loss.

The Battery Status API exposes four read-only properties on the window.navigator.battery object, they are as follows:

strong>Charging: A Boolean value that specifies whether the battery is charging or not. If the device doesn’t have a battery or the value cannot be determined, then the value of this property is set to be true.

ChargingTime: A value that specifies the number of seconds remaining until the battery is fully charged. If the battery is already charged or the device doesn’t have a battery, then the property is set to be “0”. If the device is not getting charged or if it is unable to determine the remaining time, then the value is Infinity.

DischargeTime: The value that represents the number of seconds re maining until the battery is completely discharged. If the discharge time cannot be determined or the battery is currently charging, then the value is set to Infinity. If the device doesn’t have a battery, then the discharging Time is also set to Infinity.

Level: A value that specifies the current level of the battery. The value is returned as float ranging from 0 (discharged) to 1 (fully charged). If the level of the battery cannot be determined, the battery is fully charged, or the device does not have a battery, then the value of level is equal to 1.

Battery Status Events:
There are four events that can be fired by the battery object.

Chargingchange: The device has been changed to being charged to being discharged.

Levelchange: The level of the battery will be changed.

Chargingtimechange: It is the time until the battery is fully charged has changed.

strong>Dischargingtimechange: It is the time until the battery is fully discharged has changed.

Browser support

Browser support for the Battery Status API is pretty poor. Firefox is the only browser that provides support for the API without the use of vendor prefix.

How to Change an input’s HTML5 placeholder color with CSS?

A placeholder in input field looks like this:
By default the color of the placeholder is black (with some opacity).

In order to change the default color of a placeholder in input field, we can use pseudo-elements and pseduo-classes.
Mozilla Firefox
/* Mozilla Firefox 4 to 18 */
[one colon]
:-moz-placeholder {
color: #909;
opacity: 1;
}
/* Mozilla Firefox 19 & above */
::-moz-placeholder {
color: #909;
}
Webkit Browsers
/*Chrome,Safari,etc*/
::-webkit-input-placeholder {
color: #909;
}
Internet Explorer
/* IE 10+ */
:-ms-input-placeholder {
color: #909;
}
Points to Note:
IE 9 & Below and Opera 12 & below do not support any CSS selector for placeholders.
Firefox’s placeholder needs to use opacity: 1 to avoid any default contrasts.
It is highly recommended to use em’s for input elements’ dimensions to avoid any cutoff in placeholder’s text.