View source for Quirks mode

{{Short description|Technique used by web browsers to maintain backwards compatibility with older web pages}}
{{Html series}}
In [[computing]], '''quirks mode''' is an approach used by [[web browser]]s to maintain [[backward compatibility]] with [[web page]]s designed for old web browsers, instead of strictly complying with web standards in '''standards mode'''. This behavior has since been codified, so what was previously '''standards mode''' is now referred to as simply '''no quirks mode'''.

==Overview==
The structure and appearance of a web page is described by a combination of two standardized languages:
* [[HTML]], a [[markup language]] designed for web use, which describes the structure and content of the page; and
* [[Cascading Style Sheets|CSS]], a generalized [[style sheet (web development)|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]], 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]] platform, released in 2000, was the first major web browser with full support for CSS Level 1, for example).<ref>{{cite web|url=http://www.w3.org/Style/CSS/#browsers|title=Cascading Style Sheets: CSS Browsers|publisher=[[World Wide Web Consortium]]|access-date=27 May 2007|date=19 December 2001}}</ref> 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 increased 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]] 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 "no quirks 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]]'s [[Gecko (layout engine)|Gecko]] rendering engine, or [[Internet Explorer 8]] 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.<ref name="sivonen">{{cite web|url=http://hsivonen.iki.fi/doctype/|title=Activating Browser Modes with Doctype|last=Sivonen|first=Henri|access-date=15 March 2011}}</ref>

==Mode differences and examples==
One prominent difference between quirks and no-quirks modes is the handling of the CSS [[Internet Explorer box model bug]]. 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 non-standard algorithm. As of version 6, Internet Explorer uses the CSS specification's algorithm when rendering in no-quirks mode and uses the previous, non-standard algorithm when rendering in quirks mode. {{citation needed|date=June 2015}}

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 no-quirks mode, [[Gecko (software)|Gecko]]-based browsers will align to the baseline, and in quirks mode they will align to the bottom.<ref>{{cite web|url=https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps|title=Images, Tables, and Mysterious Gaps|publisher=Mozilla Developer Center|access-date=27 May 2007|archive-date=22 May 2017|archive-url=https://web.archive.org/web/20170522085646/https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps|url-status=dead}}</ref>

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.<ref>{{cite web|url=https://developer.mozilla.org/en/docs/Fixing_Table_Inheritance_in_Quirks_Mode|title=Fixing Table Inheritance in Quirks Mode|publisher=Mozilla Developer Center|access-date=27 May 2007|archive-date=3 March 2016|archive-url=https://web.archive.org/web/20160303205342/https://developer.mozilla.org/en/docs/Fixing_Table_Inheritance_in_Quirks_Mode|url-status=dead}}</ref>

===Limited quirks mode===
A third compatibility mode known as "limited quirks mode" (previously, "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 (web browser)|Safari]], [[Opera (web browser)|Opera]] 7.5 (and later), all [[Gecko (layout engine)|Gecko]]-based browsers since 1.0.1 (such as [[Firefox]]) and [[Internet Explorer 8]].<ref name="sivonen" />

"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 system|legacy]] 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.<ref>{{cite web|url=https://developer.mozilla.org/en/docs/Gecko's_%22Almost_Standards%22_Mode|title=Gecko's "Almost Standards" Mode|publisher=Mozilla Developer Center|access-date=27 May 2007|url-status=dead|archive-url=https://web.archive.org/web/20040603172205/http://devedge.netscape.com/viewsource/2002/almost-standards/|archive-date=3 June 2004}}</ref>

==Triggering different rendering modes==
Most often, browsers determine which rendering mode to use based on the presence of a [[Document Type Declaration]] in the page; if a full DOCTYPE is present the browser will use no-quirks 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 no-quirks mode:

<syntaxhighlight lang="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</syntaxhighlight>

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 [[Uniform Resource Locator|URL]] of an HTML [[Document Type Definition]]. This would trigger quirks mode:

<syntaxhighlight lang="html">
<!DOCTYPE html PUBLIC>
</syntaxhighlight>

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

One notable exception to this is [[Microsoft]]'s [[Internet Explorer 6]] browser, which will render a page in quirks mode if the DOCTYPE is preceded by an [[XML]] prolog, regardless of whether a full DOCTYPE is specified. Thus an [[XHTML]] page which begins with the following code would be rendered in quirks mode by IE 6:

<syntaxhighlight lang="html">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</syntaxhighlight>

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, space or any tag before the DOCTYPE declaration, IE will use quirks mode:

<syntaxhighlight lang="html">
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</syntaxhighlight>

The problem with the XML declaration was fixed in version 7 of Internet Explorer, in which the XML prolog is simply ignored.<ref>{{cite web|url=http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx|title=The <?xml> prolog, strict mode, and XHTML in IE|last=Wilson|first=Chris|work=IEBlog|publisher=[[Microsoft Developer Network|MSDN]]|access-date=27 May 2007|date=15 August 2005}}</ref> However, for maximum compatibility with existing and older web browsers, the [[World Wide Web Consortium]], which maintains the XHTML specification, suggests that authors of XHTML documents could consider omitting the XML declaration.<ref>{{cite web
|url=http://www.w3.org/TR/xhtml1/#guidelines
|title=HTML Compatibility Guidelines
|work=XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)
|publisher=[[World Wide Web Consortium]]
|date=1 August 2002
|access-date=14 February 2009
}}</ref>

===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 '''Q'''uirks, '''S'''tandards, or '''A'''lmost 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.<ref name="sivonen" />

{| class="wikitable" style="font-size: 0.95em; text-align: center; width: auto;"
|-
! colspan="2" | Doctype
! style="width:5%" | [[Netscape 6|NS6]]
! style="width:5%" | [[Mozilla Application Suite|Mozilla]] 0.9.5-1.0
! style="width:10%" | [[Internet Explorer 8|IE 8+]]<br />[[Firefox]]<br/>[[Google Chrome|Chrome]]<br />[[Safari (web browser)|Safari]]<br />[[Opera (web browser)|Opera 7.5+]]<br />Netscape 7+<br/>Mozilla 1.0.1+<br />[[Konqueror|Konq 3.5+]]<br />[[HTML5]] spec
! style="width:5%" | [[Internet Explorer 7|IE 7]]<br />Opera 7.10
! style="width:5%" | [[Internet Explorer 6|IE 6]]<br />Opera 7.0
! style="width:5%" | [[Internet Explorer for Mac|Mac IE 5]]
! style="width:5%" | Konq 3.2
|-
! {{rh}} colspan="11" | None
|-
| style="text-align:left" colspan="2" | <syntaxhighlight lang="html"><html></syntaxhighlight>
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
|-
! {{rh}} colspan="11" | [[HTML]] 2
|-
| style="text-align:left" colspan="2" | <syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"></syntaxhighlight>
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
|-
|-
! {{rh}} colspan="11" | [[HTML]] 3
|-
| style="text-align:left" colspan="2" | <syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//"></syntaxhighlight>
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
|-
|-
! {{rh}} colspan="11" | [[HTML]] 3.2
|-
| style="text-align:left" colspan="2" | <syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"></syntaxhighlight>
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
|-
! {{rh}} colspan="11" |  [[HTML]] 4.01
|-
| style="background: #ececec; text-align:left" rowspan="2" | Strict
| style="text-align:left" | with system identifier<br /><syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
|-
| style="text-align:left" | without system identifier<br /><syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{no2}} Q
| {{partial|A}}
|-
| style="background: #ececec; text-align:left" rowspan="2" |  Transitional
| style="text-align:left" | with system identifier<br /><syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{no2}} Q
|-
| style="text-align:left" | without system identifier<br /><syntaxhighlight lang="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></syntaxhighlight>
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
| {{no2}} Q
|-
! {{rh}} colspan="11" |  [[HTML5]]
|-
| style="text-align:left" colspan="2" |<syntaxhighlight lang="html"><!DOCTYPE html></syntaxhighlight>
| {{no2}} Q
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{dunno}}
|-
! {{rh}} colspan="11" |  [[XHTML]] Basic
|-
| style="text-align:left" colspan="2" |with system identifier and without XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
|-
! {{rh}} colspan="11" |  [[XHTML]] 1.0
|-
| style="background: #ececec; text-align:left" rowspan="3" | Strict
| style="text-align:left" | with system identifier and XML declaration<br /><syntaxhighlight lang="html"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{no2}} Q
| {{partial|A}}
| {{no2}} Q
|-
| style="text-align:left" | with system identifier and without an XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
|-
| style="text-align:left" | without system identifier and without an XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{dunno}}
|-
| style="background: #ececec;text-align:left" rowspan="3" | Transitional
| style="text-align:left" | with system identifier and with XML declaration<br /><syntaxhighlight lang="html"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{no2}} Q
| {{partial|A}}
| {{no2}} Q
|-
| style="text-align:left" | with system identifier and without an XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{no2}} Q
|-
| style="text-align:left" | without system identifier and without an XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{dunno}}
|-
! {{rh}} colspan="11" |  [[XHTML]] 1.1
|-
| style="text-align:left" colspan="2" | with system identifier and an XML declaration<br /><syntaxhighlight lang="html"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{no2}} Q
| {{partial|A}}
| {{no2}} Q
|-
| style="text-align:left" colspan="2" | with system identifier and without XML declaration<br /><syntaxhighlight lang="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></syntaxhighlight>
| {{yes2}} S
| {{yes2}} S
| {{yes2}} S
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
| {{partial|A}}
|-
! colspan="2" | Doctype
! style="width:5%" | [[Netscape 6|NS6]]
! style="width:5%" | [[Mozilla Application Suite|Mozilla]] 0.9.5-1.0
! style="width:10%" | [[Internet Explorer 8|IE 8+]]<br />[[Firefox]]<br/>[[Google Chrome|Chrome]]<br />[[Safari (web browser)|Safari]]<br />[[Opera (web browser)|Opera 7.5+]]<br />Netscape 7+<br/>Mozilla 1.0.1+<br />[[Konqueror|Konq 3.5+]]<br />[[HTML5]] spec
! style="width:5%" | [[Internet Explorer 7|IE 7]]<br />Opera 7.10
! style="width:5%" | [[Internet Explorer 6|IE 6]]<br />Opera 7.0
! style="width:5%" | [[Internet Explorer for Mac|Mac IE 5]]
! style="width:5%" | Konq 3.2
|}

