Learn Modern Unobtrusive JavaScript - Feature Sensing

Learn Modern Unobtrusive JavaScript

Feature Sensing

JavaScript has developed somewhat over time and so older web browsers do not always support all of the same JavaScript commands that the more modern web browsers do. In addition to that the Internet Explorer web browser actually runs a language known as JScript instead of the JavaScript that most other browsers run. There is actually a subset of JScript that is almost identical to JavaScript and that is what makes cross browser support of JavaScripts possible.

So what do we do when we want to use commands that earlier browsers might not support or where the JScript command isn't exactly the same as the JavaScript one? The original solution to that problem was to attempt to detect which browser your visitor was using and to then run the code that the particular browser supports. There are several problems with this approach which make it absolutely useless to use any more. To start with new browsers are being constantly developed that support new features that older versions of the same browser didn't support, this means that you would need to be constantly updating your code every time a new browser version is released and with thousands of different browsers there would be several new releases each day on average. Disregarding all but the top four or five browsers would make it easier to keep up to date with browser releases but then you have a percentage of your visitors where the script doesn't work simply because you didn't test for their browser and not because their browser doesn't support the script. Finally, all but one of the ways of testing what browser it is involve testing the content of the useragent field (or a derivative based on that field) in order to determine what the browser is. That field is a free format field that can (at least in some browsers) be set to anything the browser owner wants to set it to. For a while I had Internet Explorer 6 set to report itself as Firefox 2.0 and Firefox 2.0 set to report itself as the Googlebot spider - that made it really obvious which sites were still using antiquated browser sensing scripts as certain sites got totally confused trying to run the wrong code for the browser i was using or not running the code at all simply because a free format user field didn't contain the value they wanted it to have.

The correct solution to the problem of not all browsers supporting specific code is to use feature sensing instead of browser sensing. With feature sensing we test if the browser supports the feature that we want to use. If the browser supports the feature we use it and if the browser doesn't support the feature then the code is skipped. If a new version of a browser is released that starts supporting the feature you are using where the prior version didn't, you don't need to update your code or even know that a new browser version has been released, it will just start working automatically. With feature sensing you don't need to keep track of which of the half dozen or so versions of each of the thousands of different browsers support which features of JavaScript, you just let the code test for itself if the browser supports the feature.

All versions of JavaScript since it was first introduced have supported feature sensing and so we do not need to test if a browser supports feature sensing. If a browser supports JavaScript (or JScript) then it supports feature sensing.

Having decided that feature sensing is what we need to use in our scripts instead of browser sensing we just need to look at how to actually apply feature sensing to our code. The main area where feature sensing is used is in determining whether a built-in function (or method - which is basically a function attached to an object) exists. This is very easily done. Let's consider part of the code from the "Hello World" tutorial.

document.getElementById('hello').innerHTML

While getElementById() has been supported by al new browsers for many years now, very early browsers such as IE4 and Netscape 4 do not support this call. Just about no one uses such old browsers any more and so testing if that feature is supported would slow the script for 99.99999% of your visitors just to avoid giving an error for the other 0.00001% who should really have upgraded their browser long ago but the way we test if that feature is supported by a browser is exactly the same as testing for more recently introduced features and so serves our purpose in looking at how to implement feature sensing.

The first thing we do in order to implement feature sensing for our code is to enclose the necessary code within { } that is dependent on the feature being supported. We can then make this the code that executes when an if statement performing the feature sensing returns true. To test if a given feature such as getElementById() is supported we simply reference the function or method without the () on the end. Having () on the end instructs JavaScript to run the function. Without it there we just have a reference to the function. When you evaluate a reference to a function in an if statement it has a value of true if the function exists and a value of false if the function doesn't exist.

function hello() {
if (document.getElementByID) {
 document.getElementById('hello').innerHTML = 'Hello World';
}
}
window.onload = hello;

This same technique can be used to test for if any particular feature is supported by a browser.

There are a very few situations that where there are differences between JavaScript and JScript where we can't use feature sensing. There is one method for browser sensing (or rather language sensing) that doesn't rely on a user enterable field isto determine when this occurs and that is to make use of JScript conditionals. These are only needed where there is no feature that can be tested for to identify whether JScript or JavaScript is being run and are therefore very seldom needed as most of the time each language has a feature that can be tested

 /*@cc_on
 @if (@_jscript)
 alert('This browser is running JScript');
 @else */
 alert('This browser is running JavaScript'); /*
 @end
 @*/

With this code we are making use of a feature of JScript where it can have if statements inserted within comments in the code that allow us to terst whether the language actually is JScript as well as other things such as the version of JScript that is being run. By careful placement of the start and end of these comments we can make it look to JavaScript as if everything except the code we want it to run are comments while JScript sees and acts on the if statements within the comments.