Web School

cross browser scripting

Guidelines			HTML			CSS			Scripting
DHTML			Cross Browser			Fun Scripts

Web development is often considered a pretend language. When given the limitations of what can be achieved in coding for what can be viewed on a web browser this can even make sense to those that do application programming. However, the usual difference between application programming and web development is the number of platforms the code is written for. Platforms for application programming is usually considered to be the operating system. This also applies to web development. Except it is written for all the different versions of all the different browsers on all the different versions of all the different operatings systems. An exhaustive list at best.

The biggest plus regarding all the possibilities of the different browsers is just a few versions of a few browsers on a few operating systems should pretty much cover your target audience. Many of them also follow the same coding rules. Broken down to the simplest rules there are about only half a dozen differences that need looking at. The following covers the major differences and some ideas on how to deal with them.

Why do I need to know?

There are many different browsers and many of them require different code to achieve the same thing. Therefore, code that you write for one browser may not work on another.

It is not possible to know all the variations for all the browsers. Because of this it may be necessary to exclude some browsers from your list of compatible browsers with your code. Of course nobody wants to do that. And you have to know all the browsers that won't work to be able to exclude them. Which is not possible if you don't know all the avaiable browsers. Instead you should include a list of compatible browsers.

Including specific browsers may exclude browsers that do behave the same (as is sometimes the case). So rather than checking for a specfic browser and writing code for that browser you should check that the syntax of your code will work on the users browser. Because of similarities between many browsers this may by default include other browsers that you were not even aware of.

What do I need to know?

To make it as simple as possible for your coding you need to check first that your code will work in the users browser. This is done by syntax checking. Sometimes though it is important to code more specifically using knowledge you already have. This may require knowing which browser is being used? Finally, knowing the syntax and the browser version may not be enough. There may be differences that require different code purely because they are on different platforms and platform differences come into play that are not even a part of the browser. This is where you might want to look at the differences between PC's and MAC's.

Syntax checking.

There are three common syntax formats that are currently used to access objects on your page.
document.all (commonly known as Internet Explorer detection)
document.layers (commonly known as Netscape 4 and earlier detection)
document.getElementById (commonly used for Netscape 6 but can include Internet Explorer 5 and later)

Because it is commonly considered checking for Internet Explorer support a scripting variable assigned to checking for document.all is often a reference to IE. It is not code checking for Internet Explorer though but rather a syntax that Internet Explorer supports. Code to use for this check could be something like:
var isIE = (document.all) ? true:false;
This gives a true value to the variable isIE and can then be used throughout your code with
if (isIE) {your code goes here}

Commonly used for checking for Netscape is the code document.layers which again is actually syntax checking and not browser checking. Netscape is one of the few, if not only, browsers that supports document.layers so is very frequently used as Netscape detection. Unfortunately (or maybe not) Netscape 6 has dropped support for this syntax so therefore it does not determine the browser as Netscape. Code used for this syntax support could be something like:
var isNS4 = (document.layers) ? true:false;

Internet Explorer supports document.all and Netscape 6 supports document.getElementById. Internet Explorer 5 and above also supports document.getElementById. Using the document.all code will work for all Internet Explorer versions so it is often easier to exclude it from the same catagory as Netscape 6 by using syntax checking something like:
var isNS6 = (document.getElementById&&!document.all) ? true:false;
This checks that document.getElementById is supported and document.all is not. And therefore commonly used to check for Netscape 6 support.

Putting all of this in context could result in code similar to:
var isIE = (document.all) ? true:false;
This will return the value on your current browser as
var isNS4 = (document.layers) ? true:false;
This will return the value on your current browser as
var isNS6 = (document.getElementById&&!document.all) ? true:false;
This will return the value on your current browser as
if (isIE) {document.all code goes here}
else if (isNS4) {document.layers code goes here}
else if (isNS6) {document.getElementByID code goes here}

Which browser is being used?

Sometimes it is necessary to know exactly which browser is being used. JavaScript has an object called navigator which can return a number of elements to help you determine what the user is using to view your page.

The syntax for using the navigator object is navigator.element_to_check.

To see the name of the browser is as simple as navigator.appName (remember that JavaScript is case sensitive) and on your browser returns the value:

The navigator object has a lot of elements. Not all browsers support all elements. Sometimes the result will be undefined. This is because either the browser doesn't support that element or it can not find a result. Other times it may return nothing or null.
Below is the syntax for checking each element and the result on your browser:
navigator.appCodeName:
navigator.appVersion:
navigator.appMinorVersion:
navigator.cookieEnabled:
navigator.javaEnabled():
navigator.taintEnabled():
navigator.onLine:
navigator.language:
navigator.browserLanguage:
navigator.userlanguage:
navigator.systemLanguage:
navigator.platform:
navigator.userAgent:
navigator.userprofile:
navigator.systemTime:
navigator.cpuClass:
navigator.opsProfile:
navigator.mimeTypes:
navigator.plugins:

