>.
For example, the following two lines are equivalent:
@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));
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]]
To
fetch an @import, given an ''@import'' rule |rule|:
1. Let |parentStylesheet| be |rule|'s
parent CSS style sheet.
[[CSSOM]]
2. If |rule| has a <
>,
and that condition is not true,
return.
3. Let |parsedUrl| be the result of the [=URL parser=] steps with |rule|'s URL and
|parentStylesheet|'s location.
If the algorithm returns an error,
return. [[CSSOM]]
4. [=Fetch a style resource=] from |parsedUrl|,
with stylesheet |parentStylesheet|,
destination "style",
CORS mode "no-cors",
and processResponse being the following steps given [=/response=] |response| and
byte stream, null or failure |byteStream|:
1. If |byteStream| is not a byte stream, return.
2. If |parentStylesheet| is in [=quirks mode=]
and |response| is [=CORS-same-origin=],
let |content type| be "text/css".
Otherwise, let |content type| be the Content Type metadata of |response|.
3. If |content type| is not "text/css",
return.
4. Let |importedStylesheet| be the result of [=Parse a stylesheet|parsing=] |byteStream|
given |parsedUrl|.
5. Set |importedStylesheet|'s origin-clean flag to
|parentStylesheet|'s origin-clean flag.
6. If |response| is not [=CORS-same-origin=], unset |importedStylesheet|'s
origin-clean flag.
7. Set |rule|'s {{CSSImportRule/styleSheet}} to |importedStylesheet|.
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=] [=response/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.
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.
This means that a
shorthand [=property declaration=] always sets
all of its
sub-properties,
even those that are not explicitly set.
Carelessly used, this might result in inadvertently resetting some
sub-properties.
Carefully used, a
shorthand can guarantee a “blank slate”
by resetting
sub-properties 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'.
For example, the CSS Level 1 'font' property
is a
shorthand property for setting
font-style,
font-variant,
font-weight, 'font-size', 'line-height', and
font-family all at once.
The multiple declarations of this example:
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
can therefore be rewritten as
h1 { font: bold 12pt/14pt Helvetica }
As more 'font'
sub-properties are introduced into CSS,
the shorthand declaration resets those to their initial values as well.
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.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
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]]
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 <div>)
will also be blown away.
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:
-
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.
-
Cascading yields the cascaded value.
There is at most one cascaded value per property per element.
-
Defaulting yields the specified value.
Every element has exactly one specified value per property.
-
Resolving value dependencies yields the computed value.
Every element has exactly one computed value per property.
-
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.
-
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).
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”.
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.
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.
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 [[#defaulting-keywords]].
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.
A
specified value 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:
-
values with relative units
(''em'', ''ex'', ''vh'', ''vw'')
must be made absolute by multiplying with the appropriate reference size
-
certain keywords
(e.g., ''smaller'', ''bolder'')
must be replaced according to their definitions
-
percentages on some properties must be multiplied by a reference value
(defined by the property)
-
valid relative URLs must be resolved to become absolute.
See examples (f), (g) and (h) in the
table below.
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 ''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 used value for that property.
For example, the 'flex' property has no used value
on elements that aren't flex items.
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.
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 <>.
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.
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=].
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.
Examples
Examples of CSS Value Computation
|
| Property
| Winning declaration
| Cascaded value
| Specified value
| Computed value
| Used value
| Actual value
|
| (a)
| 'text-align'
| text-align: left
| left
| left
| left
| left
| left
|
| (b)
| 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
| border-width: inherit
| inherit
| 4.2px
| 4.2px
| 4.2px
| 4px
|
| (c)
| 'width'
| (none)
| (none)
| auto (initial value)
| auto
| 120px
| 120px
|
| (d)
| 'list-style-position'
| list-style-position: inherit
| inherit
| inside
| inside
| inside
| inside
|
| (e)
| 'list-style-position'
| list-style-position: initial
| initial
| outside (initial value)
| outside
| outside
| outside
|
| (f)
| 'font-size'
| font-size: 1.2em
| 1.2em
| 1.2em
| 14.1px
| 14.1px
| 14px
|
| (g)
| 'width'
| width: 80%
| 80%
| 80%
| 80%
| 354.2px
| 354px
|
| (h)
| 'width'
| width: auto
| auto
| auto
| auto
| 134px
| 134px
|
| (i)
| 'height'
| height: auto
| auto
| auto
| auto
| 176px
| 176px
|
| (j)
| 'page-break-after'
| (none)
| (none)
| auto (initial value)
| auto
| auto
| auto
|
| (k)
| 'orphans'
| orphans: 3
| 3
| 3
| 3
| 3
| 3
|
Filtering
In order to find the declared 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]]
(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.
The values of the [=declarations=] that apply form,
for each property on each element,
a list of declared values.
The next section,
the cascade,
prioritizes these lists.
Cascading
The cascade
takes an unordered list of declared values
for a given property on a given element,
sorts them by their [=declaration’s=] precedence as determined below,
and outputs a single cascaded value.
Cascade Sorting Order
The cascade sorts [=declarations=] according to the following criteria,
in descending order of precedence:
- 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 with ''!important''
(see [[#importance|below]]).
The precedence of the various origins is, in descending order:
- Transition declarations [[!css-transitions-1]]
- [=Important=] [=user-agent origin|user agent=] declarations
- [=Important=] [=user origin|user=] declarations
- [=Important=] [=author origin|author=] declarations
- Animation declarations [[!css-animations-1]]
- [=Normal=] [=author origin|author=] declarations
- [=Normal=] [=user origin|user=] declarations
- [=Normal=] [=user-agent origin|user agent=] declarations
Declarations from origins earlier in this list win over declarations from later origins.
- Context
-
A document language can provide for blending [=declarations=] sourced
from different encapsulation contexts,
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.
- 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:
- Style sheets are ordered
in [[final CSS style sheets]] order.
- 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.
[[!CSSSTYLEATTR]]
The output of the cascade
is a (potentially empty) sorted list of declared values for each property on each element.
Cascading Origins
Each style rule has a cascade origin,
which determines where it enters the cascade.
CSS defines three core 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]]
Extensions to CSS define the following additional origins:
- 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
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 marked [=important=],
which increases its weight in the cascade and inverts the order of precedence.
A [=declaration=] is important
if it has a ''!important'' annotation 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 token ''important''.
All other declarations are normal (non-[=important=]).
[hidden] { display: none !important; }
An important declaration takes precedence over a [=normal=] declaration.
Author and user style sheets may contain [=important=] declarations,
with [=user-origin=] [=important=] declarations
overriding [=author-origin=] [=important=] declarations.
This CSS feature improves accessibility of documents
by giving users with special requirements
(large fonts, color combinations, etc.)
control over presentation.
[=Important=] declarations 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 sheets=] may also contain [=important=] declarations.
These override all [=author origin|author=] and [=user origin|user=] declarations.
The first rule in the user's style sheet in the following example contains an ''!important'' declaration,
which overrides the corresponding declaration in the author's style sheet.
The declaration in the second rule will also win due to being marked ''!important''.
However, the third declaration in the user's style sheet is not ''!important''
and will therefore lose to the second rule in the author's style sheet
(which happens to set style on a
shorthand property).
Also, the third author rule will lose to the second author rule since the second declaration is ''!important''.
This shows that ''!important'' declarations have a function also within author style sheets.
/* 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 }
| Property
| Winning value
|
| 'text-indent'
| ''1em''
|
| 'font-style'
| ''font-style/italic''
|
| 'font-size'
| ''12pt''
|
| 'font-family'
| ''sans-serif''
|
Precedence of Non-CSS Presentational Hints
The UA may choose to honor presentational hints in a source document's markup,
for example the bgcolor attribute or <{s}> element in [[HTML]].
All document language-based styling must be translated to corresponding CSS rules
and enter the cascade as rules in either
the [=UA-origin=] or a special-purpose author presentational hint origin
between the regular [=user origin=] and the [=author origin=].
For the purpose of [=cascading=]
this [=author presentational hint origin=] is treated as an independent [=origin=],
but for the purpose of the ''revert'' keyword
it is considered part of the [=author origin=].
A document language may define whether such a presentational hint
enters the [=cascade=] as [=UA-origin=] or [=author-origin=];
if so, the UA must behave accordingly.
For example, [[SVG11]] maps its presentation attributes into the [=author origin=].
Note: Presentational hints entering the [=cascade=] as [=UA-origin=] rules
can be overridden by [=author-origin=] or [=user-origin=] styles.
Presentational hints entering the cascade as [=author presentational hint origin=] rules
can be overridden by [=author-origin=] styles,
but not by non-[=important=] [=user-origin=] styles.
Host languages should choose the appropriate origin for presentational hints
with these considerations in mind.
Defaulting
When the cascade does not result in a value,
the specified value must be found some other way.
Inherited properties draw their defaults from their parent element through inheritance;
all other properties take their initial value.
Authors can explicitly request inheritance or initialization
via the ''inherit'' and ''initial'' keywords.
Initial Values
Each property has an initial value,
defined in the property's definition table.
If the property is not an inherited property,
and the cascade does not result in a value,
then the specified value of the property is its initial value.
Inheritance
Inheritance propagates property values from parent elements to their children.
The inherited value of a property on an element
is the computed value of the property on the element's parent element.
For the root element,
which has no parent element,
the inherited value is the initial value of the property.
For a [[DOM]] tree with shadows,
inheritance operates on the [=flattened element tree=].
This means that slotted elements inherit from the <{slot}> they're assigned to,
rather than directly from their [=light tree=] parent.
[=Pseudo-elements=] inherit according to the fictional tag sequence
described for each [=pseudo-element=]. [[!CSS-PSEUDO-4]]
Some properties are inherited properties,
as defined in their property definition table.
This means that,
unless the [=cascade=] results in a value,
the value will be determined by [=inheritance=].
A property can also be explicitly inherited. See the ''inherit'' keyword.
Note: Inheritance follows the document tree and is not intercepted by anonymous boxes,
or otherwise affected by manipulations of the box tree.
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 in CSS Values and Units [[!css-values-3]],
all CSS properties can accept these values.
The keyword ''revert''
is a cascade-dependent keyword;
some contexts may restrict its use
while allowing the other [=CSS-wide keywords=].
Resetting a Property: the ''initial'' keyword
The initial [=CSS-wide keyword=]
represents the value defined as the property's [=initial value=].
If the cascaded value of a property is
the ''initial'' keyword,
the property's specified value is its initial value.
Explicit Inheritance: the ''inherit'' keyword
The inherit [=CSS-wide keyword=]
represents the property’s [=computed value=] on the parent element.
If the cascaded value of a property is
the ''inherit'' keyword,
the property's specified and computed values are the inherited value.
Erasing All Declarations: the ''unset'' keyword
The unset [=CSS-wide keyword=]
acts as either ''inherit'' or ''initial'',
depending on whether the property is [=inherited property|inherited=] or not.
If the cascaded value of a property is
the ''unset'' keyword,
then if it is an inherited property, this is treated as ''inherit'',
and if it is not, this is treated as ''initial''.
This keyword effectively erases all declared values occurring earlier in the cascade,
correctly inheriting or not as appropriate for the property
(or all longhands of a shorthand).
Rolling Back Cascade Origins: the ''revert'' keyword
The revert [=CSS-wide keyword=]
rolls back the cascade to the [=cascaded value=] of the earlier [=origin=].
If the cascaded value of a property is
the ''revert'' keyword,
the behavior depends on the [=cascade origin=] to which the [=declaration=] belongs:
- [=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-origin=] or [=user-origin=] 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-origin=] rules were specified
for this property on this element.
For the purpose of ''revert'', this origin includes the Animation origin.
Note: Effectively the ''revert'' keyword is substituted with
the value from the earlier [=cascade origin=].
Thus, reverting a [=shorthand property=] reverts all its longhands;
reverting any [[#aliasing|property alias]] of a property reverts all of them;
reverting one of the paired properties in a [=logical property group=]
also reverts the other one; etc.
Changes
Changes since the 13 Jan 2022 Candidate Recommendation Snapshot
Non-trivial changes since the 13 Jan 2022 Candidate Recommendation Snapshot:
* Clarify that all “aliases” of a property are reverted by ''revert''.
* Clarify that style sheets are ordered in [[final CSS style sheets]] order.
Changes since the 15 Oct 2021 Working Draft
Non-trivial changes since the 15 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 [[#value-aliasing]] section.
(Issue 6193)
Changes Since the 28 August 2018 Candidate Recommendation
Non-trivial changes since the 19 March 2021 Working Draft include:
-
Defined [=author presentational hint origin=] to handle author-origin presentational hints,
instead of relying on zero-specificity and source order,
to correctly define their interaction with the [=encapsulation context=]
aspect of the cascade.
(Issue 66749)
Non-trivial changes since the 18 August 2020 Working Draft include:
-
Removed possibility of [=legacy name aliases=] to map subsets of the value space,
since they are simple name aliases.
(Issue 4839)
-
Gave concept of [=applies to=] its own section
and add some notes about implications.
(Issues 1861
and 5565)
-
Defined the term [=CSS/property=].
(Issue 5633)
-
Defined value processing of elements that are not part of the tree.
(Issue 1964 and 1548)
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).
-
Clarify origin comparison for quirks mode Content-Type assumptions
in [[#content-type]].
(Issue 4838)
Non-trivial changes since the 28 August 2018 Candidate Recommendation include:
-
Added context to the [=cascade=] sort criteria
to accommodate Shadow DOM. [[DOM]]
(Issue 5372)
-
Defined that, in consideration of [=shadow trees=],
[=inheritance=] operates over the [=flattened element tree=].
-
Removed scoping from the [=cascade=] sort criteria,
because it has not been implemented.
Changes Since the 14 January 2016 Candidate Recommendation
Non-trivial changes since the 14 January 2016 Working Draft include:
-
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 targeted 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)
A Disposition of Comments is available.
Changes Since the 21 April 2015 Working Draft
Changes since the 21 April 2015 Working Draft include:
- Renamed default keyword to ''revert''.
- Allowed dropping duplicate parentheses in ''supports()'' syntax when it only contains one declaration.
Additions Since Level 3
The following features have been added since
Level 3:
* Introduced ''revert'' keyword, for rolling back the cascade.
* Introduced ''supports()'' syntax for supports-conditional ''@import'' rules.
* Added [=encapsulation context=] to the [=cascade=] sort criteria
to accommodate Shadow DOM. [[DOM]]
* Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. See [[#aliasing]].
Additions Since Level 2
The following features have been added since
Level 2:
- The 'all' shorthand
- The ''initial'' keyword
- The ''unset'' keyword
- Incorporation of animations and transitions into the cascade.
Acknowledgments
David Baron,
Tantek Çelik,
Noam Rosenthal,
Simon Sapin,
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 ''@import'' rule does not apply the [=CORS protocol=] to loading cross-origin stylesheets,
instead allowing them to be freely imported and applied.
* The ''@import'' rule assumes that resources without Content-Type metadata
(or any same-origin file if the host document is in quirks mode)
are text/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.