CSS Cascading and Inheritance Level 4

1.Introduction

CSS defines a finite set of parameters, calledproperties, that direct the rendering of a document. Eachpropertyhas a name (e.g.,color,font-size,orborder-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 viaproperty 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 iscascading, 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 the value for an element/property combination. In this case, a value is be found by way ofinheritanceor by looking at the property’sinitial value.

Thecascadinganddefaultingprocess takes a set of declarations as input, and outputs aspecified valuefor 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 nodesare treated aselementchildren 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 bydefaulting.

2.Importing Style Sheets: the@importrule

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

• If a feature (such as the@namespacerule)explicitlydefines 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@namespacerules must not have any other rules other than@importpreceding 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@importrules must precede all other valid at-rules and style rules in a style sheet (ignoring@charset), or else the@importrule is invalid. The syntax of@importis:

@import [<url>|<string>]
[ supports( [<supports-condition>|<declaration>] ) ]?
<media-query-list>?;

where the<url>or<string>gives the URL of the style sheet to be imported, and the optional [<supports-condition>|<declaration>] and<media-query-list>(collectively, theimport conditions) state the conditions under which it applies.

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

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

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

2.1.Conditional@importRules

Theimport conditionsallow the import to be media– or feature-support–dependent. In the absence of anyimport conditions,the import is unconditional. (Specifyingallfor the<media-query-list>has the same effect.) If theimport conditionsdo not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in@mediaand/or@supportsblocks with the given conditions.

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

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

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

Theimport conditionsare given by<media-query-list>,which is parsed and interpreted as amedia 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 theimport conditionsare defined by theMedia Queries[MEDIAQ]andCSS 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.

Thecascade originof an imported style sheet is thecascade originof the style sheet that imported it.

Theenvironment encodingof 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 haveContent-Type metadata, the type is treated astext/css.

• If the host document is inquirks mode, and the host document’s origin issame originwith the linked resourceresponse’sURL’sorigin, the type is treated astext/css.

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

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

3.Shorthand Properties

Some properties areshorthand properties, meaning that they allow authors to specify the values of several properties with a single property. Ashorthand propertysets all of itslonghand sub-properties, exactly as if expanded in place.

When values are omitted from ashorthandform, unless otherwise defined, each “missing”sub-propertyis assigned itsinitial value.

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

h1{font:bold12pt/14ptHelvetica}

In some cases, ashorthandmight have different syntax or special keywords that don’t directly correspond to values of itssub-properties. (In such cases, theshorthandwill explicitly define the expansion of its values.)

In other cases, a property might be areset-only sub-propertyof the shorthand: Like othersub-properties,it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set thesub-propertyto any of its other values.For example, thebordershorthand resetsborder-imageto its initial value ofnone, but has no syntax to set it to anything else.[css-backgrounds-3]

If ashorthandis specified as one of theCSS-wide keywords[css-values-3], it sets all of itssub-propertiesto that keyword, including any that arereset-only sub-properties. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)

Declaring ashorthandproperty to be!importantis equivalent to declaring all of itssub-propertiesto 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, ifold-nameis alegacy name aliasfornew-name,getComputedStyle(el).oldNamewill return the computed style of thenewNameproperty, andel.style.setPropertyValue("old-name","value")will set thenew-nameproperty to"value".

legacy shorthands

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

For example, thepage-break-*properties arelegacy shorthandsfor thebreak-*properties (seeCSS Fragmentation 3§ 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties).

Settingpage-break-before: alwaysexpands tobreak-before: pageat parse time, like other shorthands do. Similarly, ifbreak-before: pageis set, callinggetComputedStyle(el).pageBreakBeforewill return"always". However, when serializing a style block (seeCSSOM 1§ 6.7.2 Serializing CSS Values), thepage-break-beforeproperty will never be chosen as the shorthand to serialize to, regardless of whether it orbreak-beforewas specified; instead,break-beforewill always be chosen.

3.2.Resetting All Properties: theallproperty

Theallproperty is ashorthandthat resetsallCSS properties exceptdirectionandunicode-bidi. It only accepts theCSS-wide keywords. It does not resetcustom properties[css-variables-1].

