Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This CSS3 module describes how to find the specified value for all properties on all elements. Values either come from style sheets or the property's initial value. By way of cascading and inheritance, values are propagated to all properties on all elements.
This module interfaces with several other modules. It relies on [CSS3SYN] to parse the style sheets, on [SELECT] to calculate specificity, and on [MEDIAQ] to determine if a declaration applies to the media. The output from this module is a specified value for all element/property combinations. The processing of specified values is described in [CSS3VAL].
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.
This draft should not be cited except as "work in progress". It is a work item of the CSS working group and part of the Style activity. It may be modified or dropped altogether at any point in time. Implementations for the purpose of experimenting with the specification are welcomed, as long as they are clearly marked as experimental.
Feedback on this draft is invited. The preferred place for discussion is the (archived) public mailing list www-style@w3.org. W3C members can also send comments to the CSS WG mailing list.
A list of current W3C Recommendations and other technical documents including Working Drafts and Notes can be found at http://www.w3.org/TR.
@media
rules
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 the value for an element/property combination. In this case, a value must be found by way of inheritance or by looking at the property's initial value.
The rules for finding a the specified value for all properties on all elements is described in this specification. The rules for finding the specified values in the page context and the margin boxes are described in [CSS3PAGE].
The input to the computations described in this module is:
The output of the computations described in this module is a specified value for all properties on all elements.
In order to find the specified values, implementations must first identify which statements that apply to the document. This is done by:
Then, for every element, the value for each property can be found by following this 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. This is described in the Values and Units [CSS3VAL] module.
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 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 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 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.
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.
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.
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"
’.
[Should the spec 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?]
@media
rulesAn @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 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 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 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 is copied from the parent element's computed value for the same property.
The root element, which has no parent element, inherits the initial value of the property.
Pseudo-elements inherit according to a fictional tag sequence described for each pseudo-element [SELECT].
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 in the cascade, 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]
David Baron contributed to thie specification.
@import
’, 3
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|