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.

Creating XHTML complient downlevel-revealed conditional comments

Problem addressed

Downlevel-revealed conditional comments do not validate

Solution

Wrap the downlevel-revealed tags (visible to non-WIN IE browsers) in downlevel-hidden start and end tags (treated as comments by non-WIN IE browsers) to hide them from validators

<!--[if IE]><![if !IE]><![endif]-->
	Hidden from IE
<!--[if IE]><![endif]><![endif]-->

Treated the same in IE as:

<![if !IE]>
	Hidden from IE
<![endif]>

Background

Supported by WIN IE 5.x +,
I mainly use this to target code/css to specific versions of WIN IE.

I currently use
downlevel-hidden conditional comments
for my browser specific style sheets.

I prefer conditional comments to the popular but
problematic css hack filters that
rely on browser bugs that may or may not get fixed.

Fixed Positioning in IE

Problem addressed

Fixed positioning is not supported in WIN IE

Solution

This has been fixed in IE 7, so this solution is only necessary if you need/wish to support older versions of WIN IE.

CSS

/* turn off scrolling for the body of the document */
	html, body {overflow:hidden;height:100%;}

/* create a document box to allow the
	fixed positioning of the layers, you don't have
	to follow my naming convention */
  div##sltDocument{position:absolute;
	top:0px;left:0px;
	height:100%;width:100%;
	overflow:auto;z-index:1;}
/* create the fixed layer that will sit
	on top of or underneath the document box */
  div##sltFixed{position:absolute;
	top:0px;left:0px;
	height:40px;width:50px;z-index:2;}

HTML

<body>
  <sltDocument>
    Content and non-fixed portion of the layout goes here.
  </sltDocument>
  <sltFixed>
    This layer will stay "fixed" in place.
  </sltFixed>
</body>

Known Issues

The "fixed" layer will cover your pages scroll bars, if you align it right, or width 100%.

Background

There are five values for positioning using CSS2:
position:inherit, position:static,
position:relative, position:absolute, and position:fixed.

Unfortunately IE 6.x does not support position:fixed,
in fact WIN IE 5.0 will choke if you use position:fixed in a style sheet it can read.
But there is a way to emulate the effect of position:fixed using WIN IE proprietary features inside a
WIN IE specific style sheet:

Display of unformatted html in Internet Explorer

Problem addressed

Flash of unformated content when WIN IE is loading a page

Solution

1. Use <link href="..." rel="stylesheet" type="text/css" /> instead of
   @import in the head of your document.
   Using @import within an external stylesheet
   to import additional stylesheets does not seem to cause any problems.

2. The existence of a <script> element (empty will do) inside of the document's
   head will prevent the flash of unstyled content.

I prefer the first option with the additional use of IE conditional comments to prevent the flash,
and to provide a browser specific stylesheet for WIN IE 5+.

Background

WIN IE has an annoying bug that causes the browser to start displaying a document before it has finished
loading all the applicable CSS, causing the page to start being displayed, before it has been formatted.
But there are a few simple ways to stop that flashed display of unformatted content.