Note:The excepted CSS propertiesdirectionandunicode-bidiare actually markup-level features, andshould 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’sdirattribute, 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 theflat 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 thedeclared valuesapplied to an element are collected, for each property on each element. There may be zero or manydeclared valuesapplied to the element.
2. Cascading yields thecascaded value. There is at most onecascaded valueper property per element.
3. Defaulting yields thespecified value. Every element has exactly onespecified valueper property.
4. Resolving value dependencies yields thecomputed value. Every element has exactly onecomputed valueper property.
5. Formatting the document yields theused value. An element only has aused valuefor a given property if that property applies to the element.
6. Finally, the used value is transformed to theactual valuebased on constraints of the display environment. As with theused value,there may or may not be anactual valuefor a given property on an element.

Elements that are notconnectedor are not part of the document’sflattened element treedo not participate in CSS value processing, and do not havedeclared,cascaded,specified,computed,used,oractualvalues, even if they potentially have style declarations assigned to them (for example, by astyleattribute).

4.1.Declared Values

Each property declarationapplied to an elementcontributes adeclared valuefor that property associated with the element. SeeFiltering Declarationsfor details.

These values are then processed by thecascadeto choose a single “winning value”.

4.1.1.Value Aliasing

Some property values havelegacy value aliases: at parse time, the legacy syntax is converted into the new syntax, resulting in adeclared valuedifferent from the parsed input. These aliases are typically used for handling legacy compatibility requirements, such as convertingvendor-prefixedvalues to their standard equivalents.

4.2.Cascaded Values

Thecascaded valuerepresents the result ofthe cascade: it is thedeclared valuethat wins the cascade (is sorted first in theoutput of the cascade). If theoutput of the cascadeis an empty list, there is nocascaded value.

4.3.Specified Values

Thespecified valueis the value of a given property that the style sheet authors intended for that element. It is the result of putting thecascaded valuethrough thedefaultingprocesses, guaranteeing that aspecified valueexists for every property on every element.

In many cases, thespecified valueis thecascaded value. However, if there is nocascaded valueat all, thespecified valueisdefaulted. TheCSS-wide keywordsare handled specially when they are thecascaded valueof a property, setting thespecified valueas required by that keyword, see§ 7.3 Explicit Defaulting.

4.4.Computed Values

Thecomputed valueis the result of resolving thespecified valueas defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation forinheritance.

Note:Thecomputed valueis the value that is transferred from parent to child duringinheritance. For historical reasons, it is not necessarily the value returned by thegetComputedStyle()function, which sometimes returnsused values.[CSSOM]Furthermore, thecomputed valueis 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 thecomputed value.

Note:In general, thecomputed valueresolves thespecified valueas 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.

Thecomputed valueexists even when the property does not apply. However, some properties may change how they determine thecomputed valuebased on whether the propertyapplies tothe element.

4.5.Used Values

Theused valueis the result of taking thecomputed valueand completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.

For example, a declaration ofwidth: autocan’t be resolved into a length without knowing the layout of the element’s ancestors, so thecomputed valueisauto, while theused valueis an absolute length, such as100px.[CSS2]

As another example, a<div>might have a computedbreak-beforevalue ofauto, but acquire a usedbreak-beforevalue ofpageby propagation from its first child.[css-break-3]

If a property does notapply tothis element or box type then it has noused valuefor that property.

For example, theflexproperty has noused valueon elements that aren’tflex items.

4.5.1.Applicable Properties

If a property does notapply toan 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 haveindirectformatting effects if its computed value affects the computation of other properties that do apply; and of course itscomputed 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 anddisplay types, but not necessarily to allpseudo-elementtypes, since pseudo-elements often have their own specific rendering models or other restrictions. The::beforeand::afterpseudo-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 aboutpseudo-elements.

4.6.Actual Values

Aused valueis 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 theusedwidth. Also, the font size of an element may need adjustment based on the availability of fonts or the value of thefont-size-adjustproperty.Theactual valueis 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 thepage-break-afterproperty does not reflect whether there is a page break or not after the element. Similarly, the actual value oforphansdoes not reflect how many orphan lines there is in a certain element. See examples (j) and (k) in thetable below.

4.7.Examples

5.Filtering

In order to find thedeclared values, implementations must first identify all declarations that apply to each element. A declaration applies to an element if:

