Copyright © 2005 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This CSS3 module describes how values are assigned to properties. CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called “cascading”. If no value can be found through cascading, a value can be inherited from the parent element or the property's initial value is used.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-cascade” in the subject, preferably like this: “[css3-cascade] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced under the 24 January 2002 CPP as amended by the W3C Patent Policy Transition Procedure. The Working Group maintains a public list of patent disclosures relevant to this document; 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) with respect to this specification should disclose the information in accordance with section 6 of the W3C Patent Policy.
This is a draft of a module of CSS level 3. It will probably be bundled with some other modules before it becomes a W3C Recommendation.
The main purpose of this module is to rewrite the relevant parts of CSS2
as a module for CSS3. With the exception of the 'initial' value and the optional title for '@import' and '@media', all features described in this module
also exist in CSS2. Compared to CSS2, the cascading order has been changed
in two cases as noted in the text.
@import rule
@media rule
This CSS3 module depends on the following other CSS3 modules:
It has non-normative (informative) references to the following other CSS3 modules:
One of the fundamental design principles of CSS is to allow several style sheets, possibly from different sources, to influence the rendering of a document. This CSS3 module describes how to select one among several conflicting declarations on a given element/property combination. The mechanism used in the selection process is called "cascading". When no declaration attempts to set the value of an element/property combination the value will either be inherited from the parent element, or set to the property's "initial value".
The input to the cascading and inheritance process is:
The output of the cascading and inheritance process is a single value, known as the specified value.
The specified value is found by using the following pseudo-algorithm:
'initial' or 'inherit', the value
of the winning declaration becomes the specified value.
'inherit', the inherited value (see below) becomes the
specified value
'initial', the initial value (see below) becomes the
specified value
The specified value may need some computation before it can be used. For
example, the specified value of the 'font-size' property for a given element may be
'10em' which needs to be converted into
device-specific units before being used to render a document. Computations
on specified values are described in the Values
and Units [CSS3VAL] module.
@import rule[When this section is rewritten to define user agent conformance more clearly, it should state that (1) the media list specified in an @import rule prevents the import from being processed if the medium doesn't match, but it doesn't "associate" the media with the style sheet so that it can't be imported some other way. (2) @import without a medium must ignore any medium specified for the same style sheet in a link from a document.]
The '@import' rule allows users to import style
rules from other style sheets. Any '@import' rules must follow all '@charset' rules and precede all other at-rules and rule
sets in a style sheet. The '@import' keyword must be followed by the URI of
the style sheet to include. A string is also allowed; it will be
interpreted as if it had url(…) around it.
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");
So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated “media queries” after the URI.
The following rules illustrate how '@import' rules can be made media-dependent:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
The full syntax of the expressions after the URL is defined by the Media Queries specification [MEDIAQ].
In the absence of any media queries, the import is unconditional. Specifying 'all' for the medium has the same effect.
At the end of the '@import'
rule (after any media queries), there may be a string that assigns a name
to the import.
@import url(layout1.css) screen "Plain style"; @import url(colors1.css) screen "Plain style"; @import url(style4.css) "Four-columns and dark";
Imports with different names (together with any named @media rules, see below) represent alternative style sheets. The UA should provide a way for the user to select an alternative by name.
The rules for which style sheet to import are as follows:
If the user has not chosen a style by name (e.g., he has indicated to
the UA that he wants the default style), then all '@import's without a name are imported, as
well as the first '@import'
that has a name and all other '@import's that have the same name.
If the UA is using the default style, only “Yellow Fish”
and the nameless '@import's (shown in
bold) are used, the others are skipped:
@import "common1.css"; @import "yellowfish.css" "Yellow Fish"; @import "simple.css" "Simple"; @import "extra.css" "Yellow Fish"; @import "deco-a.css" "Budapest"; @import "deco-b.css" "Budapest"; @import "common2.css";
If the user has chosen a style be name, then all '@import's without a name are imported, as
well as all '@import's with
the name chosen by the user.
If the user has chosen the “Simple” style, only
“Simple” and the nameless '@import's (all shown in
bold) are used, the others are skipped:
@import "common1.css"; @import "yellowfish.css" "Yellow Fish"; @import "simple.css" "Simple"; @import "extra.css" "Yellow Fish"; @import "deco-a.css" "Budapest"; @import "deco-b.css" "Budapest"; @import "common2.css";
Style sheets are only imported if the media query on the '@import' (if any) matches the
media for which the UA renders the document.
If an '@import' is skipped,
then all '@import's inside
the style sheet it points to are also skipped, no matter what their names.
HTML [HTML401] uses the term preferred style sheet for the named style sheets that
the author marked as the default. In CSS, these are all style sheets whose
name is the first name to occur on any '@import' or '@media'. Alternate style
sheets are all other named style sheets. Finally, HTML calls style
sheets without a name persistent style sheets,
because they are imported together with the preferred ones as well as with
any alternatives.
The UA should not only provide the user with a choice of alternative style sheets, but should also allow the user to turn all style sheets off. See [where?]
The list of alternative style sheets that the user can choose from consists of
title attributes on link and
style elements in HTML andtitle pseudo-attributes on <?xml-stylesheet?> instructions),
'@media' and
'@import' rules that occur
in linked style sheets that don't have a name on the link, and
'@media' and
'@import' rules that occur
in style sheets linked from '@import' rules that have no name, recursively.
I.e., the UA must not look for additional names by following links with
a title attribute or named '@import' rules.
Are names matched case-sensitively or case-insensitively? Property names and font names are case-insensitive, so it is probably most consistent to treat style sheet names the same way.
Would it be easier to read if we precede the name with a
keyword or some punctuation? E.g., '@import url(foo.css)
as "Boxed"'.
@media ruleAn @media rule specifies the target media types
(separated by commas) of a set of rules (delimited by curly braces). The
'@media' construct allows
style sheet rules for various media in the same style sheet:
@media print {
body { font-size: 12pt; }
h1 { font-size: 24pt; }
}
@media screen and (color) {
body { font-size: medium; }
h1 { font-size: 2em; }
}
@media screen, print {
body { line-height: 1.2; }
}
The full syntax of the expressions after '@media' is defined by the Media Queries
specification [MEDIAQ].
After the media queries, before the "{", there may be a string that
assigns a name to the '@media'
rule.
@media all "Ultra blue" {
body { background: blue }
h1 { color: cyan }
}
@media screen, print "Simple and light" {
body { background: white; color: #333 }
h2 { font-size: bigger }
}
All '@media' rules with a
name, together with any '@import' rules with the same name, present
alternative style sheets. The UA must read the rules inside some '@media' rules and skip others, as
follows:
If the user has not chosen a style by name, the UA must read all '@media' rules of which (1) the
media query matches the UA and (2) that either have no name or whose
name is equal to that of the first named '@import' or the first named '@media', whichever comes first.
If the user wants the UA to use the default style, the following
example results in the UA reading the “Reverse video”
style, the unnamed '@media'
rule and all rules that are not in any '@media' (all shown in
bold). We assume the UA uses the 'screen' media.
body { background: white }
p { text-indent: 2em }
@media screen {
h1 { font-size: xx-large }
}
@media screen "Reverse video" {
body { background: black; color: white }
}
@media screen, print "Rainbow style" {
p { color: #E0D }
}
If the user has chosen a style by name, the UA must read all '@media' rules (1) of which the
media query matches the UA and (2) that either have no name or whose
name is equal to the user's chosen name.
If the user wants the UA to use the “Rainbow style”
style, the following example results in the UA reading the
“Rainbow style” '@media' rule, the unnamed '@media' rule and all rules that are not in
any '@media' (all shown in
bold). We assume the UA uses the 'screen' media.
@import url(base.css);
@import url(altbase.css) "Reverse video";
body { background: white }
@media screen {
h1 { font-size: xx-large }
}
@media screen "Reverse video" {
body { background: black; color: white }
}
@media screen, print "Rainbow style" {
p { color: #E0D }
}
The purpose of cascading is to find one winning declaration among the set of declarations that apply for a given element/property combination.
User agents must sort declarations according to the following criteria, in order of importance:
The sorting process continues until one winning declaration is found.
Inheritance is a way of propagating property values from parent elements to their children. Inheritance means that the specified value of a given element/property combination is copied from the computed value of the parent element. The root element, which has no parent element, inherits the initial value of the property.
Some properties are said to be inherited. This means that, unless a value is specified for the element/property combination, the value will be determined by inheritance.
All properties accept the 'inherit' value which
explicitly specifies that the value will be determined by inheritance. The
'inherit' value can be used to strengthen inherited
values, and it can also be used on properties that are not normally
inherited. If the 'inherit' value is set on the
root element, the property is assigned its initial value.
Each property has an initial value which becomes
the specified value when cascading and inheritance does not yield a value.
Also, the initial value can be explicitly specified with the 'initial' keyword which all properties accept.
In order to sort declarations in the cascading process, the weight of a declaration must be known. In CSS3, the weight of a declaration is based on the origin of the declaration and its marked level of importance.
CSS style sheets may have three different origins: author, user, and user agent (UA).
Each CSS declaration can have two levels of importance: normal (which is default) and important (which must be marked). The CSS3 syntax module [CSS3SYN] describes how declarations are marked as important.
The weight of style sheets from the various origins, in ascending order, is:
By default, this strategy gives author declarations more weight than those of the user. It is therefore important that the UA give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.
Declarations in imported style sheets have lower weight than declarations in the style sheet from where they are imported. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence declarations apply.
If the user agent chooses to honor presentational hints from other sources than style sheets, these hints must be given the same weight as the user agent's default style sheet. This rule is intended for presentational hints in HTML.
Note that non-CSS presentational hints had a higher weight in CSS2.
[TBD]
[acknowledgments]