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.
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.
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.
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
Back to HTML5 Series