• It belongs to a style sheet that currently applies to this document.
• It is not qualified by a conditional rule[CSS-CONDITIONAL-3]with a false condition.
• It belongs to a style rule whose selector matches the element.[SELECT](Takingscopinginto account, if necessary.)
• It is syntactically valid: the declaration’s property is a known property name, and the declaration’s value matches the syntax for that property.

The values of the declarations that apply form, for each property on each element, a list ofdeclared values. The next section, thecascade, prioritizes these lists.

6.Cascading

Thecascadetakes an unordered list ofdeclared valuesfor a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a singlecascaded value.

6.1.Cascade Sorting Order

The cascade sorts declarations according to the following criteria, in descending order of priority:

Origin and Importance

Theoriginof a declaration is based on where it comes from and itsimportanceis whether or not it is declared with!important(seebelow). The precedence of the variousoriginsis, in descending order:

1. Transition declarations[css-transitions-1]
2. Importantuser agentdeclarations
3. Importantuserdeclarations
4. Importantauthordeclarations
5. Animation declarations[css-animations-1]
6. Normalauthordeclarations
7. Normaluserdeclarations
8. Normaluser agentdeclarations

Declarations fromoriginsearlier in this list win over declarations from laterorigins.

Context

A document language can provide for blending declarations sourced from differentencapsulation contexts, such as the nestedtree contextsofshadow treesin the[DOM].

When comparing two declarations that are sourced from differentencapsulation contexts, then fornormalrules the declaration from the outer context wins, and forimportantrules the declaration from the inner context wins. For this purpose,[DOM]tree contextsare considered to be nested inshadow-including tree order.

Note:This effectively means thatnormaldeclarations belonging to anencapsulation contextcan set defaults that are easily overridden by the outer context, whileimportantdeclarations belonging to anencapsulation contextcan enforce requirements that cannot be overridden by the outer context.

Specificity

TheSelectors module[SELECT]describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. For the purpose of this step, declarations that do not belong to a style rule (such as thecontents of a style attribute) are considered to have a specificity higher than any selector. The declaration with the highest specificity wins.

Order of Appearance

The last declaration in document order wins. For this purpose:

• Declarations fromimported style sheetsare ordered as if their style sheets were substituted in place of the@importrule.
• Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language.
• Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets.

Theoutput of the cascadeis a (potentially empty) sorted list ofdeclared valuesfor each property on each element.

6.2.Cascading Origins

Each style rule has acascade origin, which determines where it enters the cascade. CSS defines three coreorigins:

Author Origin

The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.

User Origin

The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).

User-Agent Origin

Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See e.g. theHTML user agent style sheet.[HTML]

Extensions to CSS define the following additionalorigins:

Animation Origin

CSS Animations[css-animations-1]generate “virtual” rules representing their effects when running.

Transition Origin

Like CSS Animations, CSS Transitions[css-transitions-1]generate “virtual” rules representing their effects when running.

6.3.Important Declarations: the!importantannotation

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet, which override those in the user-agent’s default style sheet. To balance this, a declaration can be markedimportant, which increases its weight in the cascade and inverts the order of precedence.

A declaration isimportantif it has a!importantannotation as defined by[css-syntax-3], i.e. if the last two (non-whitespace, non-comment) tokens in its value are the delimiter token!followed by the identifier tokenimportant. All other declarations arenormal(non-important).

[hidden]{display:none!important;}

Animportantdeclaration takes precedence over anormaldeclaration. Author and user style sheets may containimportantdeclarations, withuser-originimportantdeclarations overridingauthor-originimportantdeclarations. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Importantdeclarations from all origins take precedence over animations. This allows authors to override animated values in important cases. (Animated values normally override all other rules.)[css-animations-1]

User-agent style sheetsmay also containimportantdeclarations. These override allauthoranduserdeclarations.

/* From the user’s style sheet */
p{text-indent:1em!important}
p{font-style:italic!important}
p{font-size:18pt}

/* From the author’s style sheet */
p{text-indent:1.5em!important}
p{font:normal12ptsans-serif!important}
p{font-size:24pt}

6.4.Precedence of Non-CSS Presentational Hints

The UA may choose to honor presentational hints in a source document’s markup, for example thebgcolorattribute orselement in[HTML]. All document language-based styling must be translated to corresponding CSS rules and enter the cascade as rules in either theUA-originor a special-purposeauthor presentational hint originbetween the regularuser originand theauthor origin. For the purpose ofcascadingthisauthor presentational hint originis treated as an independentorigin, but for the purpose of therevertkeyword it is considered part of theauthor origin.

