<pre class='metadata'>

Title: CSS Cascading and Inheritance Module Level 5

Shortname: css-cascade

Level: 5

Status: ED

Prepare for TR: no

Work Status: Refining

Group: csswg

ED: https://drafts.csswg.org/css-cascade-5/

TR: https://www.w3.org/TR/css-cascade-5/

Previous Version: https://www.w3.org/TR/2022/CR-css-cascade-5-20220113/

Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-5-20211015/

Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-5-20210829/

Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-5-20210608/

Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-5-20210319/

Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-5-20210119/

Implementation Report: https://wpt.fyi/results/css/css-cascade

Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151

Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199

Abstract: This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.

Abstract:

Abstract: New in this level is <a>cascade layers</a>.

At Risk: the ''revert-layer'' keyword

Ignored Terms: auto, flex items, <supports-condition>

Include Can I Use Panels: yes

Informative Classes: ex

</pre>

<pre class=link-defaults>

spec:css-2025; type:dfn; text:vendor-prefixed

spec:css-backgrounds-3;

type:property;

text:border

text:border-color

text:border-image

text:border-style

text:border-bottom-width

text:border-left-width

text:border-right-width

text:border-top-width

type:value; for:border-style; text:dotted

spec:css-color-4; type:property; text:color

spec:css-conditional-3; type:at-rule; text:@media

spec:css-values-3; type: value; text:ex

spec:css-values-5; type: function; text:if()

spec:css-fonts-4; type:property;

text:font-family

text:font-size-adjust

text:font-style

spec:dom; type:dfn; text:shadow tree

spec:html; type:element; text:audio

spec:mediaqueries-4; type:type;

for:@media; text:all

text:<media-query>

</pre>

<pre class=ignored-specs>

spec:mediaqueries-5

spec:css-values-5

</pre>

<h2 id="intro">

Introduction</h2>

CSS defines a finite set of parameters,

called <dfn export for=CSS lt="property">properties</dfn>,

that direct the rendering of a document.

Each [=CSS/property=] has a name

(e.g., 'color', 'font-size', or 'border-style'),

a value space

(e.g., <<color>>, <<length-percentage>>, <css>[ solid | dashed | dotted | &hellip; ]</css>),

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'', ''border-style/dotted'')

for the associated element or box.

One of the fundamental design principles of CSS is <a lt="cascade">cascading</a>,

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 <a>inheritance</a>

or by looking at the property's <a>initial value</a>.

The <a href="#cascade">cascading</a> and <a href="#defaulting">defaulting</a> process takes a set of [=declarations=] as input,

and outputs a <a>specified value</a> 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]].

<h3 id="placement">

Module Interactions</h3>

<em>This section is normative.</em>

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,

<a>text nodes</a> are treated as <a spec=css-display-3>element</a> 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 <a href="#defaulting">defaulting</a>.

<!--

███████ ████ ██ ██ ████████ ███████ ████████ ████████

██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██

██ ███ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██

██ ███ ██ ██ ██ ███ ██ ████████ ██ ██ ████████ ██

██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

███████ ████ ██ ██ ██ ███████ ██ ██ ██

-->

<h2 id="at-import">

Importing Style Sheets: the ''@import'' rule</h2>

The <dfn>@import</dfn> 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)

<em>explicitly</em> 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.

<p class='example'>

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 <a href="#layer-empty"><css>@layer</css> statement</a> 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:

<pre class='prod'>

@import [ <<url>> | <<string>> ]

[ layer | layer(<<layer-name>>) ]?

<<import-conditions>> ;

<dfn export>&lt;import-conditions></dfn> = [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]?

<<media-query-list>>?</pre>

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

<div class="example">

The following <a href="#conditional-import">conditional <css>@import</css> rule</a>

only loads the style sheet when the UA

<a href="https://www.w3.org/TR/css-conditional-3/#support-definition">supports</a> ''display: flex'',

and only applies the style sheet on a <a href="https://www.w3.org/TR/CSS2/media.html#media-types">handheld</a> device

with a <a href="https://www.w3.org/TR/mediaqueries-4/#width">maximum viewport width</a> of 400px.

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

</div>

<div class="example">

The following layer imports load the style sheets into

the ''framework.component'' layer, and an un-named layer, respectively:

<pre>

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

@import url("override.css") layer;

</pre>

</div>

If a <<string>> is provided,

it must be interpreted as a <<url>> with the same value.

