1. Technology

Is that Feature Supported?

Join the Discussion

Questions? Comments?

Javascript provides a really simple way to check whether the browser in which it is currently being run supports a particular language feature.

Specifying function() or object.method() runs the particular function or method if it exists and gives an error message if it doesn't. Leave off the parentheses and instead of running the function or method Javacript will simply test if it exists and will return true of it does or false if it does not. Even the earliest versions of Javascript support this testing so by using it we can make sure that the browser has a function or method available before it calls it.

Here is an example:

if (document.getElementById) {
document.getElementByID('myId').style.visibility = 'hidden';
}

Sometimes the method or property that we are trying to test is several layers down within the DOM and there are several levels of names that we need to test actually exist in order to be able to reference the method or property successfully. Again Javascript make this simple because iw we have an IF statement that contains several conditions separated by '&&' then the one(s) on the right will not be evaluated at all if the one(s) on the left evaluate to false. So we can easily check for each of the necessary levels within a single IF statement and it will evaluate as false if the method or property doesn't exist instead of giving an error.

Here is an example:

if (document.getElementById &&
document.getElementById('myId').className) {
myIdClass = document.getElementById('myId').className;
}

The final thing that can affect tests such as we are doing here is if we are trying to determine if a property that can be set to zero or false exists. If we test for the existance of a property using the means described above then if the property doesn't exist the test will return false. Unfortunately it will also return false if the field exists and has a current value of false or zero (since zero evaluates as false). There are two ways to solve this. One way is to test if the field is not equal to null. For example:

if (document.body.clientWidth != null) {...

The effect of this code is that the property is created if it doesn't already exist (having a null value since we don't assign anything to it). If the property didn't already exist then it will have a value of null and the test will return false. Subsequent calls to the same code will not create the property again since it already exists but since it is still set to null the test will still return false.

To avoid the need to create the property in order to test if it had previously existed we can instead code our test to determine if the property is defined. For example:

if (typeof document.body.clientWidth != 'undefined') {...

By making use of IF statements such as these around any of the Javascript on our page that may not be supported by all browsers we hide the code from those browsers that don't support it without our having to know which browsers do and don't support particular features. This process of sensing whether the browser supports the given feature allows us to write Javascript that will either work correctly or does not work at all and doesn't produce errors in either case.

The only situations where these tests don't work is where a browser does support a feature but doesn't support it correctly. Only where this situation arises do you then need to start looking for ways to identify the particular browser (and version) where the problem occurs in order to produce a workaround.

Related Video
Microsoft Excel Sort Feature

©2014 About.com. All rights reserved.