A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side...
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s. The term cross-browser is often confused with multi-browser. Multi-browser is a new paradigm in web development
Web development
Web development is a broad term for the work involved in developing a web site for the Internet or an intranet . This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development...
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
to provide more functionality over several web browsers, while ensuring that the website
Website
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
is accessible to the largest possible audience without any loss in performance. Cross-browser capability allows a website
Website
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
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
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
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
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
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.
Background
The history of cross-browser is involved with the history of the "browser wars
Browser wars
Browser wars is a metaphorical term that refers to competitions for dominance in usage share in the web browser marketplace. The term is often used to denote two specific rivalries: the competition that saw Microsoft's Internet Explorer replace Netscape's Navigator as the dominant browser during...
Netscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...
and Microsoft Internet Explorer as well as with that of JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
JScript is a scripting language based on the ECMAScript standard that is used in Microsoft's Internet Explorer.JScript is implemented as a Windows Script engine. This means that it can be "plugged in" to any application that supports Windows Script, such as Internet Explorer, Active Server Pages,...
, the first scripting languages to be implemented in the web browsers. Netscape Navigator
Netscape Navigator
Netscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...
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.
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C), founded in 1994 to promote open standards for the World Wide Web
World Wide Web
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet...
Netscape Communications is a US computer services company, best known for Netscape Navigator, its web browser. When it was an independent company, its headquarters were in Mountain View, California...
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
together with other companies to develop a standard for browser scripting languages called "ECMAScript
ECMAScript
ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...
". The first version of the standard was published in 1997. Subsequent releases of JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
JScript is a scripting language based on the ECMAScript standard that is used in Microsoft's Internet Explorer.JScript is implemented as a Windows Script engine. This means that it can be "plugged in" to any application that supports Windows Script, such as Internet Explorer, Active Server Pages,...
ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...
standard for greater cross-browser compatibility. After the standardization of ECMAScript
ECMAScript
ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
(DOM), which is a way of representing and interacting with objects in HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
Extensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
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
XML
Extensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
. 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
Opera
Opera is an art form in which singers and musicians perform a dramatic work combining text and musical score, usually in a theatrical setting. Opera incorporates many of the elements of spoken theatre, such as acting, scenery, and costumes and sometimes includes dance...
A safari is an overland journey, usually a trip by tourists to Africa. Traditionally, the term is used for a big-game hunt, but today the term often refers to a trip taken not for the purposes of hunting, but to observe and photograph animals and other wildlife.-Etymology:Entering the English...
SeaMonkey is a free and open source cross-platform Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code...
Camino is a free, open source, GUI-based Web browser based on Mozilla's Gecko layout engine and specifically designed for the Mac OS X operating system...
Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
KHTML is the HTML layout engine developed by the KDE project. It is the engine used by the Konqueror web browser. A forked version of KHTML called WebKit is used by several web browsers, among them Safari and Google Chrome...
Presto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...
Trident 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...
Microsoft Outlook, Internet Explorer, netSmart, MSN, Google Talk
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
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 is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
Open-source software is computer software that is available in source code form: the source code and certain other rights normally reserved for copyright holders are provided under a software license that permits users to study, change, improve and at times also to distribute the software.Open...
The Mozilla Foundation is a non-profit organization that exists to support and provide leadership for the open source Mozilla project. The organization sets the policies that govern development, operates key infrastructure and controls trademarks and other intellectual property...
The Mozilla Corporation is a wholly owned subsidiary of the Mozilla Foundation that coordinates and integrates the development of Internet-related applications such as the Mozilla Firefox and SeaMonkey Navigator web browsers and the Mozilla Thunderbird email client by a growing global community of...
(notably Firefox web browser), as well as in many other open source software projects.
KHTML is the HTML layout engine developed by the KDE project. It is the engine used by the Konqueror web browser. A forked version of KHTML called WebKit is used by several web browsers, among them Safari and Google Chrome...
KHTML is the HTML layout engine developed by the KDE
KDE
KDE is an international free software community producing an integrated set of cross-platform applications designed to run on Linux, FreeBSD, Microsoft Windows, Solaris and Mac OS X systems...
The GNU Lesser General Public License or LGPL is a free software license published by the Free Software Foundation . It was designed as a compromise between the strong-copyleft GNU General Public License or GPL and permissive licenses such as the BSD licenses and the MIT License...
, It is the engine used by the Konqueror web browser.
Presto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...
Opera is an art form in which singers and musicians perform a dramatic work combining text and musical score, usually in a theatrical setting. Opera incorporates many of the elements of spoken theatre, such as acting, scenery, and costumes and sometimes includes dance...
Opera Software ASA is a Norwegian software company, primarily known for its Opera family of web browsers with over 220 million users worldwide. Opera Software is also involved in promoting Web standards through participation in the W3C. The company has its headquarters in Oslo, Norway and is...
. 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 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...
Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
. 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 is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...
WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
, respectively 14% and 6% use in December 2010 used web browsers. WebKit was originally created as a fork of KHTML
KHTML
KHTML is the HTML layout engine developed by the KDE project. It is the engine used by the Konqueror web browser. A forked version of KHTML called WebKit is used by several web browsers, among them Safari and Google Chrome...
as the layout engine for Apple's Safari; it is portable to many other computing platforms. Mac OS X
Mac OS X
Mac OS X is a series of Unix-based operating systems and graphical user interfaces developed, marketed, and sold by Apple Inc. Since 2002, has been included with all new Macintosh computer systems...
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
are supported by the project. WebKit's WebCore and JavaScriptCore components are available under the GNU Lesser General Public License
GNU Lesser General Public License
The GNU Lesser General Public License or LGPL is a free software license published by the Free Software Foundation . It was designed as a compromise between the strong-copyleft GNU General Public License or GPL and permissive licenses such as the BSD licenses and the MIT 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
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
. 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 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 World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
Mozilla is a term used in a number of ways in relation to the Mozilla.org project and the Mozilla Foundation, their defunct commercial predecessor Netscape Communications Corporation, and their related application software....
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
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
XMLHttpRequest
XMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
object for asynchronous communication and works in Mozilla
Mozilla
Mozilla is a term used in a number of ways in relation to the Mozilla.org project and the Mozilla Foundation, their defunct commercial predecessor Netscape Communications Corporation, and their related application software....
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
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
The firebug, Pyrrhocoris apterus, is a common insect of the family Pyrrhocoridae. Easily recognizable due to its striking red and black colouration, it is distributed throughout the Palaearctic from the Atlantic coast of Europe to northwest China. It has also been reported from the USA, Central...
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
Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language . It also provides a test domain-specific language to write tests in a number of popular programming languages, including...
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
Firebug
The firebug, Pyrrhocoris apterus, is a common insect of the family Pyrrhocoridae. Easily recognizable due to its striking red and black colouration, it is distributed throughout the Palaearctic from the Atlantic coast of Europe to northwest China. It has also been reported from the USA, Central...
-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
The source of this article is wikipedia, the free encyclopedia. The text of this article is licensed under the GFDL.
