CSS Cascading and Inheritance Level 5

CSS Cascading and Inheritance Level 5
CSS Cascading and Inheritance Level 5
W3C Candidate Recommendation Snapshot
13 January 2022
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Implementation Report:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai
Invited Expert
Miriam E. Suzanne
Invited Expert
Tab Atkins Jr.
Google
Suggest an Edit for this Spec:
GitHub Editor
W3C
MIT
ERCIM
Keio
Beihang
). W3C
liability
trademark
and
permissive document license
rules apply.
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.
New in this level is
cascade layers
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C technical reports index at https://www.w3.org/TR/.
This document was published
by the
CSS Working Group
as a
Candidate Recommendation Snapshot
using the
Recommendation
track
Publication as a Candidate Recommendation
does not imply endorsement by
W3C
and its Members.
A Candidate Recommendation Snapshot has received
wide review
is intended to gather implementation experience, and has commitments from Working Group members to
royalty-free licensing
for implementations.
This document is intended to become a W3C Recommendation;
it will remain a Candidate Recommendation at least until
13 March 2022
to gather additional feedback.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-cascade” in the title, like this:
“[css-cascade]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
2 November 2021 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent which the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
The following features are at-risk, and may be dropped during the CR period:
the
revert-layer
keyword
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.
1.
Introduction
CSS defines a finite set of parameters,
called
properties
that direct the rendering of a document.
Each
property
has a name
(e.g.,
color
font-size
, or
border-style
),
a value space
(e.g.,


[ solid | dashed | dotted | … ]
),
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
dotted
for the associated element or box.
One of the fundamental design principles of CSS is
cascading
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
inheritance
or by looking at the property’s
initial value
The
cascading
and
defaulting
process takes a set of declarations as input,
and outputs a
specified value
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]
1.1.
Module Interactions
This section is normative.
This module replaces and extends
the rules for assigning property values, cascading, and inheritance defined in
[CSS2]
chapter 6.
Other CSS modules may expand the definitions of some of the syntax and features defined here.
For example, the Media Queries Level 4 specification,
when combined with this module, expands the definition of
the

value type as used in this specification.
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
2.
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,
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
@namespace
rules must not have any other rules other than
@import
preceding it),
it only applies between constructs in the same stylesheet.
For example, declarations in style rules from imported stylesheets interact with the cascade
as if they were written literally into the stylesheet at the point of the
@import
Any
@import
rules must precede all other valid at-rules and style rules in a style sheet
(ignoring
@charset
and empty
@layer
definitions)
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:
@import [


[ layer
layer(

) ]
[ supports( [


] ) ]

where:
the

or

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


] and

(collectively, the
import conditions
state the conditions under which it applies.
The following
conditional
@import
rule
only loads the style sheet when the UA
supports
display: flex
and only applies the style sheet on a
handheld
device
with a
maximum viewport width
of 400px.
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
The following layer imports load the style sheets into
the
framework.component
layer, and an un-named layer, respectively:
@import url("tabs.css") layer(framework.component);
@import url("override.css") layer();
If a

is provided,
it must be interpreted as a

with the same value.
The following lines are equivalent in meaning
and illustrate both
@import
syntaxes
(one with
url()
and one with a bare string):
@import
"mystyle.css"
@import
url
"mystyle.css"
);
2.1.
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
all
for the

has the same effect.)
If the
import conditions
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.
The following rules illustrate how
@import
rules can be made media-dependent:
@import
url
"fineprint.css"
@import
url
"bluish.css"
projection
tv
@import
url
"narrow.css"
handheld and
max-width:
400
px
);
User agents may therefore avoid fetching a conditional import
as long as the
import conditions
do not match.
Additionally, if a

blocks the application of the imported style sheet,
the UA
must not
fetch the style sheet (unless it is loaded through some other link)
and
must
return null for the import rule’s CSSImportRule.styleSheet value
(even if it is loaded through some other link).
The following rule illustrates how an author can provide fallback rules for legacy user agents
without impacting network performance on newer user agents:
@import
url
"fallback-layout.css"
supports
not
display: flex
));
@supports
display: flex
...
The
import conditions
are given by

, which is parsed and interpreted as a
media query list
and

, is parsed and interpreted as a [[supports query]].
If a

is given in place of a

it must be interpreted as a

(i.e. the extra set of parentheses is implied)
and treated as a

For example, the following two lines are equivalent:
@import
"mystyle.css"
supports
display: flex
);
@import
"mystyle.css"
supports
((
display: flex
));
The evaluation and full syntax of the
import conditions
are defined by the
Media Queries
[MEDIAQ]
and
CSS Conditional Rules
[CSS-CONDITIONAL-3]
specifications.
2.2.
Processing Stylesheet Imports
When the same style sheet is imported or linked to a document in multiple places,
user agents must process (or act as though they do) each link
as though the link were to an independent style sheet.
Note:
This does not place any requirements on resource fetching,
only how the style sheet is reflected in the CSSOM and used in specs such as this one.
Assuming appropriate caching,
it is perfectly appropriate for a UA to fetch a style sheet only once,
even though it’s linked or imported multiple times.
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]
2.3.
Content-Type of CSS Style Sheets
The processing of imported style sheets depends on the actual type of the linked resource:
If the resource does not 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
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.
3.
Shorthand Properties
Some properties are
shorthand properties
meaning that they allow authors to specify the values of several properties with a single property.
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
12
pt
line-height
14
pt
font-family
Helvetica
font-variant
normal
font-style
normal
can therefore be rewritten as
h1
font
bold
12
pt
14
pt
Helvetica
As more
font
sub-properties
are introduced into CSS,
the shorthand declaration resets those to their initial values as well.
In some cases, a
shorthand
might have different syntax
or special keywords
that don’t directly correspond to values of its
sub-properties
(In such cases, the
shorthand
will explicitly define the expansion of its values.)
In other cases, a property might be a
reset-only sub-property
of the shorthand:
Like other
sub-properties
, it is reset to its initial value by the shorthand when unspecified,
but the shorthand might not include syntax to set the
sub-property
to any of its other values.
For example, the
border
shorthand resets
border-image
to its initial value of
none
but has no syntax to set it to anything else.
[css-backgrounds-3]
If a
shorthand
is specified as one of the
CSS-wide keywords
[css-values-3]
it sets all of its
sub-properties
to that keyword,
including any that are
reset-only sub-properties
(Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)
Declaring a
shorthand
property to be
!important
is equivalent to declaring all of its
sub-properties
to be
!important
3.1.
Property Aliasing
Properties sometimes change names after being supported for a while,
such as vendor-prefixed properties being standardized.
The original name still needs to be supported for compatibility reasons,
but the new name is preferred.
To accomplish this, CSS defines two different ways of “aliasing” old syntax to new syntax.
legacy name aliases
When the old property’s value syntax is identical
to that of the new property,
the two names are aliased with an operation on par with case-mapping:
at parse time, the old property is converted into the new property.
This conversion also applies in the CSSOM,
both for string arguments and property accessors:
requests for the old property name
transparently transfer to the new property name instead.
For example, 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 Fragmentation 3
§ 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside 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
§ 6.7.2 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.
3.2.
Resetting All Properties: the
all
property
Name:
all
Value:
initial
inherit
unset
revert
revert-layer
Initial:
see individual properties
Applies to:
see individual properties
Inherited:
see individual properties
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
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