Shortname: css-cascade Level: 4 Status: ED Work Status: Refining Group: csswg ED: http://dev.w3.org/csswg/css-cascade/ TR: http://www.w3.org/TR/css-cascade-4/ Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/ Previous Version: http://www.w3.org/TR/2013/WD-css-cascade-3-20130730/ Previous Version: http://www.w3.org/TR/2013/WD-css3-cascade-20130103/ Previous Version: http://www.w3.org/TR/2005/WD-css3-cascade-20051215/ Issue Tracking: Disposition of Comments http://dev.w3.org/csswg/css-cascade/issues 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 are the ''revert'' keyword and <> for the ''@import'' rule. Ignored Terms: auto, flex items, Link Defaults: css21 (property) display
This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in [[!CSS21]] 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 <
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''.
Similarly, style rules in a stylesheet imported into a scoped stylesheet
are scoped in the same way.
Any ''@import'' rules must precede all other at-rules and style rules in a style sheet
(besides ''@charset'', which must be the first thing in the style sheet if it exists),
or else the ''@import'' rule is invalid.
The syntax of ''@import'' is:
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''. [[CSS21]]
As another example, a
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.
Importing Style Sheets: the ''@import'' rule
The @import rule allows users to import style rules from other style sheets.
If an ''@import'' rule refers to a valid stylesheet,
user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule.
@import [ <
where the <
@import "mystyle.css";
@import url("mystyle.css");
Conditional ''@import'' Rules
The import conditions allow the import to be media– or feature-support–dependent.
In the absence of any import conditions, the import is unconditional.
(Specifying ''@media/all'' for the <
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
...
}
media_query_list production
and is interpreted as a media query,
and a <supports_condition production
and is interpreted as an ''@supports'' condition.
If a <declaration production) is given in place of a <supports_declaration_condition production
(i.e. the extra set of parentheses is implied)
and treated as a <
@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 origin of an imported style sheet is the 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. [[CSS3SYN]]
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,
or the host document is in quirks mode
and has the same origin as the imported style sheet,
the type of the linked resource is 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.
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.
Resetting All Properties: the 'all' property
The 'all' property is a shorthand that resets all CSS properties
except 'direction' and 'unicode-bidi'.
It only accepts the CSS-wide keywords.
Note: The excepted properties 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
Name:
all
Value:
initial | inherit | unset | revert
Initial:
See individual properties
Applies to:
See individual properties
Inherited:
See individual properties
Percentages:
See individual properties
Media:
See individual properties
Computed value:
See individual properties
Animatable:
See individual properties
dir attribute, instead.
[[CSS3-WRITING-MODES]]
<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 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:
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”.
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 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 ''initial'' and ''inherit'' keywords
are handled specially when they are the cascaded value of a property,
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.
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 layout of the document.
If the property does not apply to this element,
then the element has no used value for that property.
<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. [[CSS3-BREAK]]
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
Property
Winning declaration
Cascaded value
Specified value
Computed value
Used value
Actual value
(a)
'text-align'
text-align: left
(b)
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
border-width: inherit
(c)
'width'
(none)
(none)
(d)
'list-style-position'
list-style-position: inherit
(e)
'list-style-position'
list-style-position: initial
(f)
'font-size'
font-size: 1.2em
(g)
'width'
width: 80%
(h)
'width'
width: auto
(i)
'height'
height: auto
(j)
'page-break-after'
(none)
(none)
(k)
'orphans'
orphans: 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:
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 a 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.
The cascade sorts declarations according to the following criteria,
in descending order of priority:
The output of the cascade
is a (potentially empty) sorted list of declared values for each property on each element.
Declarations from origins earlier in this list win over declarations from later origins.
<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. [[CSS21]]
Cascading Origins
Each style rule has an origin,
which determines where it enters the cascade.
CSS defines three core origins:
Extensions to CSS define the following additional origins:
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 made 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 [[CSS3SYN]].
i.e. if the last two (non-whitespace, non-comment) tokens
in its value are the delimiter token ''!'' followed by the identifier token ''important''.
[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
The UA may choose to honor presentational hints in a source document's markup,
for example the bgcolor attribute or <s> element in [[HTML5]].
All document language-based styling must be translated to corresponding CSS rules
and either enter the cascade at the user agent level or
be treated as author level rules with a specificity of zero placed at the start of the author style sheet.
A document language may define whether a presentational hint enters at the UA or author level of the cascade;
if so, the UA must behave accordingly.
For example, [[SVG11]] maps its presentation attributes into the author level.
Note: Presentational hints entering the cascade at the UA level can be overridden by author or user styles.
Presentational hints entering the cascade at the author level can be overridden by author styles,
but not by non-''!important'' user styles.
Host languages should choose the appropriate level 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.
(Pseudo-elements inherit according to a fictional tag sequence described for each pseudo-element [[!SELECT]].)
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 Level 3 [[!CSS3VAL]],
all CSS properties can accept these values.
Resetting a Property: the ''initial'' keyword
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
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
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 The Cascade: the ''revert'' keyword
If the cascaded value of a property is the ''revert'' keyword,
the behavior depends on the origin to which the declaration belongs:
Changes
Changes since the 21 April 2015 Working Draft include:
Additions Since Level 3
The following additions were made to this specification since the
Level 3 CR:
* Introduced ''revert'' keyword, for rolling back the cascade.
* Introduced ''supports()'' syntax for supports-conditional ''@import'' rules.
Acknowledgments
David Baron, Tantek Çelik, Simon Sapin, and Boris Zbarsky contributed to this specification.