Quirks Mode

Living Standard — Last Updated

Participate:
GitHub whatwg/quirks (new issue, open issues)
IRC: #whatwg on Freenode
Commits:
GitHub whatwg/quirks/commits

Abstract

Quirks Mode defines quirks in CSS and Selectors that are necessary to support for Web browsers for compatibility with the Web.

1. Introduction

1.1. History

Browsers have several rendering modes to render HTML documents. The reason for this is basically a historical accident. The CSS specification was incompatible with the behavior of existing browsers which existing Web content relied on. In order to comply with the specification while not breaking existing content, browsers introduced a new rendering mode (no-quirks mode). Some browsers still had the shrink-wrapping behavior for images in table cells in their no-quirks mode, and sites started relying on that, so browsers that implemented the specification’s behavior introduced a third mode (limited-quirks mode). In hindsight, it would have been better to make the default CSS behavior be compatible with what the existing content relied on and providing opt-ins to different behavior. The different modes have since gained a few differences outside of CSS.

1.2. Goals

This specification does not enumerate all quirks that currently exist in browsers. A number of quirks are specified in HTML, DOM, CSSOM and CSSOM View. [HTML] [DOM] [CSSOM] [CSSOM-VIEW] If a quirk is not specified anywhere, it is probably due to the second bullet point above.

2. Common infrastructure

2.1. Conformance

All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.

The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this specification are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]

2.2. Terminology

When this specification refers to a "foo element", it means an element with the local name foo and having the namespace http://www.w3.org/1999/xhtml.

When this specification refers to a "foo attribute", it means an attribute with the local name foo and having no namespace.

The document’s body element is the first child of the document element that is a body element, if there is one, and the document element is an html element. Otherwise it is null.

The document’s body element is different from HTML’s the body element, since the latter can be a frameset element.

3. CSS

3.1. The hashless hex color quirk

Tests are available.

Quirky colors are denoted by <quirky-color>. A quirky color corresponds to a <number-token>, a <dimension-token> or an <ident-token> component value in the syntax. The value of a quirky color is obtained from the possible component values using the following algorithm, aborting on the first step that returns a value:

  1. Let cv be the component value.

  2. If cv is a <number-token> or a <dimension-token>, follow these substeps:

    1. If cv’s type flag is not "integer", return an error.

      This means that values that happen to use scientific notation, e.g., 5e5e5e, will fail to parse.

    2. If cv’s value is less than zero, return an error.

    3. Let serialization be the serialization of cv’s value, as a base-ten integer using digits 0-9 (U+0030 to U+0039) in the shortest form possible.

    4. If cv is a <dimension-token>, append the unit to serialization.

    5. If serialization consists of fewer than six characters, prepend zeros (U+0030) so that it becomes six characters.

  3. Otherwise, cv is an <ident-token>; let serialization be cv’s value.

  4. If serialization does not consist of three or six characters, return an error.

  5. If serialization contains any characters not in the range [0-9A-Fa-f] (U+0030 to U+0039, U+0041 to U+0046, U+0061 to U+0066), return an error.

  6. Return the concatenation of "#" (U+0023) and serialization.

If the value of a quirky color is an error, it is an illegal value. Otherwise, the value of a quirky color must be interpreted as an RGB value in hexadecimal notation using the same rules as for <color>.

In quirks mode, the following properties must have their "Value" grammar changed by replacing <color> with:

[ <color> | <quirky-color> ]

Any property not listed above must not support <quirky-color> even if it references one of the above properties in its "Value" grammar.

This quirk must apply inside an @supports at-rule.

The <quirky-color> value must not be supported in arguments to CSS expressions, and must not be supported in the supports() static method of the CSS interface.

3.2. The unitless length quirk

Tests are available.

Quirky lengths are denoted by <quirky-length>. A quirky length is a number and corresponds to a <number-token> component value in the syntax. The value of a quirky length is obtained from the component value’s value.

The value of a quirky length must be interpreted as a <length> where the unit is px.

In quirks mode, the following properties must have their "Value" grammar changed by replacing <length> with:

[ <length> | <quirky-length> ]

Any property not listed above must not support <quirky-length> even if it references one of the above properties in its "Value" grammar.

This quirk must apply inside an @supports at-rule.

The <quirky-length> value must not be supported in arguments to CSS expressions other than the rect() expression, and must not be supported in the supports() static method of the CSS interface.

3.3. The line height calculation quirk

Tests are available.

In quirks mode and limited-quirks mode, an inline box that matches the following conditions, must, for the purpose of line height calculation, act as if the box had a line-height of zero.

3.4. The blocks ignore line-height quirk

Tests are available.

In quirks mode and limited-quirks mode, for a block container element whose content is composed of inline-level elements, the element’s line-height must be ignored for the purpose of calculating the minimal height of line boxes within the element.

This means that the "strut" is not created.

3.5. The percentage height calculation quirk

In quirks mode, for the purpose of calculating the height of an element element, if the computed value of the position property of element is relative or static, the specified value for the height property of element is a <percentage>, and element does not have a computed value of the display property that is table-row, table-row-group, table-header-group, table-footer-group, table-cell or table-caption, the containing block of element must be calculated using the following algorithm, aborting on the first step that returns a value:

  1. Let element be the nearest ancestor block container box of element, if there is one. Otherwise, return the initial containing block.

  2. If element has a computed value of the display property that is table-cell, return a UA-defined value.

  3. If element has a computed value of the height property that is not auto, return element.

  4. If element has a computed value of the position property that is absolute, return element.

  5. Jump to the first step.

It is at the time or writing undefined how percentage heights inside tables work in CSS. This specification does not try to specify what to use as the containing block for calculating percentage heights in tables. Godspeed!

