Sams Teach Yourself JavaScript in 24 Hours

Cross-Browser Scripting

If all of those details about detecting different browser versions seem confusing, here's some good newsin most cases, you can write cross-browser scripts without referring to the navigator object at all. This is not only easier, it's better, because browser-checking code is often confused by new browser versions, and has to be updated each time a new browser is released.

Feature Sensing

Checking browser versions is sometimes called browser sensing. The better way of dealing with multiple browsers is called feature sensing. In feature sensing, rather than checking for a specific browser, you check for a specific feature. For example, suppose your script needs to use the document.getElementById() function. You can begin a script with an if statement that checks for the existence of this function:

if (document.getElementById) {
   // do stuff
}

If the getElementById function exists, the block of code between the brackets will be executed. Another common way to use feature sensing is at the beginning of a function that will make use of a feature:

function changeText() {
   if (!document.getElementById) return;
   // the rest of the function executes if the feature is supported
}

If this looks familiar, it's because it's been used in several previous examples in this book. For example, most of the code listings in Hour 14, "Using Advanced DOM Features," make use of feature sensing to prevent errors in browsers that don't support the W3C DOM.

You don't need to check for every feature before you use itfor example, there's not much point in verifying that the window object exists in most cases. You can also assume that the existence of one feature means others are supported: If getElementById() is supported, chances are the rest of the W3C DOM functions are supported.

Feature sensing is a very reliable method of keeping your JavaScript unobtrusiveif a browser supports the feature, it works, and if the browser doesn't, your script stays out of the way. It's also much easier than trying to keep track of hundreds of different browser versions and what they support.

Dealing with Browser Quirks

So, if feature sensing is better than browser sensing, why do you still need to know about the navigator object? There's one situation where it still comes in handy, although if you're lucky you won't find yourself in that situation.

As you develop a complex script and test it in multiple browsers, you might run across a situation where your perfectly standard code works as it should in one browser, and fails to work in another. Assuming you've eliminated the possibility of a problem with your script, you've probably run into a browser bug, or a difference in features between browsers at the very least. Here are some tips for this situation:

• Double-check for a bug in your own code. See Hour 16, "Debugging JavaScript Applications," for debugging tips.

• Search the Web to see if others have run into the same bug. Often you'll find that someone else has already found a workaround.

• Try a different approach to the code, and you might sidestep the bug.

• If the problem is that a feature is missing in one browser, use feature sensing to check for that feature.

• When all else fails, use the navigator object to detect a particular browser and substitute some code that works in that browser. This should be your last resort.