<div class="example">

The following lines are equivalent in meaning

and illustrate both ''@import'' syntaxes

(one with ''url()'' and one with a bare string):

<pre class='lang-css'>

@import "mystyle.css";

@import url("mystyle.css");

</pre>

</div>

<h3 id=conditional-import>

Conditional ''@import'' Rules</h3>

<dfn export>Import conditions</dfn> allow the import to be media&ndash; or feature-support&ndash;dependent.

In the absence of any <a>import conditions</a>, the import is unconditional.

(Specifying ''@media/all'' for the <<media-query-list>> has the same effect.)

If the <a>import conditions</a> 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.

<div class=example>

The following rules illustrate how ''@import'' rules can be made media-dependent:

<pre class='lang-css'>

@import url("fineprint.css") print;

@import url("bluish.css") projection, tv;

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

</pre>

</div>

User agents may therefore avoid fetching a conditional import

as long as the <a>import conditions</a> do not match.

Additionally, if a <<supports-condition>> blocks the application of the imported style sheet,

the UA <em>must not</em> fetch the style sheet (unless it is loaded through some other link)

and <em>must</em> return null for the import rule's CSSImportRule.styleSheet value

(even if it is loaded through some other link).

<div class="example">

The following rule illustrates how an author can provide fallback rules for legacy user agents

without impacting network performance on newer user agents:

<pre class='lang-css'>

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

@supports (display: flex) {

...

}

</pre>

</div>

The [=import conditions=] are given by

<<media-query-list>>, which is parsed and interpreted as a <a>media query list</a>,

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

<div class="example">

For example, the following two lines are equivalent:

<pre class='lang-css'>

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

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

</pre>

</div>

The evaluation and full syntax of the <a>import conditions</a>

are defined by the <a href="https://www.w3.org/TR/mediaqueries/">Media Queries</a> [[!MEDIAQ]]

and <a href="https://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS-CONDITIONAL-3]] specifications.

<h3 id=import-processing>

Processing Stylesheet Imports</h3>

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 <a>environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. [[css-syntax-3]]

<h3 id='content-type'>

Content-Type of CSS Style Sheets</h3>

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

* If the resource does not have <l spec=html>[=Content-Type metadata=]</l>,

the type is treated as <code>text/css</code>.

* If the host document is in [=quirks mode=],

and the host document's origin is [=same origin=]

with the linked resource [=/response's=] [=response/URL's=] origin,

the type is treated as <code>text/css</code>.

* Otherwise, the type is determined from its <l spec=html>[=Content-Type metadata=]</l>.

If the linked resource's type is <code>text/css</code>,

it must be interpreted as a CSS style sheet.

Otherwise, it must be interpreted as a network error.

<!--

██████ ██ ██ ███████ ████████ ████████ ██ ██ ███ ██ ██ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██

██████ █████████ ██ ██ ████████ ██ █████████ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████████ ██ ████ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██

██████ ██ ██ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████

-->

<h2 id='shorthand'>

Shorthand Properties</h2>

Some properties are <dfn export lt="shorthand property | shorthand">shorthand properties</dfn>,

meaning that they allow authors to specify the values of several properties with a single property.

A <a>shorthand property</a> sets all of its <dfn export lt="longhand | longhand property | sub-property">longhand sub-properties</dfn>,

exactly as if expanded in place.

When values are omitted from a <a>shorthand</a> form,

unless otherwise defined,

each “missing” <a>sub-property</a> is assigned its <a>initial value</a>.

<div class='note'>

This means that a <a>shorthand</a> [=property declaration=] always sets <em>all</em> of its <a>sub-properties</a>,

even those that are not explicitly set.

Carelessly used, this might result in inadvertently resetting some <a>sub-properties</a>.

Carefully used, a <a>shorthand</a> can guarantee a “blank slate”

by resetting <a>sub-properties</a> inadvertently cascaded from other sources.

For example, writing ''background: green'' rather than ''background-color: green''

ensures that the background color overrides any earlier [=declarations=]

that might have set the background to an image with 'background-image'.

</div>

<div class='example'>

For example, the CSS Level 1 'font' property

is a <a>shorthand</a> property for setting <a property>font-style</a>, <a property>font-variant</a>, <a property>font-weight</a>, 'font-size', 'line-height', and <a property>font-family</a> all at once.

The multiple declarations of this example:

<pre class='lang-css'>

h1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal;

}

