Quirks Mode

Living Standard — Last Updated

Participate:
GitHub whatwg/quirks (new issue, open issues)
Chat on Matrix
Commits:
GitHub whatwg/quirks/commits
Snapshot as of this commit
@quirksstandard
Tests:
web-platform-tests quirks/ (ongoing work)

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

See CSS Color 4 § B Deprecated Quirky Hex Colors.

3.2. The unitless length quirk

See CSS Values 4 § C Quirky Lengths.

3.3. The line height calculation quirk

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

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 containing block 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, then return a UA-defined value.

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

  4. If element has a computed value of the position property that is absolute, or if element is a not a block container or a table wrapper box, then 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.

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 let margins 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

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

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, Dan Mulvey, 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 (Mozilla, zcorpan@gmail.com).

Intellectual property rights

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a Creative Commons Attribution 4.0 International License. To the extent portions of it are incorporated into source code, such portions in the source code are licensed under the BSD 3-Clause License instead.

This is the Living Standard. Those interested in the patent-review version should view the Living Standard Review Draft.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. URL: https://drafts.csswg.org/css-box-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color-4/
[CSS-DISPLAY-4]
CSS Display Module Level 4. Editor's Draft. URL: https://drafts.csswg.org/css-display-4/
[CSS-PAGE-FLOATS-3]
Johannes Wilm. CSS Page Floats. URL: https://drafts.csswg.org/css-page-floats/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-TABLES-3]
François Remy; Greg Whitworth; David Baron. CSS Table Module Level 3. URL: https://drafts.csswg.org/css-tables-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. URL: https://drafts.csswg.org/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. URL: https://drafts.csswg.org/css-text-4/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. URL: https://drafts.csswg.org/css2/
[CSS3-MULTICOL]
Florian Rivoal; Rachel Andrew. CSS Multi-column Layout Module Level 1. URL: https://drafts.csswg.org/css-multicol/
[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: https://dbaron.org/css/intrinsic/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: https://drafts.csswg.org/selectors/

Informative References

[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[CSSOM-VIEW]
Simon Pieters. CSSOM View Module. URL: https://drafts.csswg.org/cssom-view/