CSS Cascading and Inheritance Module Level 5

1. Introduction

CSS defines a finite set of parameters, called properties, that direct the rendering of a document. Each property has a name (e.g., color, font-size, or border-style), a value space (e.g., <color>, <length-percentage>, [ solid | dashed | dotted | … ]), and a defined behavior on the rendering of the document. Properties values are assigned to various parts of the document via property declarations, which assign the property a value (e.g. red, 12pt, dotted) for the associated element or box.

One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved.

The opposite problem arises when no declarations try to set a value for an element/property combination. In this case, a value is be found by way of inheritance or by looking at the property’s initial value.

The cascading and defaulting process takes a set of declarations as input, and outputs a specified value for each property on each element.

The rules for finding the specified value for all properties on all elements in the document are described in this specification. The rules for finding the specified values in the page context and its margin boxes are described in [css-page-3].

1.1. Module Interactions

This section is normative.

This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in [CSS2] chapter 6.

Other CSS modules may expand the definitions of some of the syntax and features defined here. For example, the Media Queries Level 4 specification, when combined with this module, expands the definition of the <media-query> value type as used in this specification.

For the purpose of this specification, text nodes are treated as element children of their associated element, and possess the full set of properties; since they cannot be targeted by selectors all of their computed values are assigned by defaulting.

2. Importing Style Sheets: the @import rule

The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule, with two exceptions:

• If a feature (such as the @namespace rule) explicitly defines that it only applies to a particular stylesheet, and not any imported ones, then it doesn’t apply to the imported stylesheet.

• If a feature relies on the relative ordering of two or more constructs in a stylesheet (such as the requirement that @namespace rules must not have any other rules other than @import preceding it), it only applies between constructs in the same stylesheet.

For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import.

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset, @supports-condition, and @layer statement rules) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid. The syntax of @import is:

@import [ <url> | <string> ]
        [ layer | layer(<layer-name>) ]?
        <import-conditions> ;

<import-conditions> = [ supports( [ <supports-condition> | <declaration> ] ) ]?
                     <media-query-list>?

where:

• the <url> or <string> gives the URL of the style sheet to be imported.

• the optional layer keyword or layer() function assigns the contents of the style sheet into its own anonymous cascade layer or into the named cascade layer.

  The layer is added to the layer order even if the import fails to load the stylesheet, but is subject to any import conditions (just as if declared by an @layer rule wrapped in the appropriate conditional group rules).

• the optional <import-conditions> states the import conditions under which it applies.

@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

@import url("tabs.css") layer(framework.component);
@import url("override.css") layer;

If a <string> is provided, it must be interpreted as a <url> with the same value.

@import "mystyle.css";
@import url("mystyle.css");

2.1. Conditional @import Rules

Import conditions allow the import to be media– or feature-support–dependent. In the absence of any import conditions, the import is unconditional. (Specifying all for the <media-query-list> has the same effect.) If the import conditions do not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in @media and/or @supports blocks with the given conditions.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

User agents may therefore avoid fetching a conditional import as long as the import conditions do not match. Additionally, if a <supports-condition> blocks the application of the imported style sheet, the UA must not fetch the style sheet (unless it is loaded through some other link) and must return null for the import rule’s CSSImportRule.styleSheet value (even if it is loaded through some other link).

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

The import conditions are given by <media-query-list>, which is parsed and interpreted as a media query list, and <supports-condition>, is parsed and interpreted as a supports query. If a <declaration> is given in place of a <supports-condition>, it must be interpreted as a <supports-decl> (i.e. the extra set of parentheses is implied) and treated as a <supports-condition>.

@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));

The evaluation and full syntax of the import conditions are defined by the Media Queries [MEDIAQ] and CSS Conditional Rules [CSS-CONDITIONAL-3] specifications.

2.2. Processing Stylesheet Imports

When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to an independent style sheet.

Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times.

The cascade origin of an imported style sheet is the cascade origin of the style sheet that imported it.

The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [css-syntax-3]

2.3. Content-Type of CSS Style Sheets

The processing of imported style sheets depends on the actual type of the linked resource:

• If the resource does not have Content-Type metadata, the type is treated as text/css.

• If the host document is in quirks mode, and the host document’s origin is same origin with the linked resource response’s URL’s origin, the type is treated as text/css.

• Otherwise, the type is determined from its Content-Type metadata.

If the linked resource’s type is text/css, it must be interpreted as a CSS style sheet. Otherwise, it must be interpreted as a network error.

3. Shorthand Properties

Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.

When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.

h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

h1 { font: bold 12pt/14pt Helvetica }

In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties. (In such cases, the shorthand will explicitly define the expansion of its values.)

In other cases, a property might be a reset-only sub-property of the shorthand: Like other sub-properties, it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the border shorthand resets border-image to its initial value of none, but has no syntax to set it to anything else. [css-backgrounds-3]

If a shorthand is specified as one of the CSS-wide keywords [css-values-3], it sets all of its sub-properties to that keyword, including any that are reset-only sub-properties. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)

Declaring a shorthand property to be !important is equivalent to declaring all of its sub-properties to be !important.

3.1. Property Aliasing

Properties sometimes change names after being supported for a while, such as vendor-prefixed properties being standardized. The original name still needs to be supported for compatibility reasons, but the new name is preferred. To accomplish this, CSS defines two different ways of “aliasing” old syntax to new syntax.

legacy name aliases

When the old property’s value syntax is identical to that of the new property, the two names are aliased with an operation on par with case-mapping: at parse time, the old property is converted into the new property. This conversion also applies in the CSSOM, both for string arguments and property accessors: requests for the old property name transparently transfer to the new property name instead.

