Adding dynamic content for multiple browsers & versions

Originally published in Netscape World May 1997, archived at Wayback Machine

One concern facing all Web developers when Microsoft or Netscape release a new version of Navigator or Internet Explorer is how to incorporate some of the new technologies of the new versions, but still offer Web pages that are readable by older versions of the browser. The developer could consider forcing those people who view their pages use the newer versions of the browser, but this approach limits your audience, something most Web sites want to avoid.

Neither is it feasible for a Web site to limit their pages to those viewable only by one browser. Microsoft Internet Explorer has been steadily gaining market share since the release of IE 3.0. Most Web sites will need to develop content that will work with at least two versions (the current released version, and the version that is in preview release) of each of the major browsers. The good news is that there are techniques to use to enable this cross-browser, cross-version capability. The bad news is that each of the techniques will require additional and, at times, extensive effort.

This article demonstrates two techniques to manage browser and version differences at a Web site. The first uses scripting to determine the type and version of the browser, and re-directs the browser to load a specific page. The second uses scripting and style sheet techniques to generate content, in one page, viewable by different browsers and versions. The article will also detail some rules of thumb to follow when creating a browser friendly Web site.

There is more than one way to re-direct browser input. One tactic is to create a separate Web page for each browser and each browser version that they want to support, and then have a CGI program load the appropriate Web page based on which browser and version is accessing the page. This is not a bad approach, and it works well if you want to support browsers that don’t handle scripting.

A scripting approach based on browser and version, is to trap the onLoad event for the browser page, and re-direct the Web page output to another page. You trap the onLoad event in the <BODY> tag, using the following code:

<BODY onLoad="change_document()">

The change_document function uses the navigator properties of appVersion and appName to find out which brower and version are being used to access the page. This is then used to create a string containing the URL of the re-directed output:

<SCRIPT Language="JavaScript">
   function change_document() {
      var MS=navigator.appVersion.indexOf("MSIE")
	var MSVER = parseInt(navigator.appVersion.substring(MS+5, MS+6))
    	var NSVER=parseInt(navigator.appVersion.substring(0,1))
	var locstring
	if (MS > 0) 
		locstring = "diffie" + MSVER + ".html"
    	else if (navigator.appName == "Netscape")
		locstring = "diffns" + NSVER + ".html"

	window.location = locstring

To see an example of script re-direction, try this diff sample.

The downside to this type of browser and version difference handling is this: if you want to support Netscape Navigator 2.x, 3.x, 4.x, in addition to Internet Explorer 3.x and 4.x, you will need to create five pages for each Web “page” at your site!

However, this approach is effective if you wish to apply it selectively at your site. Perhaps you want to have an interactive product page that makes use of all the fun dynamic HTML techniques each browser is implementing. This approach could be used for this product page only, giving you the freedom to use the specific browser/version technology to its fullest.

Another technique to handling browser/version differences is to use scripting and style sheets in one page and ensure that the scripting is directed at the appropriate browser and version.

I will demonstrate this with the next sample code. The example will change the background color for all of the browsers and versions. This is all it will do for Netscape 2.x. For Internet Explorer 3.x, a CSS1 style will also re-define the appearance of the <H1> tag. For Netscape 3.x, the image that displays when the document first opens is changed. For IE 4.0, the image is changed and the style sheet definition for the <H1> tag also changes (both the font size and color). Finally, for Netscape 4.0, the <H1> tag is also changed, but this time using Dynamic Style Sheets (DSS), meaning that JavaScript has been applied to JavaScript Style Sheet (JSS) elements.

First, I apply some style sheet definitions for the Web page. A JavaScript style sheet and a standard CSS1 (Cascading Style Sheets) definition are created:

<STYLE TYPE="text/JavaScript">



<STYLE TYPE="text/css">
	H1.newstyle { font-size: 18pt ; color: red }
		margin-top: -.05in ; margin-left: 1.0in } 
	H1 { font: 24pt ; color: green }


These style sheet definitions provide for new formatting for the <H1> tag, and will be used in JavaScript functions that will be created a little later in this article.

Next, global variables will be defined that contain the type and version of the browser accessing this page. As these are global in nature, they will be available anywhere that JavaScript is used in the page:

