Quirks mode
Encyclopedia
In computing
Computing
Computing is usually defined as the activity of using and improving computer hardware and software. It is the computer-specific part of information technology...

, quirks mode refers to a technique used by some web browser
Web browser
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 for the sake of maintaining backward compatibility
Backward compatibility
In the context of telecommunications and computing, a device or technology is said to be backward or downward compatible if it can work with input generated by an older device...

 with web page
Web page
A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext...

s designed for older browsers, instead of strictly complying with W3C
World Wide Web Consortium
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...

 and IETF
Internet Engineering Task Force
The Internet Engineering Task Force develops and promotes Internet standards, cooperating closely with the W3C and ISO/IEC standards bodies and dealing in particular with standards of the TCP/IP and Internet protocol suite...

 standards in standards mode.

Overview

The structure and appearance of a web page is described by a combination of two standardized languages: HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

, a markup language
Markup language
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...

 designed for web use, which describes the structure and content of the page, and CSS
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

, a generalized stylesheet language, which specifies how the page should be rendered in various media (visual styles for screen display, print styles to use when printing the page, aural styles to use when the page is read aloud by a screen reader
Screen reader
A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen . This interpretation is then re-presented to the user with text-to-speech, sound icons, or a Braille output device...

, etc.). However, most older web browsers either did not fully implement the specifications for these languages or were developed prior to the finalization of the specifications (Microsoft Internet Explorer version 5.0 for the Macintosh
Macintosh
The Macintosh , or Mac, is a series of several lines of personal computers designed, developed, and marketed by Apple Inc. The first Macintosh was introduced by Apple's then-chairman Steve Jobs on January 24, 1984; it was the first commercially successful personal computer to feature a mouse and a...

 platform, released in 2000, was the first major web browser with full support for CSS Level 1, for example). As a result, many older web pages were constructed to rely upon the older browsers' incomplete or incorrect implementations, and will only render as intended when handled by such a browser.

Support for standardized HTML and CSS in major web browsers has improved significantly, but the large body of legacy documents which rely on the quirks of older browsers represents an obstacle for browser developers, who wish to improve their support for standardized HTML and CSS, but also wish to maintain backward compatibility
Backward compatibility
In the context of telecommunications and computing, a device or technology is said to be backward or downward compatible if it can work with input generated by an older device...

 with older, non-standardized pages. Additionally, many new web pages continue to be created in the older fashion, since the compatibility workarounds introduced by browser developers mean that an understanding of standardized methods is not strictly necessary.

To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes: in "standards mode" pages are rendered according to the HTML and CSS specifications, while in "quirks mode" attempts are made to emulate the behavior of older browsers. Some browsers (those based on 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....

's Gecko
Gecko (layout engine)
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....

 rendering engine, or Internet Explorer 8
Internet Explorer 8
Windows Internet Explorer 8 is a web browser developed by Microsoft in the Internet Explorer browser series. The browser was released on March 19, 2009 for Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008, and Windows 7. Both 32-bit and 64-bit builds are available...

 in strict mode, for example) also use an "almost standards" mode which attempts to compromise between the two, implementing one quirk for table cell sizing while otherwise conforming to the specifications.

Mode differences and examples

One prominent difference between quirks and standards modes is the handling of the CSS Internet Explorer box model bug
Internet Explorer box model bug
The Internet Explorer box model bug refers to the way in which earlier versions of Internet Explorer handle the sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets language...

. Before version 6, Internet Explorer used an algorithm for determining the width of an element's box which conflicted with the algorithm detailed in the CSS specification, and due to Internet Explorer's popularity many pages were created which relied upon this incorrect algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in standards mode and uses the previous, non-standard algorithm when rendering in quirks mode.

Another notable difference is the vertical alignment of certain types of inline content; many older browsers aligned images to the bottom border of their containing box, although the CSS specification requires that they be aligned to the baseline of the text within the box. In standards mode, Gecko-based browsers will align to the baseline, and in quirks mode they will align to the bottom.

Additionally, many older browsers did not implement inheritance of font styles within tables; as a result, font styles had to be specified once for the document as a whole, and again for the table, even though the CSS specification requires that font styling be inherited into the table. If the font sizes are specified using relative units, a standards-compliant browser would inherit the base font size, then apply the relative font size within the table: for example, a page which declared a base font size of 80% and a table font size of 80% (to ensure a size of 80% in browsers which do not properly inherit font sizes) would, in a standards-compliant browser, display tables with a font size of 64% (80% of 80%). As a result, browsers typically do not inherit font sizes into tables in quirks mode.

Almost standards mode

A third compatibility mode known as either "almost standards mode" or "strict mode" which maintains the "traditional" vertical sizing of table cells according to the CSS2 specification, has been implemented in these browsers: Safari, Opera 7.5 (and later), all Gecko
Gecko (layout engine)
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....

-based browsers since 1.0.1 (such as Firefox) and Internet Explorer 8.

"Almost standards" mode rendering matches "standards" mode in all details except for one. The layout of images inside table cells is handled the same way "quirks" mode operates, instead, which is fairly consistent with legacy
Legacy system
A legacy system is an old method, technology, computer system, or application program that continues to be used, typically because it still functions for the users' needs, even though newer technology or more efficient methods of performing a task are now available...

 browsers such as Internet Explorer 7 (and earlier). This means that sliced-images-in-tables layouts are less likely to fall apart in browsers when in either "quirks" or "almost standards" mode, rather than "standards" mode.

Triggering different rendering modes

Most often, browsers determine which rendering mode to use based on the presence of a Document Type Declaration
Document Type Declaration
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document with a Document Type Definition...

 in the page; if a full DOCTYPE is present the browser will use standards mode, and if it is absent the browser will use quirks mode. For example, a web page which began with the following DOCTYPE would trigger standards mode:


"http://www.w3.org/TR/html4/strict.dtd">


The following DOCTYPE is syntactically invalid, containing the public identifier keyword "PUBLIC" but no public identifier (indicating the name of the version of HTML in use), and no system identifier URL
Uniform Resource Locator
In computing, a uniform resource locator or universal resource locator is a specific character string that constitutes a reference to an Internet resource....

 of an HTML Document Type Definition
Document Type Definition
Document Type Definition is a set of markup declarations that define a document type for SGML-family markup languages...

. This would trigger quirks mode:





Additionally, a web page which does not include a DOCTYPE at all will render in quirks mode.

One notable exception to this is Microsoft
Microsoft
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...

's Internet Explorer 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...

 browser, which will render a page in quirks mode if the DOCTYPE is preceded by an 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....

 prolog, regardless of whether a full DOCTYPE is specified. Thus an XHTML
XHTML
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....

 page which begins with the following code would be rendered in quirks mode by IE 6:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


The above is useful to an extent as it can be used to trigger quirks mode only in IE 6.

Quirks mode in any version of IE will also be triggered if anything precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:



"http://www.w3.org/TR/html4/strict.dtd">


The problem with the XML declaration was fixed in version 7 of Internet Explorer, in which the XML prolog is simply ignored. However, for maximum compatibility with existing and older web browsers, the World Wide Web Consortium
World Wide Web Consortium
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...

, which maintains the XHTML specification, suggests that authors of XHTML documents could consider omitting the XML declaration.

Comparison of document types

Henri Sivonen compiled a list of various document types and how they are treated in the most common browsers, showing whether pages are rendered in Quirks, Standards, or Almost standards mode. The criterion used for "Almost standards mode" is non-standard table cell height rendering. This table applies to content served with the Content-Type text/html. Content served with the Content-Type application/xhtml+xml is rendered in Standards mode in Chrome, Firefox, Internet Explorer 9, Safari, and Opera. Internet Explorer 6, 7, and 8 do not support Content-Type application/xhtml+xml.
Doctype NS6
Netscape 6
Netscape 6 was the name of Netscape Communications Corporation's proprietary cross-platform internet suite from versions 6.0–6.2.3. It superseded Netscape Communicator 4.8 and was replaced by the simply-named Netscape...

Mozilla
Mozilla Application Suite
The Mozilla Application Suite is a cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It is based on the source code of Netscape Communicator...

 0.9.5-1.0