This quirk needs to take writing modes into account and maybe bail for grids.

3.6. The html element fills the viewport quirk

In quirks mode, if the document element element matches the following conditions:

...then element must have its border box size in the block flow direction set using the following algorithm:

  1. Let margins be sum of the used values of the margin-left and margin-right properties of element if element has a vertical writing mode, otherwise let margins be the sum of the used values of the margin-top and margin-bottom properties of element.

  2. Let size be the size of the initial containing block in the block flow direction minus margins.

  3. Return the bigger value of size and the normal border box size the element would have according to the CSS specification.

3.7. The body element fills the html element quirk

In quirks mode, if the document’s body element body is not null and if it matches the following conditions:

...then body must have its border box size in the block flow direction set using the following algorithm:

  1. Let margins be the sum of the used values of the margin-left and margin-right properties of body if body has a vertical writing mode, otherwise margins it be the sum of the used values of the margin-top and margin-bottom properties of body.

  2. Let size be the size of body’s parent element’s content box in the block flow direction minus margins.

  3. Return the bigger value of size and the normal border box size the element would have according to the CSS specification.

What should happen if the html and the body have different writing modes?

3.8. The table cell width calculation quirk

Tests are available.

In quirks mode, for the purpose of calculating the min-content width of an inline formatting context for which a table cell cell is the containing block, if cell has a computed value of the width property that is auto, img elements that are inline-level replaced elements in that inline formatting context must not have a soft wrap opportunity before or after them. [CSS-TEXT-3] [INTRINSIC]

3.9. The table cell nowrap minimum width calculation quirk

In quirks mode, an element cell that matches the following conditions must act as if it had an outer min-content width of a table cell in the automatic table layout algorithm that is the bigger value of cell’s computed value of the width property and the outer min-content width of a table cell. [INTRINSIC]

3.10. The collapsing table quirk

In quirks mode, an element table that matches the following conditions must have a used value of the height property of 0 and a used value of the border-style property of none.

3.11. The text decoration doesn’t propagate into tables quirk

In quirks mode, text decoration must not propagate into table elements.

3.12. The tables inherit color from body quirk

In quirks mode, the initial value of the color property must be quirk-inherit, a special value that has no keyword mapping to it.

The computed value of the color property of an element element must be calculated using the following algorithm:

  1. If the specified value of the color property of element is not quirk-inherit, jump to the last step.

  2. If element is not a table element, jump to the last step.

  3. If the document’s body element is null, jump to the last step.

  4. Return the used value of the color property of the document’s body element. Abort these steps.

  5. If the specified value of the color property of element is quirk-inherit, let the specified value of the color property of element be the initial value of the color property according to the CSS specification. Return the computed value of the color property of element as specified in the CSS specification.

3.13. The table cell height box sizing quirk

In quirks mode, elements that have a computed value of the display property of table-cell must act as they have used value of the box-sizing property of border-box, but only for the purpose of the height, min-height and max-height properties.

4. Selectors

4.1. The :active and :hover quirk

Tests are available.

In quirks mode, a compound selector selector that matches the following conditions must not match elements that would not also match the :any-link selector. [SELECTORS4]

Security and Privacy Considerations

There are no known security or privacy impacts in this specification.

Acknowledgments

Thanks to Anne van Kesteren, Boris Zbarsky, Chris Rebert, David Baron, Kang-Hao Lu, Ms2ger, Simon Sapin, and Tab Atkins for their useful comments.

Special thanks to Boris Zbarsky and David Baron for documenting Mozilla’s quirks in MDN.

This standard is written by Simon Pieters (Opera Software ASA, simonp@opera.com).

Per CC0, to the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3 URL: https://drafts.csswg.org/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. URL: http://dev.w3.org/csswg/css-cascade/
[CSS-COLOR-3]
CSS Color Module Level 3 URL: https://drafts.csswg.org/css-color-3/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color/
[CSS-CONDITIONAL-3]
CSS Conditional Rules Module Level 3 URL: https://drafts.csswg.org/css-conditional-3/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. URL: http://dev.w3.org/csswg/css-display/
[CSS-FONTS-3]
John Daggett. CSS Fonts Module Level 3. URL: http://dev.w3.org/csswg/css-fonts/
[CSS-MASKING-1]
Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. URL: http://dev.w3.org/fxtf/css-masking-1/
[CSS-MULTICOL-1]
CSS Multi-column Layout Module Level 1 URL: https://drafts.csswg.org/css-multicol-1/
[CSS-PAGE-FLOATS-3]
Johannes Wilm. CSS Page Floats. URL: http://dev.w3.org/csswg/css-page-floats/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: http://dev.w3.org/csswg/css-syntax/
[CSS-TABLES-3]
François Remy; Greg Whitworth. CSS Table Module Level 3. URL: https://drafts.csswg.org/css-tables-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. URL: http://dev.w3.org/csswg/css-text-3/
[CSS-UI-3]
Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). URL: http://dev.w3.org/csswg/css-ui/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 29 September 2016. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: http://dev.w3.org/csswg/css-writing-modes-3/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2
[CSS3-MULTICOL]
Håkon Wium Lie. CSS Multi-column Layout Module. 12 April 2011. CR. URL: https://www.w3.org/TR/css3-multicol
[CSSOM]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INTRINSIC]
David Baron. More Precise Definitions of Intrinsic Widths and Table Layout (Proposal). URL: http://dbaron.org/css/intrinsic/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[SELECTORS-4]
Selectors Level 4 URL: https://drafts.csswg.org/selectors-4/
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. 2 May 2013. WD. URL: https://www.w3.org/TR/selectors4/

Informative References

[CSSOM-VIEW]
Simon Pieters. CSSOM View Module. URL: https://drafts.csswg.org/cssom-view/