Cross-browser

From Wikipedia, the free encyclopedia

Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all web browsers. The term cross-browser is often confused with multi-browser. Multi-browser means something works with several web browsers. Cross-browser means something works with all version of all browser to have existed since the web began.

The term was widely used during the browser wars in late-1990s. In that context, the term referred to websites and code snippets that worked in both Internet Explorer and Netscape Navigator. During the browser wars, new features were added to browsers without any coordination between vendors. Thus it often happened that though both browsers supported some particular feature, there were differences in the way the feature worked, ranging from slight cosmetic issues to profound conceptual differences.

The term is still in use (as of 2005), but to lesser extent. The main reasons for this are:

• Later versions of both Internet Explorer and Netscape included support for HTML 4.0 and CSS1, proprietary extensions were no longer required to accomplish many commonly desired designs.
• Somewhat more compatible DOM manipulation techniques became the preferred method for writing client-side scripts.
• The browser market has broadened, and to claim cross-browser compatibility, the website is nowadays expected to support browsers such as Mozilla Firefox, Opera, and Safari in addition to Internet Explorer and Netscape.
• There has been an attitude shift towards more compatibility in general. Thus, some degree of cross-browser support is expected and only its absence needs to be noted.

Example of cross-browser coding

To follow this example, you may need basic knowledge of HTML and JavaScript. Consider this snippet of HTML code:

The code describes a block of text, which should be displayed 100 pixels from the top and to the left from the top-left corner of the browser window. In a Netscape Navigator 4 -series browser, you would move it right with the following JavaScript code:

document.layers['sample'].left = 200;  

However, to accomplish the same thing in Internet Explorer 4 you need to do this:

document.all['sample'].style.left = 200;  

In order for the code to work in both browsers and thus be cross-browser compatible, it needs to written like this:

if (document.all) 
 document.all['sample'].style.left = 200;
else if (document.layers) 
 document.layers['sample'].left = 200;  

The following code that uses W3C standard DOM method works in Mozilla browsers, recent versions of Internet Explorer and various other recent browsers that comply with the W3C standard:

document.getElementById('sample').style.left = '200px';