</pre>

can therefore be rewritten as

<pre class='lang-css'>h1 { font: bold 12pt/14pt Helvetica }</pre>

As more 'font' <a>sub-properties</a> are introduced into CSS,

the shorthand declaration resets those to their initial values as well.

</div>

In some cases, a <a>shorthand</a> might have different syntax

or special keywords

that don't directly correspond to values of its <a>sub-properties</a>.

(In such cases, the <a>shorthand</a> will explicitly define the expansion of its values.)

In other cases, a property might be a <dfn export>reset-only sub-property</dfn> of the shorthand:

Like other <a>sub-properties</a>, it is reset to its initial value by the shorthand when unspecified,

but the shorthand might not include syntax to set the <a>sub-property</a>

to any of its other values.

<span class=ex>For example, the 'border' shorthand resets 'border-image'

to its initial value of ''border-image/none'',

but has no syntax to set it to anything else. [[css-backgrounds-3]]</span>

If a <a>shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a> [[!css-values-3]],

it sets all of its <a>sub-properties</a> to that keyword,

including any that are <a>reset-only sub-properties</a>.

(Note that these keywords cannot be combined with other values in a single [=declaration=], not even in a shorthand.)

Declaring a <a>shorthand</a> property to be ''!important''

is equivalent to declaring all of its <a>sub-properties</a> to be ''!important''.

<h3 id="aliasing">

Property Aliasing</h3>

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.

<dl export>

<dt><dfn lt="legacy name alias">legacy name aliases</dfn>

<dd>

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.

<div class=example highlight=js>

For example, if

<css>old-name</css> is a <a>legacy name alias</a> for <css>new-name</css>,

<code>getComputedStyle(el).oldName</code>

will return the computed style of the <code>newName</code> property,

and <code>el.style.setProperty("old-name", "value")</code>

will set the <css>new-name</css> property to <code>"value"</code>.

</div>

<dt><dfn lt="legacy shorthand">legacy shorthands</dfn>

<dd>

When the old property has a distinct syntax from the new property,

the two names are aliased using the <a>shorthand</a> mechanism.

These shorthands are defined to be <a>legacy shorthands</a>,

and their use is <em>deprecated</em>.

They otherwise behave exactly as regular shorthands,

except that the CSSOM will not use them

when serializing declarations. [[CSSOM]]

<div class=example highlight=js>

For example, the 'page-break-*' properties

are <a>legacy shorthands</a> 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 <code>getComputedStyle(el).pageBreakBefore</code> will return <code>"always"</code>.

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.

</div>

</dl>

<h3 id="all-shorthand" caniuse="css-all">

Resetting All Properties: the 'all' property</h3>

<pre class="propdef shorthand">

Name: all

Value: initial | inherit | unset | revert | revert-layer | revert-rule

</pre>

The 'all' property is a <a>shorthand</a>

that resets <em>all</em> CSS properties

except 'direction' and 'unicode-bidi'.

It only accepts the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a>.

It does not reset <a>custom properties</a> [[css-variables-1]].

Note: The excepted CSS properties 'direction' and 'unicode-bidi'

are actually markup-level features,

and <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">should not be set in the author's style sheet</a>.

(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 <code>dir</code> attribute, instead.

[[css-writing-modes-3]]

<div class='example'>

For example, if an author specifies ''all: initial'' on an element,

it will block all inheritance and reset all properties,

as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page,

which does not wish to inherit the styles of the outer page.

Note, however, that any "default" style applied to that element

(such as, e.g. ''display: block'' from the UA style sheet on block elements such as <code>&lt;div></code>)

will also be blown away.

</div>

<!--

██████ ████████ ███ ██████ ████████ ██████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██ ██ ████ ██████ ██████

██ ██ █████████ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██ ██████ ████████ ██████

-->

<h2 id="value-stages">

Value Processing</h2>

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:

<ol>

<li>

First, all the <a>declared values</a> applied to an element are collected,

for each property on each element.

There may be zero or many <a>declared values</a> applied to the element.

<li>

Cascading yields the <a>cascaded value</a>.

There is at most one <a>cascaded value</a> per property per element.

<li>

Defaulting yields the <a>specified value</a>.

Every element has exactly one <a>specified value</a> per property.

<li>

Resolving value dependencies yields the <a>computed value</a>.

Every element has exactly one <a>computed value</a> per property.

<li>

Formatting the document yields the <a>used value</a>.

An element only has a <a>used value</a> for a given property

if that property applies to the element.

<li>

Finally, the used value is transformed to the <a>actual value</a>

based on constraints of the display environment.

As with the <a>used value</a>, there may or may not be an <a>actual value</a>

for a given property on an element.

</ol>

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 <code>style</code> attribute).

