[Here will be included the file "../copyright.inc"]
This CSS3 module describes how to collate style rules and assign values to 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 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.
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 '@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),
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 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:
The specified value may need some computation before it can be used. This is described in the Values and Units [[!CSS3VAL]] module.
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. Note, the initial value can be explicitly specified with the ''initial'' keyword which all properties accept. [[CSS3VALUE]]
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.
Fix precedence of non-CSS presentation hints to match [[CSS21]]
Shouldn't this section move to [[CSS3CASCADE]]?
Once a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type.
The final value of a CSS3 property for a given element is the result of a four-step calculation:
The specified value is the output of the cascading and inheritance process. [[!CSS21]] [[CSS3CASCADE]]
If the output of the cascade is ''inherit'' or ''initial'', the specified value contains the inherited or initial value, respectively. See examples (d) and (e) in the table below.
The cascading and inheritance process guarantees that a specified value exists for every property on every element.
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').
For absolute values, no extra processing is needed to find the computed value. For relative values, on the other hand, computation is necessary to find the computed value: percentages must be multiplied by a reference value (each property defines which value that is), 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, and valid relative URLs must be resolved to become absolute. See examples (f), (g) and (h) in the table below.
The computed value is the result of resolving the specified value insofar as possible without formatting the document, as defined in the "Computed value" line of the property definition tables.
The computed value is the value that is transferred from parent to child during inheritance.
The computed value exists even when the property does not apply (as defined by the 'Applies To' line). However, some properties may define the computed value of a property for an element to depend on whether the property applies to that element.
Computed values are processed as far as possible without formatting the document. Some values, however, can only be determined when the document is being laid out. For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined. The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value.
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 computed 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 approximations have been made.
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.
| Property | Winning declaration | Specified value | Computed value | Used value | Actual value | |
|---|---|---|---|---|---|---|
| (a) | 'text-align' | text-align: left
| ''left'' | ''left'' | ''left'' | ''left'' |
| (b) | 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' | border-width: inherit
| ''4.2px'' | ''4.2px'' | ''4.2px'' | ''4px'' |
| (c) | 'width' | (none) | ''auto'' (initial value) | ''auto'' | ''120px'' | ''120px'' |
| (d) | 'list-style-position' | list-style-position: inherit
| ''inside'' | ''inside'' | ''inside'' | ''inside'' |
| (e) | 'list-style-position' | list-style-position: initial
| ''outside'' (initial value) | ''outside'' | ''outside'' | ''outside'' |
| (f) | 'font-size' | font-size: 1.2em
| ''1.2em'' | ''14.1px'' | ''14.1px'' | ''14px'' |
| (g) | 'width' | width: 80%
| ''80%'' | ''80%'' | ''354.2px'' | ''354px'' |
| (h) | 'width' | width: auto
| ''auto'' | ''auto'' | ''134px'' | ''134px'' |
| (i) | 'height' | height: auto
| ''auto'' | ''auto'' | ''176px'' | ''176px'' |
| (j) | 'page-break-after' | (none) | ''auto'' (initial value) | ''auto'' | ''auto'' | ''auto'' |
| (k) | 'orphans' | orphans: 3
| ''3'' | ''3'' | ''3'' | ''3'' |
[TBD]
David Baron contributed to this specification.
[Here will be inserted the file "normative.inc"]
[Here will be inserted the file "informative.inc"]