Professional JavaScript | 40

Professional JavaScript

Compatibility Techniques

Unfortunately, JavaScript browsers are not unequal but different as well. Netscape and Microsoft have been diverging in their advanced features as fast as possible in order to obtain a loyal customer base. Today's advanced features are tomorrow's backwards-compatibility nightmares.

Handling compatibility requires a two-pronged attack: readership strategies and technical tricks.

Choose Readers

If you only intend to use JavaScript to set browser preferences, then readership isn't much of an issue. However, JavaScript is mostly embedded in HTML documents. Who is going to try and read these pages? Answer these questions and avoid masses of work being tripped up by compatibility issues.

Are non-JavaScript browsers important? If so, don't bother with JavaScript at all. Once JavaScript 'infects' HTML, the HTML becomes very quickly reliant on it. Forms relying on JavaScript can still be submitted from plain browsers even though the JavaScript is ignored, which can have unexpected results.
Are non-JavaScript browsers possible? If random Web surfers can view your page, your page needs to 'gracefully downgrade' to readable plain HTML when viewed by them, with special care for forms.
Do you control the browser version? In an Intranet application used only within one company, all users may have the same browser. It's then safe to use all features of that version, provided you are willing to upgrade your work if the browser version changes.

If none of the above is the case, then you are left with multiple JavaScript/browser versions to handle. You can still simplify matters, provided you don't mind losing some readership or having your content look bad in unexpected places:

Ignore really old browsers. In late 1999, according to one poll, less than 1% of Web surfers use Navigator 2.02.
Support latest browsers only. This will cut down testing to one browser per vendor, but loses you a significant part of the readership, especially if latest versions are newly minted.
Advocate one brand only. This cuts compatibility to one (or more) version. If your subject matter appeals mostly to users of one browser, for example Unix or Macintosh, don't bother with the others. Maybe you prefer a particular browser vendor.
Support the most popular browsers. You can still reach about 90% of Web surfers if you support only the version 4.0+ browsers. Adding version 3.0 support, which means no Dynamic HTML tricks, and you have 95% or more of the market. Web sites like www.yahoo.com have Browser Statistics sections you can be mystified by, although www.statmarket.com could be more useful.

A safe middle ground at this time of writing is to use the features in Netscape 3.0 JavaScript. Failing all that, you can spend a lot of time making your JavaScript work everywhere and gracefully downgrade everywhere else. Lots and lots of time.

Choose Tricks

Here are a variety of tricks for handling different browsers in JavaScript.

Supporting Ancient Browsers

<HTML><BODY><SCRIPT>
<!-- hide from old, stupid browsers
document.write('JavaScript rules, but only here!');
// end comment --> 
</SCRIPT></BODY></HTML>

Shown earlier, comments hide script source from browsers that don't know <SCRIPT>.

Detecting Scripts are Ignored

<HTML><BODY><SCRIPT>
 alert("Off to the JavaScript page?");
 document.location.href = 'js_top.htm';
</SCRIPT>
<NOSCRIPT>Get a real browser, see it all!</NOSCRIPT>
</BODY></HTML>

The <NOSCRIPT> tag provides a method of dealing with browsers, which refuse to interpret JavaScript, either because they can't or because the user has turned JavaScript off. The main use of this tag is to provide some feedback to the user asking them to go away or else enable JavaScript. It can be used, as in this example, to show a dummy page that is replaced if JavaScript is enabled. Although the alert in this case stops the 'real' page from loading automatically, it can easily be left out.

[previous] [next]

Created: April 23, 2001
Revised: April 23, 2001

URL: http://webreference.com/programming/javascript/professional/chap4/6/