Feature Detection for Better Compatibility in Web Development

One of the things I talked about in the session I had about what’s new in IE9 for web developers was how to make your web site/application more compatible. In this post, I’ll try to give the highlights from the session.

Same Markup

When we develop web sites/applications, we need to strive to use features that give us the same markup in every browser. When we know about a feature that is compatible in every browser, we can use it without any fear that it will break our layout. For example, using most of the HTML elements such as input element for example, will look the same in every browser. On the other hand, using the new HTML5 video element isn’t supported currently by most of the browsers.

Browser Detection

In the old days when we wanted to make our site compatible to every browser, we used to detect the browser and then apply the relevant style/features/JavaScript in order to create our site appearance and behavior. This detection was made on the false assumption that we know how the next versions of the browser will work. A wrong assumption like that could break the site when new versions of the browser were released. This way of thinking is slowly disappearing and being replaced with a better method – feature detection. The only place that you should use this method is to make assumptions about older browser versions. The following code shows such assumption:

// Target legacy only<!--[if IE lte 7]>
     // Legacy browser-specific code
 <[endif]—>

In the example, we check that we are in legacy IE such as IE6 and then apply some legacy browser specific code.

Feature Detection

The feature detection is a good method to use in your site when you want to make sure that your site is compatible to most web browsers. In this method, you look to see whether a specific object, method, property, or behavior exists in the browser. If you detect standards first it will ensure you're getting your best experience in newer browsers (which will probably support the standards). Also, standardized features tend to be more stable and more interoperable across most of the browsers. So how does it work? The following example can show you a way to use feature detection:

if( window.addEventListener ){
    // Code for browsers with addEventListener}
else{
    // Code for browsers without addEventListener}

This check will pass in IE9 that has an implementation for addEventListner but in IE8 and lower versions of IE, it will go to the else statement and probably you’ll use the attachEvent method. The feature detection method is widely used in JavaScript frameworks like jQuery.

Summary

When you want to make your site compatible with browsers, you should look first for features that all the browsers give you the same markup. If you target legacy browsers, you can use the browser detection method. Otherwise, use the feature detection method. Also, remember to test for standards first in order to give the best experience to your users.