Feature Sensing vs Browser Sensing

The most obvious way of setting up your javascript so that it will run on those browsers that support the necessary features and be neatly bypassed on those that don't is to test what browser is being used. This is called browser sensing. To test what browser is being used you might use code such as if (document.appName.indexOf('Netscape') != -1) to test if the browser is identifying itself as Netscape or if (browserVersion == 4) to test if it is version four of a browser.

There are a number of major problems with browser sensing. The first is that you are relying on the browser to identify itself correctly to the javascript. As many people who tried the beta version of Internet Explorer 6 found, this is not always done correctly since the second and third betas of this browser reported themselves as version 2 and 3 respectively instead of version 6. You might say that you have to expect this type of problem with beta software which after all is still in testing and not yet released for real use but the same misreporting is possible with gamma (gold) versions of browsers as well.

Second, less commonly used browsers (eg. Opera) deliberately set out to report themselves incorrectly on the basis that most javascript code wont correctly test for them so they will be more likely to provide the maximum javascript compatibility by deliberately reporting themselves as being the version of a more common browser (usually IE or Netscape) that they most closely resemble in terms of what they support. Of course there will still be differences in what they do and don't support compared to the browser that they are masquerading as which can lead to unexpected results.

Third, there are new browsers coming onto the market all of the time and each new browser version supports new features that the prior version didn't support or supported in a different way. To keep up, you would be constantly updating your code.

So what's the solution? The solution is feature sensing.

With feature sensing, instead of checking what browser our visitor is supposedly running and then relying on our knowledge of what that browser does and doesn't support, we test the feature that we intend to use directly to see if it is supported. Testing if a feature is or isn't supported is a much more effective way of coding the decision on whether or not to run the code that requires that feature in order to work.

If we want to use image rollovers in our javascript, we test if the browser supports updating images using if (document.images). We then place any necessary code so that the script wont crash on browsers that don't support updating images in the else portion of the if statement. This makes for much simpler code than would be involved in a massive compound if statement to test if the browser version being used is one of those which supports updating images.

There are a number of DOM values that can be simply tested like this to determine which features the browser being used supports so that you can present your visitor with additional functionality on those browsers that support those functions while hiding the very existence of the feature if the browser can't understand. Here are some examples of values to test for support of certain features:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow