home / articles / javascript

Browser targeted Cascading Style Sheets using JavaScript

Cascading Style Sheets (CSS) received a great deal of attention during 1998, so if you are involved in the creation of websites there is a good possibility that you experimented with the use of them on your site.

Unfortunately, the currently available range of web browsers have inconsistent support for CSS. As a result, what looks good in one browser may not always look good in another. Webreview.com has a good summary of the differences between CSS support in the major browsers.

In fact, due to the major differences between the two most popular web browsers in common use (Internet Explorer 4 and Netscape 4), experienced web developers may use different CSS files for each browser, or consider splitting their site into a Netscape enhanced section, and an Internet Explorer enhanced section. One way of doing this is to use browser detection on the server [for an example, see The Complete Webmaster's article on server-side browser detection using ASP].

Unfortunately, server-side browser detection can add significantly to server load. It can also prevent the effective caching of pages, contributing to an increased Internet bandwidth usage. Finally, not all web developers will have access to the facilities for detecting browsers on the server. An alternative is therefore to use JavaScript. This scripting language is understood by both Netscape and Internet Explorer. Furthermore, because it is executed by the web browser it does not require any additional server resources.

A simple browser-detecting JavaScript

Writing a JavaScript to detect whether the page is being viewed in either Netscape or Internet Explorer is not difficult. For example, the script below will inform you of whether you are using Internet Explorer or Netscape:

Because CSS are only supported in versions of Netscape 4 and IE 4 or above (the limited CSS support in Internet Explorer 3 is not worth bothering with), the script will only detect version 4 (or greater) of both browsers. The script required for this example is below:

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<I>You appear to be using Microsoft Internet Explorer</I>");
}
else if (browser_type == "Netscape" && (browser_version >= 4)) {
document.write("<I>You appear to be using Netscape</I>");
}
// --></script>

Adapting the JavaScript to load browser specific style sheets

Adapting the script shown above to load a CSS is not difficult. The script has to write a line of HTML to the browser, such as the HTML below:

<link REL="stylesheet" HREF="../_private/MyStyleSheet.css" TYPE="text/css">

This HTML should appear in the HEAD portion of the HTML document.

The script to load a specific CSS according to the browser being used is shown below:

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

Don't forget that this script has to be placed in the HEAD part of the HTML document. Some older HTML editors (e.g. FrontPage 97) don't like scripts placed in the HEAD part of the document, so be aware of this.

An example page demonstrates the script. If you view the page in Netscape 4 (or above) then the style sheet will cause the browser to load this style sheet, which specifies that the headings and background image should all be in an orange color scheme. Alternatively, if the page is viewed in Internet Explorer 4 (or above) then an alternative style sheet is loaded which specifies that the headings and background image should all be in a blue color scheme.

If you don't have both of these web browsers, then these screenshots will show the appearance of the page in both Netscape 4.5 and Internet Explorer 5 (beta).

Further considerations

Don't forget that the World Wide Web is viewed by a massive audience using a wide range of hardware and software. Not all web browsers support style sheets. Furthermore, Internet Explorer 4 and 5 allow users to override style sheets with their own. Before using this script, you might therefore like to check to see what type of browsers users are visiting your site. If you don't have access to your server's logfiles, then try using a free web statistics service like ShowStat, or one of the many other counter sites listed at CounterGuide.Com. Many of these will show you which browsers your site visitors are using.

Author: Brett Burridge
Date: 01/28/1999

More articles about JavaScript
More articles by Brett Burridge
Author Biography