<h3 id="declared">

Declared Values</h3>

Each [=property declaration=] <a href="#filtering">applied to an element</a>

contributes a <dfn export local-lt="declared">declared value</dfn> for that property

associated with the element.

See <a href="#filtering">Filtering Declarations</a> for details.

These values are then processed by the <a>cascade</a>

to choose a single “winning value”.

<h4 id="value-aliasing">

Value Aliasing</h4>

Some property values have <dfn export for=CSS lt="legacy value alias">legacy value aliases</dfn>:

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.

<h3 id="cascaded">

Cascaded Values</h3>

The <dfn export local-lt="cascaded">cascaded value</dfn>

represents the result of <a href="#cascade">the cascade</a>:

it is the <a>declared value</a> that wins the cascade

(is sorted first in the <a>output of the cascade</a>).

If the <a>output of the cascade</a> is an empty list,

there is no <a>cascaded value</a>.

<h3 id="specified">

Specified Values</h3>

The <dfn export local-lt="specified">specified value</dfn> is

the value of a given property that the style sheet authors intended for that element.

It is the result of putting the <a>cascaded value</a> through the <a href="#defaulting">defaulting</a> processes,

guaranteeing that a <a>specified value</a> exists for every property on every element.

In many cases, the <a>specified value</a> is the <a>cascaded value</a>.

However, if there is no <a>cascaded value</a> at all,

the <a>specified value</a> is <a href="#defaulting">defaulted</a>.

The [=CSS-wide keywords=] are handled specially

when they are the <a>cascaded value</a> of a property,

setting the <a>specified value</a> as required by that keyword,

see [[#defaulting-keywords]].

<h3 id="computed">

Computed Values</h3>

The <dfn export local-lt="computed">computed value</dfn> is

the result of resolving the <a>specified value</a>

as defined in the “Computed Value” line of the property definition table,

generally absolutizing it in preparation for <a>inheritance</a>.

Note: The <a>computed value</a> is the value that is transferred from parent to child during <a>inheritance</a>.

For historical reasons,

it is not necessarily the value returned by the {{getComputedStyle()}} function,

which sometimes returns <a>used values</a>. [[CSSOM]]

Furthermore, the <a>computed value</a> 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 <a>computed value</a>.

<div class="example">

A <a>specified value</a> can be either absolute (i.e., not relative to another value, as in ''red'' or ''2mm'')

or relative (i.e., relative to another value, as in ''auto'', ''2em'').

Computing a relative value generally absolutizes it:

<ul>

<li>

values with relative units

(''em'', ''ex'', ''vh'', ''vw'')

must be made absolute by multiplying with the appropriate reference size

<li>

certain keywords

(e.g., ''smaller'', ''bolder'')

must be replaced according to their definitions

<li>

percentages on some properties must be multiplied by a reference value

(defined by the property)

<li>

valid relative URLs must be resolved to become absolute.

</ul>

See examples (f), (g) and (h) in the <a href="#stages-examples">table below</a>.

</div>

Note: In general, the <a>computed value</a> resolves the <a>specified value</a>

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 <a>computed value</a> exists even when the property does not apply.

However, some properties may change how they determine the <a>computed value</a>

based on whether the property [=applies to=] the element.

<h3 id='used'>

Used Values</h3>

The <dfn export local-lt="used">used value</dfn> is

the result of taking the <a>computed value</a>

and completing any remaining calculations to make it the absolute theoretical value

used in the formatting of the document.

<p class='example'>

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 <a>computed value</a> is ''auto'',

while the <a>used value</a> is an absolute length, such as ''100px''. [[CSS2]]

<p class='example'>

As another example, a <code>&lt;div></code> 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]]

If a property does not [=apply to=]

this element or box type

then it has no <a>used value</a> for that property.

<p class='example'>

For example, the 'flex' property has no <a>used value</a>

on elements that aren't <a>flex items</a>.

<h4 id="applies-to">

Applicable Properties</h4>

If a property does not <dfn export for=CSS id="apply">apply to</dfn>

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 <em>indirect</em> 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.