For example, if old-name is a legacy name alias for new-name, getComputedStyle(el).oldName will return the computed style of the newName property, and el.style.setProperty("old-name", "value") will set the new-name property to "value".

legacy shorthands

When the old property has a distinct syntax from the new property, the two names are aliased using the shorthand mechanism. These shorthands are defined to be legacy shorthands, and their use is deprecated. They otherwise behave exactly as regular shorthands, except that the CSSOM will not use them when serializing declarations. [CSSOM]

For example, the page-break-* properties are legacy shorthands for the break-* properties (see CSS Fragmentation 3 § 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties).

Setting page-break-before: always expands to break-before: page at parse time, like other shorthands do. Similarly, if break-before: page is set, calling getComputedStyle(el).pageBreakBefore will return "always". However, when serializing a style block (see CSSOM § 6.7.2 Serializing CSS Values), the page-break-before property will never be chosen as the shorthand to serialize to, regardless of whether it or break-before was specified; instead, break-before will always be chosen.

3.2. Resetting All Properties: the all property

The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords. It does not reset custom properties [css-variables-1].

Note: The excepted CSS properties direction and unicode-bidi are actually markup-level features, and should not be set in the author’s style sheet. (They exist as CSS properties only to style document languages not supported by the UA.) Authors should use the appropriate markup, such as HTML’s dir attribute, instead. [css-writing-modes-3]

4. Value Processing

Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the flat tree, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type.

The final value of a CSS property for a given element or box is the result of a multi-step calculation:

1. First, all the declared values applied to an element are collected, for each property on each element. There may be zero or many declared values applied to the element.
2. Cascading yields the cascaded value. There is at most one cascaded value per property per element.
3. Defaulting yields the specified value. Every element has exactly one specified value per property.
4. Resolving value dependencies yields the computed value. Every element has exactly one computed value per property.
5. Formatting the document yields the used value. An element only has a used value for a given property if that property applies to the element.
6. Finally, the used value is transformed to the actual value based on constraints of the display environment. As with the used value, there may or may not be an actual value for a given property on an element.

Elements that are not connected or are not part of the document’s flattened element tree do not participate in CSS value processing, and do not have declared, cascaded, specified, computed, used, or actual values, even if they potentially have style declarations assigned to them (for example, by a style attribute).

4.1. Declared Values

Each property declaration applied to an element contributes a declared value for that property associated with the element. See Filtering Declarations for details.

These values are then processed by the cascade to choose a single “winning value”.

4.1.1. Value Aliasing

Some property values have legacy value aliases: at parse time, the legacy syntax is converted into the new syntax, resulting in a declared value different from the parsed input. These aliases are typically used for handling legacy compatibility requirements, such as converting vendor-prefixed values to their standard equivalents.

4.2. Cascaded Values

The cascaded value represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.

4.3. Specified Values

The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element.

In many cases, the specified value is the cascaded value. However, if there is no cascaded value at all, the specified value is defaulted. The CSS-wide keywords are handled specially when they are the cascaded value of a property, setting the specified value as required by that keyword, see § 7.3 Explicit Defaulting.

4.4. Computed Values

The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.

Note: The computed value is the value that is transferred from parent to child during inheritance. For historical reasons, it is not necessarily the value returned by the getComputedStyle() function, which sometimes returns used values. [CSSOM] Furthermore, the computed value is an abstract data representation: their definitions reflect that data representation, not how that data is serialized. For example, serialization rules often allow omitting certain values which are implied during parsing; but those values are nonetheless part of the computed value.

Note: In general, the computed value resolves the specified value as far as possible without laying out the document or performing other expensive or hard-to-parallelize operations, such as resolving network requests or retrieving values other than from the element and its parent.

The computed value exists even when the property does not apply. However, some properties may change how they determine the computed value based on whether the property applies to the element.

4.5. Used Values

The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.

For example, a declaration of width: auto can’t be resolved into a length without knowing the layout of the element’s ancestors, so the computed value is auto, while the used value is an absolute length, such as 100px. [CSS2]

As another example, a <div> might have a computed break-before value of auto, but acquire a used break-before value of page by propagation from its first child. [css-break-3]

If a property does not apply to this element or box type then it has no used value for that property.

For example, the flex property has no used value on elements that aren’t flex items.

4.5.1. Applicable Properties

If a property does not apply to an element or box type—​as noted in its “Applies to” line—​this means it does not directly take effect on that type of box or element.

Note: A property that does not apply can still have indirect formatting effects if its computed value affects the computation of other properties that do apply; and of course its computed value, which always exists, can still inherit to descendants and take effect on them.

Note: A property defined to apply to “all elements” applies to all elements and display types, but not necessarily to all pseudo-element types, since pseudo-elements often have their own specific rendering models or other restrictions. The ::before and ::after pseudo-elements, however, are defined to generate boxes almost exactly like normal elements and are therefore defined accept all properties that apply to “all elements”. See [CSS-PSEUDO-4] for more information about pseudo-elements.

4.6. Actual Values

A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property. The actual value is the used value after any such adjustments have been made.

Note: By probing the actual values of elements, much can be learned about how the document is laid out. However, not all information is recorded in the actual values. For example, the actual value of the page-break-after property does not reflect whether there is a page break or not after the element. Similarly, the actual value of orphans does not reflect how many orphan lines there is in a certain element. See examples (j) and (k) in the table below.

4.7. Examples