===Mode verification===
In most browsers, the [[Document Object Model]] extension {{mono|document.compatMode}} indicates the rendering mode for the current page. In standards mode and almost-standards mode, {{mono|document.compatMode}} contains the value "CSS1Compat", while in quirks mode it equals "BackCompat".<ref>{{cite web
|url=http://www.quirksmode.org/dom/w3c_html.html#misc
|title=Miscellaneous
|last=Koch
|first=Peter-Paul
|work=W3C DOM Compatibility - HTML
|publisher=QuirksMode
|date=2 February 2009
|access-date=14 February 2009
}}</ref>

Additionally, in [[Mozilla Firefox]] and [[Opera (web browser)|Opera]] the rendering mode in use for a given page is indicated on the 'Page info' informational box.

==References==
{{reflist}}

==External links==
* [https://quirks.spec.whatwg.org/ Quirks Mode Living Standard]
* [http://validator.w3.org/ The W3C Markup Validation Service]
* [http://vesa.piittinen.name/doctype/ Testing doctype handling in browser]
* [http://www.quirksmode.org/css/quirksmode.html Quirksmode.org: Quirks mode and strict mode]
* [http://www.phpied.com/quirks-bookmarklet/ Bookmarklet that reports the mode of a document]
* [http://www.ericmeyeroncss.com/bonus/render-mode.html Eric Meyer on CSS: Picking a Rendering Mode]
* [https://developer.mozilla.org/en/docs/Mozilla's_DOCTYPE_sniffing MDC explanation of Mozilla's DOCTYPE sniffing] {{Webarchive|url=https://web.archive.org/web/20161013023640/https://developer.mozilla.org/en/docs/Mozilla%27s_DOCTYPE_sniffing |date=2016-10-13 }}
* [https://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior Documentation for quirks mode in Mozilla-based browsers]
* [http://www.opera.com/docs/specs/doctype/ Opera Software's explanation of quirks mode in their browser]
* [https://jkorpela.fi/quirks-mode.html What happens in Quirks Mode?]

[[Category:HTML]]