HTML5 Recipes: Browser Capabilities Tools

If you have been following the series so far, one of the questions that should have cropped up is about how to determine if the browser that you are using supports a particular HTML5 feature. It is not just about desktop browsers but even browsers that are present on iOS and Android devices. It could get pretty frustrating to not see a particular feature work as documented. If there are no problems in the code, chances are that you browser has not yet implemented the particular HTML5 feature.

The HTML5 series of specifications is said to be around 1,000 pages and luckily for us, I will discuss a couple of web sites that come in quite handy to determine if your browser supports a particular HTML5 feature. When I say HTML5 feature, I loosely use that term to refer to not just the core HTML5 specification but even all the associated Javascript and CSS features that are part of its umbrella

Let us cover the first web applicated called HTML5 Test. All you need to do is launch the browser in which you wish to conduct your development on HTML5 and visit www.html5test.com. After a few seconds of activity, your browser will be given a score out of 300 points. The higher the score, the closer it is to supporting most of the features. But more than the score, I suggest to look at all the sections that it lists down. For e.g. we have covered several posts on Canvas, Storage and Geolocation. Scroll down to those sections and you will see a cumulative score for the section along with each individual features with a green tick mark indicating that your browser supports it. If your browser does not support it, you will find a red cross mark.

Example sections from my browser (Google Chrome Build 8.0.552.224) indicate that the browser supports the Geolocation and Canvas features completely. When it comes to Storage, it supports Session Storage, Local Storage and Web SQL Storage but not IndexedDB.

html5test.png

The other web application is www.caniuse.com.This application, as the web site says, provides compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. You can use this site to check for feature support across all the mainstream browsers, including mobile ones. The best part of this site is also its ability to give an insight into “When you can use?” a particular feature, if it s not currently supported in a browser that you are targetting. Depending on the information that it has, it will provided a rough estimate of the date that we can expect the particular browser to support a said feature. Use the search box to enter any particular feature and it immediately displays the relevant section. An example screen below shows support for geolocation in major browsers.To get to this, I simply typed geolocation in the search box.

html5test2.png

The utilities come in very handy while you are developing or are planning on using a particular HTML5 feature in your application. It might just save hours of your time, instead of navigating through error conditions. This recipe covered tools that you can launch from y our browser to check for browser support of a feature. In the next recipe, we shall look at how to programmatically detect support for a particular feature and control your program flow as per that.


HTML5 Feature Detection Recipes

  1. Browser Capabilities Tools
  2. Using Modernizr

Back to HTML5 Series

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s