<div class=example>

Even though 'writing-mode' and 'text-orientation' do not apply to table rows

(they do not affect how the table row or its children are laid out),

setting them on such boxes

will still affect the calculation of font relative units such as ''ch'',

and thus possibly any property that takes a <<length>>.

</div>

<div class=example>

Setting 'text-transform' on an HTML <{p}> element

(which is ''display: block'' by default)

will have an effect,

even though 'text-transform' only applies to [=inline boxes=],

because the property inherits

into the paragraph's anonymous [=root inline box=]

and applies to the text it contains.

</div>

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

<h3 id="actual">

Actual Values</h3>

A <a>used value</a> 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.

<span class=ex>For example, a user agent may only be able to render borders with integer pixel widths

and may therefore have to approximate the <a lt="used value">used</a> 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.</span>

The <dfn export local-lt="actual">actual value</dfn> 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 <a href="#stages-examples">table below</a>.

<h3 id="stages-examples">

Examples</h3>

<table class="data non-normative">

<caption>Examples of CSS Value Computation</caption>

<thead>

<tr>

<th>

<th>Property

<th>Winning declaration

<th>Cascaded value

<th>Specified value

<th>Computed value

<th>Used value

<th>Actual value

<tbody>

<tr>

<td>(a)

<th>'text-align'

<td><code class="declaration">text-align: left</code>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<td><css>left</css>

<tr>

<td>(b)

<th>'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

<td><code class="declaration">border-width: inherit</code>

<td><css>inherit</css>

<td class="say"><css>4.2px</css>

<td><css>4.2px</css>

<td><css>4.2px</css>

<td><css>4px</css>

<tr>

<td>(c)

<th>'width'

<td><small>(none)</small>

<td><small>(none)</small>

<td><css>auto</css> <small>(initial&nbsp;value)</small>

<td><css>auto</css>

<td><css>120px</css>

<td><css>120px</css>

<tr>

<td>(d)

<th>'list-style-position'

<td><code class="declaration">list-style-position: inherit</code>

<td><css>inherit</css>

<td class="say"><css>inside</css>

<td><css>inside</css>

<td><css>inside</css>

<td><css>inside</css>

<tr>

<td>(e)

<th>'list-style-position'

<td><code class="declaration">list-style-position: initial</code>

<td><css>initial</css>

<td><css>outside</css> <small>(initial&nbsp;value)</small>

<td><css>outside</css>

<td><css>outside</css>

<td><css>outside</css>

<tr>

<td>(f)

<th>'font-size'

<td><code class="declaration">font-size: 1.2em</code>

<td><css>1.2em</css>

<td><css>1.2em</css>

<td class="say"><css>14.1px</css>

<td><css>14.1px</css>

<td><css>14px</css>

<tr>

<td>(g)

<th>'width'

<td><code class="declaration">width: 80%</code>

<td><css>80%</css>

<td><css>80%</css>

<td><css>80%</css>

<td class="say"><css>354.2px</css>

<td><css>354px</css>

<tr>

<td>(h)

<th>'width'

<td><code class="declaration">width: auto</code>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<td class="say"><css>134px</css>

<td><css>134px</css>

<tr>

<td>(i)

<th>'height'

<td><code class="declaration">height: auto</code>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<td class="say"><css>176px</css>

<td><css>176px</css>

<tr>

<td>(j)

<th>'page-break-after'

<td><small>(none)</small>

<td><small>(none)</small>

<td><css>auto</css> <small>(initial&nbsp;value)</small>

<td><css>auto</css>

<td><css>auto</css>

<td><css>auto</css>

<tr>

<td>(k)

<th>'orphans'

<td><code class="declaration">orphans: 3</code>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

<td><css>3</css>

</table>

<h3 id="fragments">

Per-Fragment Value Processing</h3>

Certain CSS features

can interfere with value processing

on a per-fragment basis.

