Quirks Mode

Table of Contents

1. 1 Introduction
   1. 1.1 History
   2. 1.2 Goals
2. 2 Common infrastructure
   1. 2.1 Conformance
   2. 2.2 Terminology
   3. 2.3 Dependencies
3. 3 CSS
   1. 3.1 The hashless hex color quirk
   2. 3.2 The unitless length quirk
   3. 3.3 The line height calculation quirk
   4. 3.4 The blocks ignore line-height quirk
   5. 3.5 The percentage height calculation quirk
   6. 3.6 The table cell width calculation quirk
   7. 3.7 The table cell nowrap minimum width calculation quirk
   8. 3.8 The collapsing table quirk
   9. 3.9 The text decoration doesn't propagate into tables quirk
   10. 3.10 The font element text decoration color quirk
   11. 3.11 The tables inherit color from body quirk
   12. 3.12 The table cell height box sizing quirk
4. 4 Selectors
   1. 4.1 The :active and :hover quirk
5. References
6. Acknowledgments

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 (standards mode). Some browsers still had the shrink-wrapping behavior for images in table cells in their standards mode, and sites started relying on that, so browsers that implemented the specification's behavior introduced a third mode (almost standards 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

• Create a specification for rendering old (or indeed new, if they happen to have a particular pragma) HTML documents.
• Remove quirks from implementations that are not needed for Web compatibility.
• Get interoperability on quirks that are needed for Web compatibility.
• Where possible, limit quirks to a fixed set of legacy features so they don't propagate into new features.

This specification does not enumerate all quirks that currently exist in browsers. The HTML specification specifies a number of quirks. [HTML] If a quirk is missing from both specifications, 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.

2.3 Dependencies

The terms block container element, inline-level, containing block, initial containing block and block container box are defined in CSS 2.1. [CSS]

The terms minimum intrinsic width of an inline formatting context and outer intrinsic minimum width of a table cell are defined in More Precise Definitions of Intrinsic Widths and Table Layout (Proposal). [CSSINTRINSIC]

The terms number token, dimension token and ident token are defined in CSS Syntax Module. [CSSSYNTAX]

The terms <color>, <length> and number are defined in CSS Values and Units Module. [CSSVALUES]

Some terms are defined in DOM and HTML. [DOM] [HTML]

3 CSS

3.1 The hashless hex color quirk

Status: Awaiting implementation feedback. Has tests.

Quirky colors are denoted by <quirky-color>. A quirky color is a sequence of 3 or 6 characters in the range [0-9A-Fa-f] (U+0030 to U+0039, U+0041 to U+0046, U+0061 to U+0066) and corresponds to a number token, a dimension token or an ident token in the syntax. The value of a quirky color is obtained from the possible tokens as follows:

number token

The value is the token's representation.

dimension token

The value is the token's representation followed by the token's unit.

ident token

The value is the token's value.

The value of a quirky color must be interpreted as an RGB value in hexadecimal notation using the same rules as for <color>, except for the leading "#" character.

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

• 'background-color'
• 'border-color'
• 'border-top-color'
• 'border-right-color'
• 'border-bottom-color'
• 'border-left-color'
• 'color'

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

The <quirky-color> value must not be supported in arguments to CSS expressions.

3.2 The unitless length quirk

Status: Awaiting implementation feedback. Has tests.

Quirky lengths are denoted by <quirky-length>. A quirky length is a number and corresponds to a number token in the syntax. The value of a quirky length is obtained from the token'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> ]:

• 'border-top-width'
• 'border-right-width'
• 'border-bottom-width'
• 'border-left-width'
• 'border-width'
• 'bottom'
• 'clip'
• 'font-size'
• 'height'
• 'left'
• 'letter-spacing'
• 'margin-right'
• 'margin-left'
• 'margin-top'
• 'margin-bottom'
• 'margin'
• 'padding-top'
• 'padding-right'
• 'padding-bottom'
• 'padding-left'
• 'padding'
• 'right'
• 'top'
• 'width'
• 'word-spacing'

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

The <quirky-length> value must not be supported in arguments to CSS expressions other than the rect() expression.

3.3 The line height calculation quirk

Status: Awaiting implementation feedback. Has tests.

In quirks mode and almost standards 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.

• The 'border-right-width', 'border-left-width', 'padding-right' and 'padding-left' properties have a used value of zero.

• It either contains no text or it contains only collapsed whitespace.

3.4 The blocks ignore line-height quirk

Status: Awaiting implementation feedback. Has tests.

In quirks mode and almost standards 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

Status: Awaiting implementation feedback. Has tests.

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. If element is a body element, and its parent is the root element, and that is an html element, let element have a quirky containing block height and return element.

6. Jump to the first step.

When an element body is said to have a quirky containing block height, the containing block the element establishes must act as if it had a height calculated using the following algorithm:

1. If the root element has a computed value of the 'height' property that is 'auto' and has a computed value of the 'position' property that is 'absolute', return 'auto' and abort these steps.

2. Let elements be an array with body as its only item.

3. If the root element has a computed value of the 'height' property that is not 'auto', let A be the used value of the 'height' property of the root element. Otherwise, let A be the height of the initial containing block and append the root element to elements.

4. Let B be the sum of the used values of the 'margin-top', 'margin-bottom', 'border-top-width', 'border-bottom-width', 'padding-top' and 'padding-bottom' properties of each element in elements.

5. Let result be A minus B.

6. If result is negative, let result be zero.

7. Return result.

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!

3.6 The table cell width calculation quirk

Status: Awaiting implementation feedback. Has tests.

In quirks mode, for the purpose of calculating the minimum intrinsic 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 replaced elements or inline-block replaced elements in that inline formatting context must not have a line breaking opportunity before or after them.

3.7 The table cell nowrap minimum width calculation quirk

Status: Awaiting implementation feedback.

In quirks mode, an element cell that matches the following conditions must act as if it had an outer intrinsic minimum 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 intrinsic minimum width of a table cell.

• cell is a td element or a th element.

• cell has a nowrap attribute.

• The computed value of the 'width' property of cell is a <length> that is not zero.

3.8 The collapsing table quirk

Status: Awaiting implementation feedback.

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'.

• table has a computed value of the 'display' property that is 'table'.

• table has no child 'table-row-group', 'table-header-group', 'table-footer-group' or 'table-caption' box.

• table has no child 'table-column-group' box that itself has a child 'table-column' box.

3.9 The text decoration doesn't propagate into tables quirk

Status: Awaiting implementation feedback.

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

3.10 The font element text decoration color quirk

Status: Awaiting implementation feedback. Has tests.

The font element must override the color of any text decoration that spans the text of the element to the used value of the element's 'color' property.

This applies in all modes.

3.11 The tables inherit color from body quirk

Status: Awaiting implementation feedback.

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.

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

3.12 The table cell height box sizing quirk

Status: Awaiting implementation feedback.

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

Status: Awaiting implementation feedback.

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. [SELECTORS]

• selector uses the ':active' or ':hover' pseudo-classes.
• selector does not use a type selector.
• selector does not use an attribute selector.
• selector does not use an ID selector.
• selector does not use a class selector.
• selector does not use a pseudo-class selector other than ':active' and ':hover'.
• selector does not use a pseudo-element selector.
• selector is not part of an argument to a functional pseudo-class or pseudo-element.

References

Acknowledgments

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

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