javascript

Chapter 9: Client Detection
230
For example, the DOM method document.getElementById() didn ’ t exist in Internet Explorer (IE)
prior to version 5.0. This method simply didn ’ t exist in earlier versions, although the same functionality
could be achieved using the nonstandard document.all property. This led to a capability detection fork
such as the following:
function getElement(id){
if (document.getElementById){
return document.getElementById(id);
} else if (document.all){
return document.all[id];
} else {
throw new Error(“No way to retrieve element!”);
}
}
The purpose of the getElement() function is to return an element with the given ID. Since
document.getElementById() is the standard way of achieving this, it is tested for first. If the function
exists (it isn ’ t undefined), then it is used. Otherwise, a check is done to determine if document.all is
available, and if so, that is used. If neither method is available (which is highly unlikely), an error is
thrown to indicate that the function won ’ t work.
There are two important concepts to understand in capability detection. As just mentioned, the most
common way to achieve the result should be tested for first. In the previous example, this meant testing
for document.getElementById() before document.all . Testing for the most common solution
ensures optimal code execution by avoiding multiple - condition testing in the common case.
The second important concept is that you must test for exactly what you want to use. Just because one
capability exists doesn ’ t necessarily mean another exists. Consider the following example:
function getWindowWidth(){
if (document.all){ //assumes IE
return document.documentElement.clientWidth; //INCORRECT USAGE!!!
} else {
return window.innerWidth;
}
}
This example shows an incorrect usage of capability detection. The getWindowWidth() function
first checks to see if document.all exists. It does, so the function then returns document
.documentElement.clientWidth . As discussed in Chapter 8 , IE does not support the window.
innerWidth property. The problem in this code is that a test for document.all does not necessarily
indicate that the browser is IE. It could, in fact, be Opera, which supports document.all as well as
window.innerWidth .
Detecting a particular capability or set of capabilities does not necessarily indicate the browser in use.
The following “ browser detection ” code, or something similar, can be found on numerous web sites and
is an example of improper capability detection:
//AVOID! Not specific enough
var isFirefox = !!(navigator.vendor & & navigator.vendorSub);
//AVOID! Makes too many assumptions
var isIE = !!(document.all & & document.uniqueID);