A Brief Look at Browsers and Compatibility Problems

We've seen in the preceding example that by using JavaScript we can change a web page's document's background color using the bgColor property of the document. The example worked whether you used a Netscape or Microsoft browser, and the reason for this is that both browsers support a document with a bgColor property. We can say that the example is cross-browser compatible. However, it's not always the case that the property or language feature available in one browser will be available in another browser. This is even sometimes the case between versions of the same browser.

Note

The version numbers for Internet Explorer and Netscape Navigator browsers are usually written as a decimal number, for example Netscape Navigator has a version 4.06. In this book we will use the following terminology to refer to these versions. By version 4.x we mean all versions starting with the number 4. By version 4.0+ we mean all versions with a number greater than or equal to 4.

One of the main headaches involved in creating web-based JavaScript is the differences between different web browsers, the level of HTML they support, and the functionality their JavaScript interpreters can handle. You'll find that in one browser, you can move an image using just a couple of lines of code, and in another, it'll take a whole page of code, or even prove impossible. One version of JavaScript will contain a method to change text to uppercase, and another won't. Each new release of Microsoft or Netscape browsers sees new and exciting features added to their HTML and JavaScript support. The good news is that with a little ingenuity we can write JavaScript that will work with both Microsoft and Netscape browsers.

Which browsers you want to support really comes down to the browsers you think the majority of your website's visitors, that is, your user base, will be using. This book has been aimed at both Internet Explorer 4 and above (IE 4.0+) and Netscape Navigator 4 and above (NN 4.0+). However, in later chapters we'll be concentrating on more modern browsers like IE6 and Netscape 7.

If we want our website to be professional, we need to somehow deal with older browsers. We could make sure our code is backward compatible—that is, it only uses features that were available in older browsers. However, we may decide that it's simply not worth limiting ourselves to the features of older browsers. In this case we need to make sure our pages degrade gracefully. In other words, although our pages won't work in older browsers, they will fail in a way that means the user is either never aware of the failure or is alerted to the fact that certain features on the website are not compatible with his or her browser. The alternative to degrading gracefully is for our code to raise lots of error messages, cause strange results to be displayed on the page, and generally make us look like idiots who don't know what we're doing!

So how do we make our web pages degrade gracefully? You can do this by using JavaScript to check which browser the web page is running in after it has been partially or completely loaded. We can use this information to determine what scripts to run or even to redirect the user to another page written to make best use of their particular browser. In later chapters, we'll see how to check for the browser version and take appropriate action so that our pages work acceptably on as many browsers as possible.

Following is a table listing the different versions of JavaScript (and JScript) that Microsoft and Netscape browsers support. However, it is a necessary oversimplification to some extent, because there is no exact feature-by-feature compatibility. We can only indicate the extent to which different versions have similarities. Also, as we'll see in Chapter 12, it's not just the JavaScript support that is a problem, but also the extent to which the HTML can be altered by code.

On a more positive note, the core of the JavaScript language does not vary too much between JavaScript versions; the differences are mostly useful extra features, which are nice-to-haves but often not essential. We'll concentrate on the core parts of the JavaScript language in the next few chapters.