Blog of Steve Savage A blog for business analysts and architects, and fellow user's of Sparx's EA

Hiding javascript from older browsers

Problem addressed

Hiding JavaScript from older browsers to prevent browser errors, and browser crashes using Google Analytics JavaScript as an example.

Solution

There are several possible approaches, but the only one I trust is object/function detection combined with try and catch:

1. use if(functionName) to determine if the browser supports the function. Please not that function names are case sensitive (e.g. getElementByID is not the same as getElementById)
2. unfortunately Netscape 4.x will return true even if the function doesn't exist, so you need to explictily check to see if the browser is Netscape 4.x using if(document.layer). Luckily Netscape 4.x is the only browser that supports this function.
3. use a try {} catch {} statement to determine if a built in constant (e.g. undefined) is supported.
4. unfortunately not all browsers support try / catch, but any browser that supports getElementById() does, so you can use if(getElmenentById) as your check before your try and catch statement.
5. unfortunately IE 4.x doesn't support try / catch and parses all JavaScript event if it doesn't execute it (IE 4.x doesn't support getElementById), so it will
   throw an error when it reaches the try / catch statements, so you need to hide the try / catch statements from IE 4.x inside the eval() function

The following example shows how I put the above techniques in place to hide Google Analytics JavaScript from older browsers (crashed Netscape 4.x, threw an error for IE 4.x and 5.x):

01 <script type="text/javascript">
02 //<![CDATA[
03	var b_undefined_keyword_supported = false;
04  if(document.getElementById&&!document.layer) {
05   b_undefined_keyword_supported = true;
06   eval("try { var b_test = undefined; }
	catch (err)
	{ b_undefined_keyword_supported = false;}");
07  }
08  // google scripts
09  if(b_undefined_keyword_supported) {
10   var gaJsHost = (("https:" ==
	document.location.protocol) ? "https://ssl."
	: "http://www.");
11   document.write(unescape("%3Cscript src='"
	+ gaJsHost + "google-analytics.com/ga.js'
	type='text/javascript'%3E%3C/script%3E"));
12  }
13 //]]>
14 </script>
15 <script type="text/javascript">
16 //<![CDATA[
17  if(b_undefined_keyword_supported) {
18   var pageTracker = _gat._getTracker("UA-4725824-1");
19   pageTracker._initData();
20   pageTracker._trackPageview();
21  }
22 //]]>
23 </script>

• 02: CData - see using XHTML with older browsers for details
• 03: the main problem is googles use of the keyword undefined that isn't supported by older browsers
• 04: use the document.getElementById check to see if the browser supports the try / catch statement, combined with the !document.layer check to make sure the current browser isn't Netscape 4.x
• 05: the majority of browsers that support getElementById also support the undefined keyword with the known exception of IE 5.x
• 06: use the try / catch statement hidden inside of an eval function to see if the browser supports the keyword
• 07: if the keyword is supported load the script
• 09: if the keyword is supported run the script

Background

As part of redeveloping my site I decided to install
Google Analytics to gather addtional information about the users accessing my site.

Based on my analysis of the browsers still used on the net I decided to test my site under Netscape 4.x+ and IE 4.x+, and found that the Google scripts crashed Netscape 4.x and caused JavaScript errors in IE 4.x and IE 5.x,
so I dug up my old page on using object detection in JavaScript, and updated it to the current page.

IE Wierdness: Box Model problem in Windows Internet Explorer (IE)

Problem addressed

The handling of borders and margins in Windows Internet Explorer (IE), known as the Box Model Problem

Solution

This problem has been fixed for Windows IE 7.0

1. Include <?xml version="1.0" encoding="UTF-8"?> as the first line in your documents. This is recommended by the W3C and will force IE 6 in to
   quirksmode, so that it will behave the same way as previous versions of IE (reducing the amount of work you need to do).
2. Create a stylesheet for IE 4.x to 6.x browsers modifing the width and height of boxes to include the width of margins and borders.
3. Use my browser specific stylesheets method to target the quirky stylesheets to the supported browsers.

What is Quirks Mode?

Holly Bergevin and John Gallant have written an excellent article explaining Doctypes, Standards, and Quirks mode

Background

This one drove me crazy when I was first learning CSS.
WIN IE 4.x, 5.x and 6.x in quirksmode
places borders and margins on the inside of an elements "box", where "Standard"
browsers (basically everything else) place them on the outside.

So an element set to 100px wide with a margin, and border stays 100px wide with the margin and borders placed inside the box.
Everything else gets a width of: 100px + margin width * 2 + border width *2.
Same goes for height. You can see the problem.

I decided to use conditional comments in my browser specific stylesheets method instead of
relying on css hacks to minimize future compatibility issues.