A document language may define whether such a presentational hint enters thecascadeasUA-originorauthor-origin; if so, the UA must behave accordingly. For example,[SVG11]maps its presentation attributes into theauthor origin.

Note:Presentational hints entering thecascadeasUA-originrules can be overridden byauthor-originoruser-originstyles. Presentational hints entering the cascade asauthor presentational hint originrules can be overridden byauthor-originstyles, but not by non-importantuser-originstyles. Host languages should choose the appropriate origin for presentational hints with these considerations in mind.

7.Defaulting

When thecascadedoes not result in a value, thespecified valuemust be found some other way.Inherited propertiesdraw their defaults from their parent element throughinheritance; all other properties take theirinitial value. Authors can explicitly request inheritance or initialization via theinheritandinitialkeywords.

7.1.Initial Values

Each property has aninitial value, defined in the property’s definition table. If the property is not aninherited property, and thecascadedoes not result in a value, then thespecified valueof the property is itsinitial value.

7.2.Inheritance

Inheritancepropagates property values from parent elements to their children. Theinherited valueof a property on an element is thecomputed valueof the property on the element’s parent element. For the root element, which has no parent element, theinherited valueis theinitial valueof the property.

For a[DOM]tree with shadows, inheritance operates on theflattened element tree.This means that slotted elements inherit from theslotthey’re assigned to, rather than directly from theirlight treeparent.Pseudo-elementsinherit according to the fictional tag sequence described for eachpseudo-element.[CSS-PSEUDO-4]

Some properties areinherited properties, as defined in their property definition table. This means that, unless thecascaderesults in a value, the value will be determined byinheritance.

A property can also be explicitly inherited. See theinheritkeyword.

Note:Inheritance follows the document tree and is not intercepted byanonymous boxes, or otherwise affected by manipulations of the box tree.

7.3.Explicit Defaulting

Several CSS-wide property values are defined below; declaring a property to have these values explicitly specifies a particular defaulting behavior. As specified inCSS Values and Units[css-values-3], all CSS properties can accept these values.

7.3.1.Resetting a Property: theinitialkeyword

If thecascaded valueof a property is theinitialkeyword, the property’sspecified valueis itsinitial value.

7.3.2.Explicit Inheritance: theinheritkeyword

If thecascaded valueof a property is theinheritkeyword, the property’sspecifiedandcomputed valuesare theinherited value.

7.3.3.Erasing All Declarations: theunsetkeyword

If thecascaded valueof a property is theunsetkeyword, then if it is an inherited property, this is treated asinherit, and if it is not, this is treated asinitial. This keyword effectively erases alldeclared valuesoccurring earlier in thecascade, correctly inheriting or not as appropriate for the property (or all longhands of ashorthand).

7.3.4.Rolling Back Cascade Origins: therevertkeyword

If thecascaded valueof a property is therevertkeyword, the behavior depends on thecascade originto which the declaration belongs:

user-agent origin

Equivalent tounset.

user origin

Rolls back thecascaded valueto the user-agent level, so that thespecified valueis calculated as if noauthor-originoruser-originrules were specified for this property on this element.

author origin

Rolls back thecascaded valueto the user level, so that thespecified valueis calculated as if noauthor-originrules were specified for this property on this element. For the purpose ofrevert,this origin includes the Animationorigin.

8.Changes

8.1.Changes since the 15 Oct 2021 Working Draft

Non-trivial changes since the15 October 2021 Working Draft:

• Updated @import grammar for media queries and supports conditions

• Allowed functional notation parse-time aliases

• Defined fetching an @import, in terms of Fetch

• Added§ 4.1.1 Value Aliasingsection. (Issue 6193)

8.2.Changes Since the 28 August 2018 Candidate Recommendation

Non-trivial changes since the19 March 2021 Working Draftinclude:

• Definedauthor presentational hint originto handle author-origin presentational hints, instead of relying on zero-specificity and source order, to correctly define their interaction with theencapsulation contextaspect of the cascade. (Issue 66749)

Non-trivial changes since the18 August 2020 Working Draftinclude:

• Removed possibility oflegacy name aliasesto map subsets of the value space, since they are simple name aliases. (Issue 4839)
• Gave concept ofapplies toits own section and add some notes about implications. (Issues1861and5565)
• Defined the termproperty. (Issue 5633)
• Defined value processing of elements that are not part of the tree. (Issue1964and1548)

  Elements that are notconnectedor are not part of the document’sflattened element treedo not participate in CSS value processing, and do not havedeclared,cascaded,specified,computed,used,oractualvalues, even if they potentially have style declarations assigned to them (for example, by astyleattribute).

• Clarify origin comparison for quirks mode Content-Type assumptions in§ 2.3 Content-Type of CSS Style Sheets. (Issue 4838)

Non-trivial changes since the28 August 2018 Candidate Recommendationinclude:

• Addedcontextto thecascadesort criteria to accommodate Shadow DOM.[DOM](Issue 5372)
• Defined that, in consideration ofshadow trees,inheritanceoperates over theflattened element tree.
• Removed scoping from thecascadesort criteria, because it has not been implemented.

8.3.Changes Since the 14 January 2016 Candidate Recommendation

Non-trivial changes since the14 January 2016 Working Draftinclude:

• Precisely defined the types of aliasing that CSS uses. (Issue 866) See§ 3.1 Property Aliasing.
• Clarified thatrevertonly affects the cascaded value, not the inherited value.

  user origin

  Rolls back the cascade cascaded value to the user-agent level, so that thespecified valueis calculated as if no author-level or user-level rules were specified for this property on this element .

  author origin

  Rolls back the cascade cascaded value to the user level, so that thespecified valueis calculated as if no author-level rules were specified for this property on this element .

• Clarified thatcustom propertiesare not reset by theallshorthand. (2518)

  Theallproperty is ashorthandthat resetsallCSS properties exceptdirectionandunicode-bidi. … It does not resetcustom properties[css-variables-1].

• Defined more precisely that imported stylesheets are interpreted separately from the importing stylesheet, in terms of ordering of rules, etc.

  If an@importrule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the@importrule , with two exceptions:

  • If a feature (such as the@namespacerule)explicitlydefines 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@charsetmust not have any other content preceding it), it only applies between constructs in the same stylesheet.

• Specified that text nodes are considered children of their parent element, and receive styles via defaulting, as their properties are now observable distinct from their inline parent’s viadisplay: contents[css-display-3].

  For the purpose of this specification,text nodesare treated aselementchildren 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 bydefaulting.

• Removed any mention of the obsolete “override” origin, originally defined byDOM Level 2 Styleand later abandoned. (Issue 1385)

ADisposition of Commentsis available.

8.4.Changes Since the 21 April 2015 Working Draft

Changes since the21 April 2015 Working Draftinclude:

• Renameddefaultkeyword torevert.
• Allowed dropping duplicate parentheses insupports()syntax when it only contains one declaration.

8.5.Additions Since Level 3

The following features have been added sinceLevel 3:

• Introducedrevertkeyword, for rolling back the cascade.

• Introducedsupports()syntax for supports-conditional@importrules.

• Addedencapsulation contextto thecascadesort criteria to accommodate Shadow DOM.[DOM]

• Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. See§ 3.1 Property Aliasing.

8.6.Additions Since Level 2

The following features have been added sinceLevel 2:

• Theallshorthand
• Theinitialkeyword
• Theunsetkeyword
• Incorporation of animations and transitions into thecascade.

Acknowledgments

David Baron, Tantek Çelik, Simon Sapin, Noam Rosenthal, and Boris Zbarsky contributed to this specification.

Privacy and Security Considerations

• The cascade process does not distinguish between same-origin and cross-origin stylesheets, enabling the content of cross-origin stylesheets to be inferred from the computed styles they apply to a document.

• User preferences and UA defaults expressed via application of style rules are exposed by the cascade process, and can be inferred from the computed styles they apply to a document.

• The@importrule does not apply theCORS protocolto loading cross-origin stylesheets, instead allowing them to be freely imported and applied.

• The@importrule assumes that resources withoutContent-Typemetadata(or any same-origin file if the host document is in quirks mode) aretext/css, potentially allowing arbitrary files to be imported into the page and interpreted as CSS, potentially allowing sensitive data to be inferred from the computed styles they apply to a document.