See for example [[css-pseudo-4#first-line-inheritance]]

which alters inheritance for fragments within the ''::first-line'' pseudo-element.

In such cases, where individual fragments are given different [=specified values=],

any values that resolve

based on the [=computed value=] of other properties

(such as ''currentcolor'' or ''em'' units)

are resolved per [=box fragment=].

Subsequent value processing proceeds as normal in each fragment.

APIs that assume a singular value per [=box=] (rather than per [=box fragment=])

must ignore the effects of non-[=tree-abiding pseudo-elements=].

(For example, ''::first-line'' styles have no effect on the value returned by {{getComputedStyle()}}.)

<div class=example>

For example, given the following markup:

<xmp highlight=html>

<div><span>First line<br />Second line</span></div>

<div><span>First line</span></div>

<div>First line<br><span>Second line</span></div>

<style>

div { color: blue; }

div::first-line { color: yellow; }

span { border: thin solid currentcolor; }

</style>

</xmp>

In each <{div}>, the “First line” text is yellow and the “Second line” text is blue;

the border for each fragment of the <{span}>s that wrap each line matches that color.

However, {{getComputedStyle()}} on all three of the spans

will return <code>"blue"</code> for 'border-color',

because the effects of a ''::first-line'' pseudo-element

are ignored for APIs that aren't fragment-aware.

</div>

<!--

████████ ████ ██ ████████ ████████ ████████ ████ ██ ██ ██████

██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██

██████ ██ ██ ██ ██████ ████████ ██ ██ ██ ██ ██ ████

██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██

██ ████ ████████ ██ ████████ ██ ██ ████ ██ ██ ██████

-->

<h2 id='filtering'>

Filtering</h2>

In order to find the <a>declared values</a>,

implementations must first identify all [=declarations=] that apply to each element.

A declaration applies to an element if:

<ul>

<li>

It belongs to a style sheet that currently applies to this document.

<li>

It is not qualified by a conditional rule [[!CSS-CONDITIONAL-3]] with a false condition.

<li>

It belongs to a style rule whose selector matches the element. [[!SELECT]]

(Taking <a href="https://www.w3.org/TR/selectors-4/#scoping">scoping</a> into account, if necessary.)

<li>

It is syntactically valid:

the declaration's property is a known property name,

and the declaration's value matches the syntax for that property.

</ul>

The values of the [=declarations=] that apply form,

for each property on each element,

a list of <a>declared values</a>.

The next section,

the <a>cascade</a>,

prioritizes these lists.

<!--

██████ ███ ██████ ██████ ███ ████████ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██████ ██ ██ ██ ██ ██ ██████

██ █████████ ██ ██ █████████ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██████ ██ ██ ██████ ██████ ██ ██ ████████ ████████

-->

<h2 id='cascading'>

Cascading</h2>

The <dfn export>cascade</dfn>

takes an unordered list of <a>declared values</a>

for a given property on a given element,

sorts them by their [=declaration’s=] precedence as determined below,

and outputs a single <a>cascaded value</a>.

<h3 id="cascade-sort">

Cascade Sorting Order</h3>

The cascade sorts [=declarations=] according to the following criteria,

in descending order of precedence:

<dl>

<dt id='cascade-origin'>Origin and Importance

<dd>

The <a>origin</a> of a [=declaration=] is based on where it comes from

and its <a lt="important">importance</a> is

whether or not it is declared with ''!important''

(see [[#importance|below]]).

The precedence of the various <a>origins</a> is, in descending order:

<ol>

<li>Transition declarations [[!css-transitions-1]]

<li>[=Important=] [=user-agent origin|user agent=] declarations

<li>[=Important=] [=user origin|user=] declarations

<li>[=Important=] [=author origin|author=] declarations

<li>Animation declarations [[!css-animations-1]]

<li>[=Normal=] [=author origin|author=] declarations

<li>[=Normal=] [=user origin|user=] declarations

<li>[=Normal=] [=user-agent origin|user agent=] declarations

</ol>

Declarations from <a>origins</a> earlier in this list win over declarations from later <a>origins</a>.

<dt id='cascade-context'>Context

<dd>

A document language can provide for blending [=declarations=] sourced

from different <dfn local-lt="context">encapsulation contexts</dfn>,

such as the nested [=tree contexts=] of [=shadow trees=] in the [[!DOM]].

When comparing two declarations

that are sourced from different [=encapsulation contexts=],

then for [=normal=] rules

the declaration from the outer context wins,

and for [=important=] rules

the declaration from the inner context wins.

For this purpose,

[[DOM]] [=tree contexts=] are considered to be nested

in [=shadow-including tree order=].

Note: This effectively means that

[=normal=] declarations belonging to an [=encapsulation context=]

can set defaults that are easily overridden by the outer context,

while [=important=] declarations belonging to an [=encapsulation context=]

can enforce requirements that cannot be overridden by the outer context.