Cross Browser Compatibility

Our next topic, Drag and Drop, requires an understanding of how to deal with browsers that do not meet the W3C recommendations, particularly IE.

Often to write a page, that is cross browser compatible, we need two bits of code.
One for the W3C compliant browsers, such as Firefox and one for IE.

We also need a way to determine which browser is running so we know which bit of code to use.

This is called Browser Sniffing and uses a technique called Forking.
We can use object detection to determine which fork in the code to take.

For example the document.all object exists in IE dom but not the W3C/Firefox dom.
So we can write a javascript if statement - if (document.all).
If this object exists the browser is IE otherwise we are using some other browser such as Firefox.

Here is the psuedo-code
if(document.all){run IE code}
else {run firefox code}

Old cross browser example Examine the source code of this example

There are other more sophisticated techniques that can be used, one of which is called Syntax Patching

Syntax Patching is a technique that builds one piece of code that works in both browsers.
It also uses forking and the javascript function eval().

Syntax Patching assigns the different pieces of code to identically named variables.
It builds commands by concatenating these variables together with common strings.
Finally it uses the javascript eval() function to create the code.

To gain a clearer understanding of Syntax Patching it is easier to look at an example.
Here we use syntax patching to hide and show an image in both Netscape 4.7 and IE.

Syntax Patching View it, then examine the code.

As the Event models for IE and Firefox are different to Drag and Drop we must use one of these techniques.