Quirks Mode

Table of Contents

Introduction

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. Instead of changing the specification to be compatible with what Web content relied on and providing opt-ins to different behavior, browsers implemented two rendering modes, one that was compatible (quirks mode) and one that followed the CSS specification (standards mode). Later a third mode was introduced (almost standards mode), because there were sites that triggered standards mode but expected quirks mode behavior for images in table cells. The different modes have since gained a few differences outside of CSS.

Goals

• Create a standard 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 compat.
• Get interoperability on quirks that are needed for Web compat.
• 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.

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.

Dependencies

The terms standards mode, almost standards mode and quirks mode refer to the DOM4 definitions of "no-quirks mode", "limited quirks mode" and "quirks mode", respectively. DOM

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 identifier, function, hash, number, dimension, open-paren and close-paren are defined in CSS Syntax Module Level 3. CSSSYNTAX

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 term ASCII case-insensitive is defined in HTML. HTML

CSS

The hashless hex color quirk

Status: Awaiting implementation feedback. Has tests.

When a property is said to support hashless hex colors, all tokens in the property's value tokens must be replaced with the return value of following algorithm prior to interpretation:

1. Let output be an empty array.

2. Let func be zero.

3. For each token token in tokens:

   1. If token is a close-paren and func is greater than zero, decrement func by one and jump to the step labeled append.

   2. If token is a function or open-paren, increment func by one and jump to the step labeled append.

   3. Let value be the representation of token if token is a number, the representation of token followed by the unit of token if token is a dimension, or the value of token otherwise.

   4. If the following contitions are true, let token be a new hash token with its value set to value.

      • func is zero.

      • token is a number, dimension or identifier.

      • value has a length that is 3 or 6.

      • value consists of only characters in the range [0-9A-Fa-f] (U+0030 to U+0039, U+0041 to U+0046, U+0061 to U+0066).

   5. Append: Append token to output.

4. Return output.

In quirks mode, the following properties support hashless hex colors:

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

The unitless length quirk

Status: Awaiting implementation feedback. Has tests.

When a property is said to support unitless lengths, all tokens in the property's value tokens must be replaced with the return value of following algorithm prior to interpretation:

1. Let output be an empty array.

2. Let func be zero.

3. For each token token in tokens:

   1. If token is a close-paren and func is greater than zero, decrement func by one and jump to the step labeled append.

   2. If token is a function or open-paren, and token's value does not ASCII-case-insensitively consist of the characters "rect" (U+0072 U+0065 U+0063 U+0074), increment func by one and jump to the step labeled append.

   3. If func is zero and token is a number, let token be a new dimension token with the representation set to token's representation, the value set to token's value, and the unit set to "px" (U+0070 U+0078).

   4. Append: Append token to output.

4. Return output.

In quirks mode, the following properties support unitless lengths:

• 'border-top-width'
• 'border-right-width'
• 'border-bottom-width'
• 'border-left-width'
• 'border-width'
• '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'

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

The blocks ignore line-height quirk

Status: Awaiting implementation feedback. Has tests.

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

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 and is a block container box, 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!

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.

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.

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.

The text decoration doesn't propagate into tables quirk

Status: Awaiting implementation feedback.

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

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.

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.

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.

Selectors

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.

HTML

The table cell width resets nowrap quirk

Status: Awaiting implementation feedback.

In almost standards mode and standards mode, the following style rule is expected to apply, as a presentational hint: [HTML]

td[nowrap], th[nowrap] { white-space: nowrap; }

In quirks mode, a td element or a th element that has a nowrap attribute and either does not have a width attribute or has a width attribute that, when parsed using the rules for parsing dimension values, is found to have a value of zero or a percentage, or to generate an error, is expected to treat the attribute as a presentational hint setting the element's 'white-space' property to 'nowrap'. [HTML]

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.