Cross-browser

Encyclopedia : C : CR : CRO : Cross-browser

Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support multiple web browsers.

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:

<div id="sample" style="position : absolute; top : 100px; left : 100px;">some text</div>

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 to the W3C standard:

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

External links

[QuirksMode] — differences in modern web browsers, and some ways to get around them
[X] — a [cross-browser] Javascript library with many demos.
[Crosscheck] — a Javascript unit-testing framework which simulates the browser environments for a variety of platforms.

From Wikipedia, the Free Encyclopedia. Original article here. Support Wikipedia by contributing or donating.
All text is available under the terms of the GNU Free Documentation License See Wikipedia Copyrights for details.