This is next article to the series on "HTML 5 primer" and delves into detection of features in browser who has varying degree of support for HTML 5 features.

Objective

To know more about HTML 5 features and their support in different browsers.

Introduction

In the previous article named “HTML 5 Distilled And Browser’s Readiness” (http://www.dotnetfunda.com/articles/article1560-html-5-distilled-and-browsers-readiness-.aspx), we discussed the HTML 5 addenda to its prior version and also the browser’s readiness. The reference to Microsoft and Google links for HTML 5 were mentioned along-with Microsoft’s readiness with developer tools. We now know that IE 9 and IE 8 both support the HTML 5 with varying degree of support. Other browsers like Chrome, Opera, Safari, Firefox do also support the HTML 5, CSS 3.0

These browsers differ in the way they support the HTML 5 features and for the early adopters of HTML 5 would have daunting task to sense the feature support and accordingly use the features.

There were similar concerns in the past which were termed as “Cross-browser” issues and definitely a web programmer has to go that extra mile to take care of these issues. These issues are outcome of fierce competition among browser vendors (aptly called as “Browser Wars”). Luckily in this era, the steam has gone out of such wars making web programmers life little easy and hopefully with full HTML 5 adoption, cross- browser issues might be part of history. Sounds like too optimistic, right!!

Traditionally there have been 2 approaches for dealing with the browser compatibility and they are

1.Browser detection

2.Feature detection

The script would detect the browser (type) and according to the browser vendor/type, the specific scripts would be run or alternate actions would be executed. This is usually done through the version of userAgent. In earlier days, it was accomplished through “document.getElementID”or “document.all” or even with “window.XMLHttpRequest” where different browsers had different support for DOM versions.

With the plethora of service packs and patches, detecting the browser would alone can’t be sufficient to give exact knowledge of feature supported by browser (with different minor versions).

The feature detection uses a simple mechanism to sense whether the feature is supported or not.

Instantiate that feature/object and test for any of the properties/ attributes of such feature and if it is supported, go ahead and use. This also can be names as “Object detection”. Anyway, let’s focus on how to detect the features in simplistic way.

Description

These methods can be employed for HTML 5 features and we would see how feature detection can be implemented. This can combined with browser detection script to have more concise control.

HTML 5 has features like Video, audio, canvas and they can be detected as following.

e.g. to detect whether the video feature is supported or not, following JavaScript function can be used

function detectVideoFeature()

{

// alert( !!document.createElement('video').play);

return !!document.createElement(‘video’). play;

}

<body onload="detectAudioFeature();">

// some content here

</body>

If you save this script in html file and call this on onload of <body> tag, you would get following result in IE 8. (Please note the line for “alert..” needs to be uncommented and line for “return..” is to be commented)

If you check this for Mozilla/5.0, following is the result.

And for Chrome (13.0.782.218 m for Windows), you would get following result.

Similarly the other features like audio, canvas can be detected as following.

function detectAudioFeature()

{

//return !! document.createElement('audio').play;

alert( !!document.createElement('audio').play);

}

function detectCanvasFeature()

{

//return !!document.createElement('canvas').getContext;

alert( !! document.createElement('canvas').getContext);

}

Worth to mention that these are very crude way of detecting the features but it successfully demonstrates the proof of concept for feature detection. More sophisticated scripts are available on internet and Microsoft supposedly using “FeautreDetetion.js” and readers are recommended to search further and use the sophisticated and tested scripts, if they feel the need.

Summary & Conclusion

HTML 5 has arrived and it’s going to last. The real challenge is the acceptance of all major browsers. Though all browsers eventually would have complete support, there would be lot of disparity in the acceptance of HTML 5 features and their readiness. This would definitely remind us of cross browser issues but one has to live with it anyway.

Different browser vendors have already embraced these standards to their own way. For the early adopters for HTML 5, they would still have to wait for some more time to see HTML 5 seamlessly integrated with browsers. Till that day arrived, web programmers have to resort to time tested methods of detecting browser features. We have seen simplistic example of such feature detection and also saw it in action for different browsers. More sophisticated script needs to be searched for professional use.

The inference is “though HTML 5 is yet to be reality, it is still possible to use the features and try to give the users the taste of things to come”, so get ready and start implementing.