<SCRIPT Language=JavaScript>
var MS=navigator.appVersion.indexOf("MSIE")
window.isIE4 = (MS>0) && 
    ((parseInt(navigator.appVersion.substring(MS+5,MS+6)) >= 4) &&  

var NSVER=parseInt(navigator.appVersion.substring(0,1))

isNS4 = false
isNS3 = false

if (navigator.appName == "Netscape") {
   if (NSVER == 3) {
	isNS3 = true
   else if (NSVER >= 4) {
	isNS3 = true
	isNS4 = true

The next script is a function, change_doc, which will change the background color for the Web page for all versions of the browsers that access it. Additionally, if the browser is Netscape 3.x or 4.x, it calls another JavaScript function, change_document3:

function change_document() {

    	if (isNS3) 

The next JavaScript function is change_new which is only called by IE 4.0. This function will apply the new style definition for the <H1> tag that has an id of “myheader”, using Microsoft’s own version of Dynamic HTML:

function change_new() {
	var chgh1 = document.all.myheader
    	chgh1.className = "newstyle"

The scripting block is closed as the other functions will be creating in different versions of JavaScript. First, using JavaScript 1.1. we create the change_document3 function which will change the image shown in the  page. At the end of the function the value of the isNS3 is tested, and if true the function change_document4 is called. Note from the global variable section that isNS3 is set to true for both Netscape 3.x and Netscape 4.x:

<SCRIPT Language="JavaScript1.1"> 
function change_document3() {

    	if (!isNS4) 

Using the JavaScript 1.1 specification means that any script within this block will only be executed by a browser that is capable of processing JavaScript 1.1 script. This includes Netscape 3.x and 4.x, as well as IE 3.0x and 4.x.

The next function is change_document4, which is created in a JavaScript 1.2 scripting block. This function will be called only for Navigator 4.x. The script uses a <LAYER> tag to encapsulate the original contents of the page. When this function is called, those contents are hidden, and new contents are created using a new LAYER object:

<SCRIPT Language="Javascript1.2">
  function change_document4() {

	// note with following...another technique would be to 
	// create a second layer, set to invisibile, and use 
	// conditional comments to block for non-layer browsers...
	// not implemented, yet
	newlayer = new Layer(600)
	newlayer.document.write("<img src='sun.gif' width=76 height=76 alt='sun'>")
	newlayer.document.write("<H1 class=class2> Header for this example page </H1>")

I close the <HEAD> section. In the <BODY> tag, we trap the onLoad event for the Web page. This event will check to see if the browser and version is Internet Explorer 4.0. If it is, the change_newchange_document, and change_document3 functions are called. For the other browsers/versions, only the change_document function is called. Additionally, I create the image definition and <H1> contents:

onLoad="if (window.isIE4) {change_new(); change_document(); change_document3();} else change_document();">
<img src="rain.gif" width=76 height=76 alt="rain" name="thisimage">
<H1 id=myheader> Header for this example page </H1>

Let’s take a look at this sample page in action.

This approach is just one of many that could be taken to determine the browser and version, and only execute the appropriate scripting. Different scripting blocks were used for the different versions of Navigator as there will usually be other functions and event handlers that will be coded and that are only implemented with the specific version. As an example, a new object for Navigator 3.x was the IMAGE object, for Navigator 4.x, it is the LAYER tag. Enclosing the code in these scripting specific versions ensures that a browser that is not capable of processing the object does not process the code.

One nice feature that Netscape implemented in Navigator 3.x, and I hope it continues to implement with version 4, is the ability to provide overloading of functions based on versions of JavaScript. As an example, I created this test page that splits the functionality completely by JavaScript version. Each version has a function called change_document(). Navigator 2.x and Internet Explorer 3.x will access and execute the script it finds in the topmost “JavaScript” block. Navigator 3.x will go for the section with the <SCRIPT LANGUAGE="JavaScript1.1"> tag.

As I write these words, Navigator 4.0 does not go for the section for JavaScript 1.2, but I will continue to test for this functionality and hope to see this in a future preview release, or the final release. IE 4.0 does execute the script in the JavaScript 1.2 section. Add in a little use of navigator.appName and you can duplicate the functionality created earlier by having the browser execute the right script by default.

Unfortunately, Microsoft does not seem to support the concept of versions with the use of VBScript (if it does, please let me know).

Browser-friendly Web page rulesHere are some good rules of thumb I use when creating browser-friendly Web sites.

1. Know your audience
Most of the people that visit my site are Web page developers, and I can alter and play with the contents knowing that most people viewing my site will be using the newest browsers, and most likely are using Navigator and Internet Explorer. If your Web site is for a bank, or a book company, or other non-computing related company, you may not want to use too much new technology.
2. Make a decision on browser support
After stating rule 1, I will now extend it by saying that you can’t please all the people all the time. You will want to make a decision as to whether the cost of providing support for a specific browser is worth the possible loss of visitors to your site.
3. Integrate new technology unobtrusively
If you create one page for multiple browser/versions, make sure you use technology carefully, and in such a way as to not take from the overall style and meaning of the page. With the example shown in the last section, the page dynamically changes based on the browser, but the overall content (what there is of it) is not changed. Reserve your wilder instincts for special fun pages and then implement the first technique given in this article to load browser specific pages.
4. Always provide at least one text based page for your site, if not for each Web page
On pages where navigation is crucial, make sure you offer text-only links for users of obscure or non-graphical browsers, such as Lynx. Again, though, balance this with your known audience.
5. Be aware of those with special physical challenges
Do not use image maps without providing a text-based menu. Always provide an ALT property for any images you use. Do not rely on the newer technologies as the only method for communicating an idea, a product, a service, or for site navigation.
6. Test your Web pages with your target browsers and versions
Once you decide which browsers and versions you are supporting, always test your Web pages with all of them. This may mean you have to use multiple machines, or a system with dual-booting operating systems.
7. Have fun
If you find yourself becoming incredibly frustrated with trying to get something that works easily with one browser or version, to work with another, you might want to stop, walk away, take a break and then try approaching your scripting challenge from a different perspective. If something will not work, then find what does work and find a way to apply it to your current problem.

Happy scripting!


HTML Tables Tips and Techniques

Don’t shoot me for using HTML tables for formatting the page. This was the standard of the time.

An HTML table is more than a technique to throw a bar around some text; it can also be used to finely control the appearance of your entire page.

To start, we’ll create a table that is about the most basic table there is.

This is the header
This is the data

The table does not use any of the attributes that one can use with the table, row, header, or data definitions. It uses the defaults for each. Now, to create a table that is a little more interesting, lets add a border to the table and a little spacing:

This is the header
This is the data

A table with only one column is helpful, but lets add a second column and increase the width of the table to be equal to 60% of the window width, regardless of whatever the width is:

This is the header The Second header
This is the data The Second set of data

I don’t know about all of you, but I like a little color so lets add color to the whole table:

This is the header The Second header
This is the data The Second set of data

This might be a bit too much color. Why don’t we change the table to a nice gray background, and the headers to the bright red color:

This is the header The Second header
This is the data The Second set of data

Now, if you are using Internet Explorer 3.x you will be able to see that the following table actually uses an image as the background in the headers. If you are using Netscape or other table compliant browser, you will continue to see the red background color.

This is the header The Second header
This is the data The Second set of data

Now, let’s try making the table header stretch across both columns with the “colspan” attribute:

This is the header
This is the data The Second set of data

You can also make data occupy more than one row as the next table demonstrates:

This is the header
This is the big data The Second set of data
Third set of data

You can also color the borders of the table:

This is the header
This is the big data The Second set of data
Third set of data

Maybe we’ll say we can…and don’t. Finally, you can nest tables within tables:

This is the header
This is the big data The Second set of data
Third set of data

You can use tables to format your entire HTML page. The main YASD page makes use of table rowspan, background colors and images, and nested tables to present a page that combines the effective use of white space and content (at least, we hope it’s effective). Most of the pages located on this site use tables to manage the menu bar that is located at the top of the page as shown in the Samples main page.

Tables can be used to format a group of objects as shown at the GotaSee site. Tables can also be used as a sidebar in an online article, as shown in Page1-4 of the City Zoo Scenario.

Tables can even be used to frame a graphic as shown in the Main page. Look at the Finalist graphic at the bottom of the page and you will see an example of this technique.

All in all, the most useful HTML tag after those for images and hypertext links, is the table.

Scenario: Internet Zoo

Page and source archived at Wayback Machine. Note, background images were cool in 1997. As for the comment, “The system needs little in the way of security and will reside on a machine totally isolated from any other system”, well, all I can say is those were the days.

The Scenario is a non-profit organization, a mythical city zoo. It represents an online web application that displays static HTML pages and provides for simple queries to a database. No online ordering is occurring, no updates are being made to a database, and no persistent information needs to be maintained between the pages.

This scenario assumes that the organization has not installed a web server. Based on this, this section, and the ones to follow, provide the steps needed to obtain a domain, set up communication protocols, prepare the computer and install and configure the web server.

The system needs little in the way of security and will reside on a machine totally isolated from any other system.

Note that the examples for this approach use Java classes that are not built into the browser, or the standard Sun class library. If you do not have these classes installed on your local machine, they will be downloaded from this server. And this server is not the speediest in the world. What I am trying to say is “Yes. Do take up knitting.”.

Source Code

The source code for the examples in this scenario can be downloaded from this page. Note, though. that the code is not supported by the author, and the author is not responsible for problems that might arise from the download. Now, on that cheerful note (and I am sure you all are breathless with anticipation about the download), grab your source: