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

Processing Stylesheet Imports

Content-Type of CSS Style Sheets

Shorthand Properties

		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 }

Aliasing

legacy name aliases

When the old property’s syntax is identical to or a subset of the value space of the new property’s syntax, 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.setPropertyValue("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-break-3#page-break-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-1#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.

Resetting All Properties: the 'all' property

	Name: all
	Value: initial | inherit | unset | revert
	

Value Processing

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.

Declared Values

Cascaded Values

Specified Values

Computed Values

Used Values

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 ''break-before/page'' by propagation from its first child. [[css-break-3]]

Lastly, if a property does not apply to an element, it has no used value; so, for example, the 'flex' property has no used value on elements that aren't flex items.

Actual Values

Examples

Filtering

• It belongs to a style sheet that currently applies to this document.
• It is not qualified by a conditional rule [[!CSS3-CONDITIONAL]] with a false condition.
• It belongs to a style rule whose selector matches the element. [[!SELECT]] (Taking scoping into 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.

Cascading

Origin and Importance

The origin of a declaration is based on where it comes from and its importance is whether or not it is declared ''!important'' (see below). The precedence of the various origins is, in descending order:

1. Transition declarations [[!css-transitions-1]]
2. Important user agent declarations
3. Important user declarations
4. Important author declarations
5. Animation declarations [[!css-animations-1]]
6. Normal author declarations
7. Normal user declarations
8. Normal user agent declarations

Declarations from origins earlier in this list win over declarations from later origins.

Scope

A declaration can be scoped to a subtree of the document so that it only affects its scoping element and that element's descendants. For example, [[HTML]] defines scoped <style> elements, whose style sheets are scoped to the element's parent. If the scoping elements of two declarations have an ancestor/descendant relationship, then for normal rules the declaration whose scoping element is the descendant wins, and for important rules the declaration whose scoping element is the ancestor wins. Note: In other words, for normal declarations the inner scope's declarations override, but for ''!important'' rules outer scope's override. For the purpose of this step, all unscoped declarations are considered to be scoped to the root element. Normal declarations from style attributes are considered to be scoped to the element with the attribute, whereas important declarations from style attributes are considered to be scoped to the root element. [[!CSSSTYLEATTR]] Note: This odd handling of ''!important'' style attribute declarations is to match the behavior defined in CSS Levels 1 and 2, where style attributes simply have higher specificity than any other author rules. [[CSS2]]

Specificity

The Selectors 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 the contents 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 from imported style sheets are ordered as if their style sheets were substituted in place of the ''@import'' rule.
• 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.

Cascading Origins

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. the HTML user agent style sheet. [[HTML]]

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.

Important Declarations: the ''!important'' annotation

[hidden] { display: none !important; }

		/* 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: normal 12pt sans-serif !important }
		p { font-size: 24pt }
		

Precedence of Non-CSS Presentational Hints

Defaulting

Initial Values

Inheritance

Explicit Defaulting

Resetting a Property: the ''initial'' keyword

Explicit Inheritance: the ''inherit'' keyword

Erasing All Declarations: the ''unset'' keyword

Rolling Back The Cascade: the ''revert'' keyword

user-agent origin

Equivalent to ''unset''.

user origin

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

author origin

Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-level rules were specified for this property on this element. For the purpose of ''revert'', this origin includes the Animation origin.

Changes

Changes Since the 14 January 2016 Candidate Recommendation

• Precisely defined the types of aliasing that CSS uses. (Issue 866) See [[#aliasing]].
• Clarified that ''revert'' only affects the cascaded value, not the inherited value.

  user origin

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

  author origin

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

• Clarified that custom properties are not reset by the 'all' shorthand. (2518)

  The 'all' property is a shorthand that resets all CSS properties except 'direction' and 'unicode-bidi'. … It does not reset custom 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 ''@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 ''@charset'' must 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 via ''display: contents'' [[css-display-3]].

  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 targetted by selectors all of their computed values are assigned by defaulting.

• Removed any mention of the obsolete “override” origin, originally defined by DOM Level 2 Style and later abandoned. (Issue 1385)

Changes Since the 21 April 2015 Working Draft

• Renamed default keyword to ''revert''.
• Allowed dropping duplicate parentheses in ''supports()'' syntax when it only contains one declaration.

Additions Since Level 3

Additions Since Level 2

• The 'all' shorthand
• The ''unset'' keyword
• Incorporation of animations and transitions into the cascade.

Acknowledgments

Privacy and Security Considerations