Cross-browser

Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. The term cross-browser is often confused with multi-browser. Multi-browser is a new paradigm in web development that allows a website or web application to provide more functionality over several web browsers, while ensuring that the website or web application is accessible to the largest possible audience without any loss in performance. Cross-browser capability allows a website or web application to be properly rendered by all browsers. The term cross-browser has existed since the web development began.

The term is still in use, 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, Google Chrome 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.

History

Background

The history of cross-browser is involved with the history of the "browser wars" in the late 1990s between Netscape Navigator and Microsoft Internet Explorer as well as with that of JavaScript and JScript, the first scripting languages to be implemented in the web browsers. Netscape Navigator was the most widely used web browser at that time and Microsoft had licensed Mosaic to create Internet Explorer 1.0. New versions of Netscape Navigator and Internet Explorer were released at a rapid pace over the following few years. Due to the intense competition in the web browser market, the development of these browsers were fast-paced and new features were added without any coordination between vendors. The introduction of new features often took priority over bug fixes, resulting in unstable browsers, fickle web standards compliance, frequent crashes and many security holes.

Creation of W3C and Web Standardization

The World Wide Web Consortium (W3C), founded in 1994 to promote open standards for the World Wide Web, pulled Netscape and Microsoft together with other companies to develop a standard for browser scripting languages called "ECMAScript". The first version of the standard was published in 1997. Subsequent releases of JavaScript and JScript would implement the ECMAScript standard for greater cross-browser compatibility. After the standardization of ECMAScript, W3C began work on the standardization of Document Object Model (DOM), which is a way of representing and interacting with objects in HTML, XHTML and XML documents. DOM Level 0 and DOM Level 1 were introduced in 1996 and 1997. Only limited supports of these were implemented by the browsers, as a result, non-conformant browsers such as Internet Explorer 4.x and Netscape 4.x were still widely used as late as 2000. DOM Standardization became popular since the introduction of DOM Level 2, which was published in 2000. It introduced the "getElementById" function as well as an event model and support for XML namespaces and CSS. DOM Level 3, the current release of the DOM specification, published in April 2004, added support for XPath and keyboard event handling, as well as an interface for serializing documents as XML. By 2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers, including Microsoft Internet Explorer, Opera, Safari and Gecko-based browsers (like Firefox, SeaMonkey and Camino).

Comparison of layout Engines

Layout Engine	Browser
Gecko	Firefox, Camino, SeaMonkey, Thunderbird, K-Meloeon
KHTML	Konqueror
Presto	Opera, Nintendo Browser
Trident	Microsoft Outlook, Internet Explorer, netSmart, MSN, Google Talk
WebKit	Chrome, Safari

A layout engine or rendering engine, is a software component that takes web contents (such as HTML, XML, image files, etc.) and formatting information (Such as CSS, XSL, etc) and displays the formatted content on the screen. The different layout engines implement the DOM standards to varying degrees of compliance.

Gecko

Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation (notably Firefox web browser), as well as in many other open source software projects.

KHTML

KHTML is the HTML layout engine developed by the KDE project. Distributed under the terms of the GNU Lesser General Public License, It is the engine used by the Konqueror web browser.

Presto

Presto is a layout engine for the Opera web browser developed by Opera Software. It is available only as a part of Opera browser or related products. The source or binary (DLL) forms of the engine are not publicly available.

Trident

Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4.0 in October 1997; it has been steadily upgraded and remains in use today.

WebKit

WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple's Safari, respectively 14% and 6% use in December 2010 used web browsers. WebKit was originally created as a fork of KHTML as the layout engine for Apple's Safari; it is portable to many other computing platforms. Mac OS X and Windows are supported by the project. WebKit's WebCore and JavaScriptCore components are available under the GNU Lesser General Public License, and the rest of WebKit is available under a BSD license

Example of cross-browser coding

To follow this example, you must have 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>

Software Testing portal

The code describes a block of text, which should be displayed 100 pixels from the top and to the right 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 could be 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';

In order to access CSS float property, in Firefox browser, you would use the following JavaScript code:

document.getElementById("sample").style.cssFloat = "right"; 

To accomplish the same thing in Internet Explorer you need to do this:

document.getElementById("sample").style.styleFloat = "right";

To access the “class” attribute of an element in Firefox browser, you would use the following JavaScript code:

var obj = document.getElementById("sample");   
var attr = obj.getAttribute("class");  

To accomplish the same thing in Internet Explorer you need to do this:

var obj = document.getElementById("sample");   
var attr = obj.getAttribute("className");  

To receive the x,y coordinates of cursor position in Firefox browser, you would use the following JavaScript code:

var posX = event.pageX;
var posY = event.pageY;  

To accomplish the same thing in Internet Explorer you need to do this:

var posX = event.clientX;   
var posY = event.clientY; 

The following function can be used to create XMLHttpRequest object for asynchronous communication and works in Mozilla browsers, recent versions of Internet Explorer and various other recent browsers that comply with the W3C standard:

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();     
    }
}

External links

• QuirksMode — differences in modern web browsers, and some ways to get around them
• X — a cross-browser Javascript library with many demos.
• Adobe BrowserLab — Cross-browser testing and diagnostics, integrated with Firebug and Dreamweaver.
• browsershots.org — Free open source resource to see how a web site is displayed in different browsers.
• Cross-Browser — Free Cross browser sreenshot service running on Google Appengine
• Sauce Labs — A cloud-based service to cross-browser test websites automatically with Selenium_(software) and manually with standard debuggers.
• BrowserStack — An online way to test websites across all browsers with pre-installed debugging tools.
• Multibrowser — Cross browser testing and development software, containing native browsers and Firebug-like tools
• Multi-Browser Viewer — Cross browser testing software that allows you to run different browsers on the same machine
• BrowserSeal — Cross browser sreenshot application with standalone versions of all major browsers
• Google Cross Browser FAQ's — Google's official cross browser FAQ's with regards to Google Chrome browser