IE 8+
Internet Explorer 8
Windows Internet Explorer 8 is a web browser developed by Microsoft in the Internet Explorer browser series. The browser was released on March 19, 2009 for Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008, and Windows 7. Both 32-bit and 64-bit builds are available...


Firefox
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
Safari (web browser)
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...


Opera 7.5+
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,...


Netscape 7+
Mozilla 1.0.1+
Konq 3.5+
Konqueror
Not to be confused with the Conqueror web browser.Konqueror is a web browser and file manager that provides file-viewer functionality for file systems such as local files, files on a remote ftp server and files in a disk image. It is a core part of the KDE desktop environment...


HTML5 spec
IE 7
Internet Explorer 7
Windows Internet Explorer 7 is a web browser released by Microsoft in October 2006. Internet Explorer 7 is part of a long line of versions of Internet Explorer and was the first major update to the browser in more than 5 years...


Opera 7.10
IE 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...


Opera 7.0
Mac IE 5
Internet Explorer for Mac
Internet Explorer for Mac was a proprietary web browser developed by Microsoft for the Macintosh platform. Initial versions were developed from the same code base as Internet Explorer for Windows...

Konq 3.2
None Q Q Q Q Q Q Q
HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

 3.2
Q Q Q Q Q Q Q
HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

 4.01
Strict with system identifier
S S S
without system identifier
S S S Q
Transitional with system identifier
S S Q
without system identifier
Q Q Q Q Q Q Q
HTML5
Q S S
XHTML
XHTML
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....

 Basic
with system identifier and without XML declaration
S S S
XHTML
XHTML
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....

 1.0
Strict with system identifier and XML declaration

S S S Q Q
with system identifier and without an XML declaration
S S S
without system identifier and without an XML declaration
S S S
Transitional with system identifier and with XML declaration


S S Q Q
with system identifier and without an XML declaration
S S Q
without system identifier and without an XML declaration
S S
XHTML
XHTML
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....

 1.1
with system identifier and an XML declaration

S S S Q Q
with system identifier and without XML declaration
S S S
Doctype NS6
Netscape 6
Netscape 6 was the name of Netscape Communications Corporation's proprietary cross-platform internet suite from versions 6.0–6.2.3. It superseded Netscape Communicator 4.8 and was replaced by the simply-named Netscape...

Mozilla
Mozilla Application Suite
The Mozilla Application Suite is a cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It is based on the source code of Netscape Communicator...

 0.9.5-1.0
IE 8+
Internet Explorer 8
Windows Internet Explorer 8 is a web browser developed by Microsoft in the Internet Explorer browser series. The browser was released on March 19, 2009 for Windows XP, Windows Server 2003, Windows Vista, Windows Server 2008, and Windows 7. Both 32-bit and 64-bit builds are available...


Firefox
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
Safari (web browser)
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...


Opera 7.5+
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,...


Netscape 7+
Mozilla 1.0.1+
Konq 3.5+
Konqueror
Not to be confused with the Conqueror web browser.Konqueror is a web browser and file manager that provides file-viewer functionality for file systems such as local files, files on a remote ftp server and files in a disk image. It is a core part of the KDE desktop environment...


HTML5 spec
IE 7
Internet Explorer 7
Windows Internet Explorer 7 is a web browser released by Microsoft in October 2006. Internet Explorer 7 is part of a long line of versions of Internet Explorer and was the first major update to the browser in more than 5 years...


Opera 7.10
IE 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...


Opera 7.0
Mac IE 5
Internet Explorer for Mac
Internet Explorer for Mac was a proprietary web browser developed by Microsoft for the Macintosh platform. Initial versions were developed from the same code base as Internet Explorer for Windows...

Konq 3.2

Mode verification

In most browsers, the Document Object Model
Document Object Model
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...

 extension document.compatMode indicates the rendering mode for the current page. In standards mode and almost-standards mode, document.compatMode contains the value "CSS1Compat", while in quirks mode it equals "BackCompat".

Additionally, in Mozilla Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...

 and 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,...

the rendering mode in use for a given page is indicated on the 'Page info' informational box.

External links

The source of this article is wikipedia, the free encyclopedia.  The text of this article is licensed under the GFDL.
 
x
OK