The last two are arrays that have elements within them. If the length of these arrays are greater than 0 then a list of the elements can be seen by clicking on the links below.
navigator.mimeTypes.length:
navigator.plugins.length:

Differences between PC's and MAC's

You now know what browser is being used and maybe even which version it is. You also know what syntax is supported by the users browser. There is one more thing that is encountered regularly enough to consider thinking about. The platform!

Currently (August, 2001) the number of PC users on the Internet is supposedly in excess of 80%. If close to 20% are using the next most common platform, Mac's, then one in five users can be considered a reasonable amount so including code for this issue may be necessary.

The navigator element for this is platform. The syntax is navigator.platform and will return a value something like: .

Often if you use a PC you will not have access to a Mac and vica-verca. The above result is the platform you are using.
For a Mac the result may be something like: MacPPC (Mac Power PC).
On a PC the result may be something like: Win32 (Windows 9x or NT based).

What does it all mean?

All this information may be confusing. Because it is sometimes important to know certain information below is an explanation of some of the more likely to be used elements. Some of the elements have more information than we need so there is also an explanation on how to extract some of the more important information.

The majority of users are either using Internet Explorer or Netscape and are on either PC's using Windows 95 or later (including NT4 and later) or Macintosh Power PC's. For that reason the following information is limited to those details. If you need details on other operating systems, browsers, and platforms then you will need to test the navigator variables on them yourself. This page should give you all the information you need if opened on the browser, operating system, and platform you want to know about.

The first check is navigator.appName and will return Microsoft Internet Explorer for Internet Explorer and Netscape for Netscape. If you are using JavaScript queries to test these values remember that JavaScript is case sensitive.

Sometimes you might know earlier or later than a certain browser version does or doesn't do what you want or requires specific code. Or even a specific version of a browser requires specific code. You might think that navigator.appVersion will get you the information you need. And it does. However, depending on what the browser is depends on how you need to deal with the value returned by that query.

Netscape will return a value something like 4.05 [en] (WinNT; I). To get the version of this browser is easy enough. The major version (being 3, 4, 5, et c.) can be retrieved using the code parseInt(navigator.appVersion) and in this example will return a value of 4. If you want a specific version number then use parseFloat(navigator.appVersion) instead to include the numbers after the decimal point.

Be aware that Netscape 6 returns a major version of 5. Or more specifically, navigator.appVersion returns something like 5.0 (Windows; en-GB).

Internet Explorer will return a value something like 4.0 (compatible; MSIE 5.0; Windows NT; DigExt;). You can't use parseInt or parseFloat on this because it will use the first number (in this example being 4.0). This examples version is in fact 5.0. Internet Explorer will always return MSIE somewhere in the value followed by the version number. So the code to get the version number of Internet Explorer is parseFloat(navigator.appVersion.slice(navigator.appVersion.indexOf("MSIE")+4,navigator.appVersion.length)).

Because of the differences in the browsers it is best to get the name of the browser first and then use that to get the version number. An example of that would be something like:
var browserVersion
var isNetscape = (navigator.appName=="Netscape") ? true:false;
var isInternetExplorer = (navigator.appName=="Microsoft Internet Explorer") ? true:false;
if (isNetscape) {browserVer = parseFloat(navigator.appVersion)}
if (isInternetExplorer) {browserVer = parseFloat(navigator.appVersion.slice(navigator.appVersion.indexOf("MSIE")+4,navigator.appVersion.length))}

Note that parseFloat does not include the numbers after the decimal point if they are 0. This means that both the Netscape 6 and Internet Explorer examples above would return a value of 5 and not 5.0. It would return 4.05 for the Netscape 4 example above.

Conclusion.

As more browsers become available and the ones that have been around for a while continue to evolve into ever "better" versions simple code that once worked in them all is not enough. The new tricks and features available are often either not available for all browsers or are implemented differently. Even the same browsers, just different versions and platforms, can implement tricks and features differently. To master all these tricks and features would take considerable time (more than most have available) but to master reasonably consistant browsers implementations is just a case of knowing how to then detect which implementation to use.

The best advice that can be given is to test for the syntax you are about to use. Only if you know how to deal with the variables returned from the navigator object should you use it.

Useful cross-browsing links

Writing your own code is the best way to learn but it is just as important to get help from those that have already been through it all. The following links are just some of the sites around the web that have invaluable information.

Good DHTML Standards, Practices, and Guidelines according to dij8.
Good Scripting Standards, Practices, and Guidelines according to dij8.
http://browserwatch.internet.com/browsers.html A list of all the browsers.
http://www.gemal.dk/browserspy/spy.html BrowserSpy.