Copyright © 2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
This CSS3 Module describes how to insert and move content around a document, in order to create footnotes, endnotes, section notes. Inserted content can also introduce counters and strings, which can be used for running headers and footers, section numbering, and lists. Finally, techniques for declaring replaced images, as well as scaling and cropping them using CSS, are described.
This is a working draft of a CSS level 3 module. It aspires to eventually become a CSS3 Recommendation.
This document is written in the context of the CSS working group which is part of the style activity (see summary).
Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions). W3C Members can also send comments directly to the CSS working group.
This is a working draft and may therefore be updated, replaced or rendered obsolete by other W3C documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).
Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.
To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.
This document may be available in translations in the future. The English version of this specification is the only normative version.
For this specification to exit the CR stage, the following conditions must be met:
There must be at least two interoperable implementations implementing all the features. For the purposes of this criterion, we define the following terms:
a section, subsection, assertion, or other testable aspect of the specification.
passing the respective test case(s) in the test suite, or, if the implementation is not a web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a UA is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.
a user agent which:
A minimum of six months of the CR period must have elapsed. This is to ensure that enough time is given for any remaining major errors to be caught.
Features will be dropped if two or more interoperable implementations are not found by the end of the CR period.
Features will also be dropped if sufficient and adequate tests (by judgment of the working group) have not been produced for those features by the end of the CR period.
This CSS3 module depends on the following other CSS3 modules:
In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to mark the numbers up explicitly, he or she wants the user agent to generate them automatically. Counters and markers are used to achieve these effects.
ol { counter-reset: item; }
li { display: list-item; counter-increment: item; }
li::marker { content: counter(item, decimal) '.'; }
A simpler way to write this is:
li { display: list-item; list-style: decimal; }
Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" on a line before the seventh chapter title.
figure > caption::before { content: "Figure: "; }
chapter:nth-child(7) > title::before { content: "Chapter 7\A"; }
The last example could also be written in a more generic way using counters:
chapter { counter-increment: chapter; }
chapter > title::before { content: "Chapter " counter(chapter) "\A"; }
Another common effect is replacing elements with images or other multimedia content. Since not all user agents support all multimedia formats, fallbacks may have to be provided.
/* Replace <logo> elements with the site's logo, using a format
* supported by the UA */
logo { content: url(logo.mov), url(logo.mng), url(logo.png), none; }
/* Replace <figure> elements with the referenced document, or,
* failing that, with either the contents of the alt attribute or the
* contents of the element itself if there is no alt attribute */
figure[alt] { content: attr(href, url), attr(alt); }
figure:not([alt]) { content: attr(href, url), contents; }
Authors may also wish to move content to a later position in a document, for instance placing images at the bottom (or top) of the page.
img { move-to: page-top; } /* move images to page-top */
@page { padding-top: 10em; } /* leave a gap at the top of the page */
body:after { /* place a box at the top of each page */
position: fixed; top: 0; left: 0; right: 0; height: 10em;
content: pending(page-top); /* insert the images moved to page-top */
}
In some cases, content may be inserted, alternate content moved to a later place in the flow, and a list marker inserted next to this alternate content. For example, footnotes or endnotes.
a[href]::after {
counter-increment: footnote-number;
content: counter(footnote-number, footnotes);
}
a[href]::after::alternate {
display: list-item;
content: attr(href);
move-to: footnotes;
}
a[href]::after::alternate::marker {
content: counter(footnote-number, footnotes);
}
@page {
counter-reset: footnote-number;
@footnote {
content: pending(footnotes);
}
}
Using initial values, the last example can also be written as:
a[href]::after { content: footnote; }
a[href]::after::alternate { content: attr(href); }
For simpler cases, e.g. where an element is simply to be used as an endnote directly, only a single declaration is required.
p.note { content: endnote; }
The initial values of the other properties are set up so that the result is as expected.
Another effect commonly requested by authors is that of line numbering. This module introduces the '::line-marker' pseudo-element that is attached to the front of every line box, which can be used for this purpose.
pre { counter-reset: line; }
pre::line-marker { counter-increment: line; content: counter(line) "."; }
This pseudo-element can also be used to simulate the indentation style found in e-mail communication:
blockquote { margin: 0; padding: 0 0 0 2em; }
blockquote > blockquote { margin-left: -1em; }
blockquote::line-marker { width: 2em; text-align: left; content: ">"; }
Generated content based on the cite and datetime
attributes can create introductions or citations on the fly as well.
Finally, in this document, requirements are expressed using the key words "MUST", "MUST NOT", "REQUIRED", "SHALL" and "SHALL NOT". Recommendations are expressed using the key words "SHOULD", "SHOULD NOT" and "RECOMMENDED". "MAY" and "OPTIONAL" are used to indicate optional features or behavior. These keywords are used in accordance with [RFC2119]. For legibility these keywords are used in lowercase form.
This module introduces several pseudo-elements and allows them to nest in certain predefined ways. In order to explain the relationships between these nested pseudo-elements, three new terms have been coined.
These terms are horrible, but they were the only ones I could think of that didn't confusingly clash with DOM terminology. Example of the horridness of the terms: the superior parent of an '::outside' pseudo-element is its rendering tree child, whose rendering hree sibling '::before' has the '::outside' pseudo-element as its superior parent.
We need a term which means "element or pseudo-element".
At the heart of generated content lies pseudo-elements. Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements also provide style sheet designers a way to assign style to content that does not exist in the source document.
Certain combinations of multiple pseudo-elements per selector are allowed. All pseudo-elements must appear in a single chain at the end of the selector, with no intervening combinators.
The pseudo-element part of the selector consists of an optional set of "structural" pseudo-elements, optionally followed by a single formatting pseudo-element.
The structural pseudo-elements are alternating sets of an '::outside' pseudo-element and one or more '::before', '::after', or '::alternate' pseudo-elements. (So basically any number of '::outside', '::before', '::after', and '::alternate' pseudo-elements, so long as no two '::outside' pseudo-elements are adjacent, as that is meaningless.)
The formatting pseudo-elements are '::first-line', '::first-letter', '::marker', '::line-marker', and '::selection'. Only one of these may occur, and if present, it must be the last pseudo-element in the chain.
The allowed order for pseudo-elements is formally described by the following pseudo-BNF grammar:
pseudo-elements := structural-pseudo-elements? formatting-pseudo-element? structural-pseudo-elements := ( '::outside'? [ '::before' | '::after' | '::alternate' ] )* '::outside'? formatting-pseudo-element := '::first-line' | '::first-letter' | '::marker' | '::line-marker' | '::selection'
The '::outside', '::before', and '::after' pseudo-elements have two forms, '::outside', '::before', and '::after' and '::outside(n)', '::before(n)', and '::after(n)', where n is an integer. If the parameter part is omitted then '1' is implied. For example, '::before(1)' is the same as '::before'.
For compatability with previous levels of CSS, the '::before', '::after', '::first-line' and '::first-letter' pseudo-elements do not require two colons. This does not apply to any other pseudo-element. Authors are encouraged to use the new two-colon forms.
The '::before' and '::after' pseudo-elements are used to insert content immediately before and immediately after the content of an element (or other pseudo-element). The 'content' propety is used to specify the content to insert.
For example, the following rule replaces the content of
<abbr> elements with the contents of the element's
title attribute:
abbr { content: attr(title); }
The following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":
P.note:before { content: "Note: " }
The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:
P.note:before { content: "Note: " }
P.note { border: solid green }
...would cause a solid green border to be rendered around the entire paragraph, including the initial string.
Typically, the '::before' and '::after' pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached. In the general case, they inherit their properties from their superior parent.
For a '::before' or '::after' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element must not have its 'content' property set to 'inhibit' or its 'display' property set to 'none'. Note that for '::before' and '::after' pseudo-elements, the initial value of 'content' computes to 'inhibit'.
Using a '::before' pseudo-element in the context of the anonymous table elements works exactly as if an actualy element had been introduced. For example:
.example::before { content: "D" }
<table>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr class="example">
<td>E</td> <td>F</td>
</tr>
</table>
An anonymous table cell box is generated around the '::before' content in this case, resulting in a 3×2 table.
The selector '::before::before' represents a pseudo-element contained at the start of a pseudo-element contained at the start of an element.
For example, the following rules:
div { content: 'A' }
div::before { content: 'B'; }
div::before::before { content: 'C'; }
...would result in the following rendering objects:
,-----------------------. | ,---------. | | | ,---. | | | | | C | B | A | | | `---' | | | `---------' | `-----------------------'
In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element.
For example, the following rules:
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
...would result in the following rendering objects:
,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------'
The '::before' selector is exactly equivalent to '::before(1)'.
A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one:
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: inhibit; }
div::before(3) { content: 'C'; }
It would result in the following rendering objects:
,-----------------------. | ,---. | | | B | A | | `---' | `-----------------------'
An '::outside' pseudo-element is one that is generated immediately outside the pseudo-element's superior.
When given a parameter, '::outside(n)' represents an nth pseudo-element generated immediately around the n-1th pseudo-element.
For example, the following rules:
div { display: block; border: dashed; }
div::outside { display: block; border: dashed; }
div::outside(2) { display: block; border: dashed; }
...would result in the following rendering objects:
,-----------------------. <-- border of ::outside(2) | ,-------------------. | <-- border of ::outside | | ,---------------. | | <-- border of DIV | | | DIV | | | | | `---------------' | | | `-------------------' | `-----------------------'
A similar result would be achieved by using three nested DIV elements (except of course that would require changing the document source, which is not always possible).
One difference between using elements and using pseudo-elements is that the pseudo-elements inherit from the elements (or pseudo-elements) that generate them, not from those they are contained within.
For example, if we assume the following rules:
div { display: block; border: green solid; }
div::outside(1) { display: block; border: inherit; }
div::outside(2) { display: block; border: red solid; }
...then the outermost border (from the '::outside(2)') will be red, but the middle border (from '::outside(1)') will be the same colour as the inner most border (from the element itself), namely green.
For an '::outside' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element itself must not have its 'display' property set to 'none'. Note that the initial value of 'display' computes to 'none' on '::outside' pseudo-elements.
It is possible to float an element and then give it an '::outside' pseudo-element, in which case the pseudo-element is in-flow, not floated.
For example:
p { float: right; color: green; }
p::outside { display: inline; border: solid; }
...results in an empty inline element with a solid green border being placed in the flow at the point where the float is taken out of flow.
When an element is moved with the 'move-to' property, however, '::outside' pseudo-elements are moved too.
The 'content' property does not apply to '::outside' pseudo-elements.
An '::outside' pseudo-element can have any number of '::before' or '::after' pseudo-elements of its own. They are inserted before and after the '::outside' pseudo-element's contents (the element or pseudo-element that generated the '::outside' pseudo-element).
For example, the following rules:
span { content: "span"; }
span::before { content: "B"; }
span::outside(1) { display: inline; }
span::outside(1)::before { content: "A"; }
span::outside(2) { display: inline; }
span::outside(2)::after { content: "C"; }
...would result in the following rendering objects (including construction lines for clarity):
,--------------------------------. <-- border of ::outside(2) | ,----------------------. | <-- border of ::outside(1) | | ,---. ,-+---+------. | ,---. | <-- border of span, ::before, | | | A | | | B | span | | | C | | and ::after boxes | | `---' `-+---+------' | `---' | | `----------------------' | `--------------------------------'
This can be used to leave markers in the flow, as in:
note { float: right; }
note::outside { display: inline; }
note::outside::before { content: " (see sidebar) "; }
Care must be taken when styling cases like this. If the note element was given a smaller 'font-size' or a different 'color', then, by default, the generated in-flow text would end up inheriting it.
This pseudo-element is created by setting its 'move-to' property to an identifier. It is rendered at the next occurrence of 'pending()' in a 'content' property.
In other respects it is just like a normal pseudo-element.
Note that '::alternate' pseudo-elements inherit from their associated pseudo-element or element, not from the element in which they are inserted. (The same applies to any content moved using 'move-to'). This is discussed in the section on the 'pending()' value
For an '::alternate' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element must not have its 'display' property set to 'none', its 'content' property set to 'inhibit', or its 'move-to' property set to 'here'. Note that on '::alternate' pseudo-elements the initial value of 'move-to' is 'here' and the initial value of 'content' is 'inhibit'.
An '::alternate' pseudo-element can have any number of '::outside', '::before', or '::after' pseudo-elements of its own, and each of these four structural pseudo elements can have an '::alternate' pseudo-element of its own.
For example, the following rules:
span { content: "span"; color: green; }
span::alternate { content: "alternate1"; move-to: example1; }
span::alternate::before { content: "before1"; }
span::after { content: "after1" pending(example1); color: navy; }
span::after::alternate { content: "alternate2"; move-to: example2; }
span::after(2) { content: "after2" pending(example2); color: purple; }
...would result in the following rendering objects (including construction lines for clarity):
,----------------------------------------------------------------------. | ,-----------------------------------. | | | ,------------------------. | ,-----------------------. | | | | ,---------. | | | ,------------, | | | span | | | before1 | alternate1 | | | after2 | | | | | | | `---------' | | | `------------' | | | | `------------------------' | '-----------------------' | | `-----------------------------------' | `----------------------------------------------------------------------'
For a '::marker' pseudo-element to be generated, its superior parent must have a computed 'display' value of 'list-item'.
For further details on the rendering model for list markers, see the CSS3 Lists module.
The '::line-marker' pseudo-element is positioned in exactly the same way as the '::marker' pseudo-element, but appears on every line, not just the first.
Line boxes are responsible for generating '::line-marker' pseudo-elements. For each line, one such marker is created for every block ancestor in the current formatting context. (Formatting contexts are created by the root element, floats, positioned content, cells, and inline-blocks. See the CSS3 Box Model module for more information. [CSS3BOX]) In addition, the '::line-marker' pseudo-element itself must have a 'content' property that has a computed value other than 'none' or 'inhibit'.
| Name: | move-to |
| Value: | normal | here | <identifier> |
| Initial: | normal |
| Applies To: | all elements, ::before, ::after, and ::alternate |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Computed value: | The specified value unless that is 'normal', as per the prose below. |
The 'move-to' property causes the element or pseudo-element to be removed from the flow and reinserted at a later point in the document. The content is reinserted using the 'pending()' value of the 'content' property.
This property applies to all elements as well as the '::before', '::after', and '::alternate' pseudo-elements. The '::alternate' pseudo-element in fact exists exclusively for the purpose of being moved by this property, e.g. in the creation of footnotes.
For '::alternate' pseudo-elements, if the superior parent uses the 'footnote' counter in its 'content' property then the computed value of 'move-to' is 'footnotes'.
For '::alternate' pseudo-elements, if the superior parent uses the 'endnote' counter in its 'content' property then the computed value of 'move-to' is 'endnotes'.
For '::alternate' pseudo-elements, if the superior parent uses the 'section-note' counter in its 'content' property then the computed value of 'move-to' is 'section-notes'.
Otherwise the computed value of the move-to property is 'here'.
Note that elements and pseudo-elements that have been moved using 'move-to' still inherit from their associated pseudo-element or element, and not from the element in which they are inserted. This is discussed in the section on the 'pending()'. value
| Name: | display |
| New values: | normal |
| Initial: | normal |
| Applies To: | all elements, ::before, ::after, ::alternate, and ::outside |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Computed value: | The specified value unless that is 'normal', as described below. |
Note: all values apply to the four pseudo-elements listed. Thus you can create entire tables, insert rubies, or generate other complex layouts using only generated content. This differs from CSS2 which only allowed a limited subset of values to apply to each pseudo-element.
For elements, '::before', and '::after', computes to 'inline'.
For '::alternate': if the superior parent's 'content' property uses the 'footnote', 'endnote', or 'section-note' property then it computes to 'list-item', otherwise it computes to 'block'. Note that if the 'move-to' property doesn't compute to an identifier then the '::alternate' pseudo-element isn't generated in the first place and therefore the value of 'display' is not relevant. In those cases, 'normal' still computes as described above but the result does not affect layout.
For '::outside', computes to 'none'. This prevents the generation of the pseudo-element, but does not stop the pseudo-element's superior parent from being generated (as it would if the '::outside' pseudo-element was replaced by a real element in an attempt to produce the same layout).
On elements, this inhibits the element, including any children and any pseudo-elements which have this element as a superior parent, from being rendered, anywhere.
On pseudo-elements, this inhibits the creation of the element and furthermore prevents the creation of any pseudo-elements which have this pseudo-element as a superior.
To declare a list item, the 'display' property should be set to 'list-item'. This, in addition to generating a '::marker' pseudo-element and enabling the properties described in the Lists module, causes that element to increment the list item counter 'list-item'. (This does not affect the specified or computed values of the counter properties.)
The 'list-item' counter is a real counter, and can be directly affected using the 'counter-increment' and 'counter-reset' properties. It can also be used in the 'counter()' and 'counters()' function forms.
The CSS3 box module may define other 'display' values which generate a list marker. These should also affect the 'list-item' counter.
Note that the new list marker model makes the 'marker' display type redundant. That display type is therefore obsolete in the CSS3 Lists model.
Note that while this property doesn't apply to '::marker' pseudo-elements, they only get generated if thir superior parent has a computed 'display' value of 'list-item', and they are always rendered as if they had an 'inline-block' display type.
Similarly, while this property applies to '::before', '::after', '::alternate', '::outside' those pseudo-elements only get generated if they have no superiors with computed values of 'display' that are 'none' or superiors with computed values of 'content' that are 'inhibit'.
| Name: | quotes |
| Value: | foo | bar |
| Initial: | text |
| Applies To: | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value |
This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:
For example, applying the following style sheet:
/* Specify pairs of quotes for two levels in two languages */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "+" ";" "<" ">" }
/* Insert quotes before and after Q element content */
q::before { content: open-quote }
q::after { content: close-quote }
to the following HTML fragment:
<HTML lang="en">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Quote me!</Q>
</BODY>
</HTML>
would allow a user agent to produce:
"Quote me!"
while this HTML fragment:
<HTML lang="no">
<HEAD>
<TITLE>Quotes</TITLE>
</HEAD>
<BODY>
<P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
</BODY>
</HTML>
would produce:
+Trøndere gråter når <Vinsjan på kaia> blir deklamert.;
Note. While the quotation marks specified by 'quotes' in the previous examples are conveniently located on computer keyboards, high quality typesetting would require different ISO 10646 characters. The following informative table lists some of the ISO 10646 quotation mark characters:
| Codepoint | Description | |
|---|---|---|
| " | U+0022 | QUOTATION MARK (the ASCII double quotation mark) |
| ' | U+0027 | APOSTROPHE (the ASCII single quotation mark) |
| ‹ | U+2039 | SINGLE LEFT-POINTING ANGLE QUOTATION MARK |
| › | U+203A | SINGLE RIGHT-POINTING ANGLE QUOTATION MARK |
| « | U+00AB | LEFT-POINTING DOUBLE ANGLE QUOTATION MARK |
| » | U+00BB | RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK |
| ‘ | U+2018 | LEFT SINGLE QUOTATION MARK (single high-6) |
| ’ | U+2019 | RIGHT SINGLE QUOTATION MARK (single high-9) |
| “ | U+201C | LEFT DOUBLE QUOTATION MARK (double high-6) |
| ” | U+201D | RIGHT DOUBLE QUOTATION MARK (double high-9) |
| „ | U+201E | DOUBLE LOW-9 QUOTATION MARK (double low-9) |
Quotation marks are inserted in appropriate places in a document with the 'open-quote' and 'close-quote' values of the 'content' property. Each occurrence of 'open-quote' or 'close-quote' is replaced by one of the strings from the value of 'quotes', based on the depth of nesting.
'Open-quote' refers to the first of a pair of quotes, 'close-quote' refers to the second. Which pair of quotes is used depends on the nesting level of quotes: the number of occurrences of 'open-quote' in all generated text before the current occurrence, minus the number of occurrences of 'close-quote'. If the depth is 0, the first pair is used, if the depth is 1, the second pair is used, etc. If the depth is greater than the number of pairs, the last pair is repeated.
Note that this quoting depth is independent of the nesting of the source document or the formatting structure.
Some typographic styles require open quotation marks to be repeated before every paragraph of a quote spanning several paragraphs, but only the last paragraph ends with a closing quotation mark. In CSS, this can be achieved by inserting "phantom" closing quotes. The keyword 'no-close-quote' decrements the quoting level, but does not insert a quotation mark.
The following style sheet puts opening quotation marks on every paragraph in a BLOCKQUOTE, and inserts a single closing quote at the end:
BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }
This relies on the last paragraph being marked with a class "last", since there are no selectors that can match the last child of an element.
For symmetry, there is also a 'no-open-quote' keyword, which inserts nothing, but increments the quotation depth by one.
Note. If a quotation is in a different language than the surrounding text, it is customary to quote the text with the quote marks of the language of the surrounding text, not the language of the quotation itself.
For example, French inside English:
English inside French:The device of the order of the garter is “Honi soit qui mal y pense.”
Il disait: + Il faut mettre l'action en ‹ fast forward ›.;
A style sheet like the following will set the 'quotes' property so that 'open-quote' and 'close-quote' will work correctly on all elements. These rules are for documents that contain only English, French, or both. One rule is needed for every additional language. Note the use of the child combinator (">") to set quotes on elements based on the language of the surrounding text:
:lang(fr) > * { quotes: "+" ";" "\2039" "\203A" }
:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }
The quotation marks for English are shown here in a form that most people will be able to type. If you can type them directly, they will look like this:
:lang(fr) > * { quotes: "+" ";" "‹" "›" }
:lang(en) > * { quotes: "“" "”" "‘" "’" }
Automatic numbering in CSS2 is controlled with two properties, 'counter-increment' and 'counter-reset'. The counters defined by these properties are used with the 'counter()' and 'counters()' functions of the the 'content' property.
| Name: | counter-increment |
| Value: | [ <identifier> <integer>? ]+ | none |
| Initial: | note |
| Applies To: | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context |
| Inherited: | no |
| Percentages: | N/A |
| Media: | alll |
| Computed value: | specified value |
| Name: | counter-reset |
| Value: | [ <identifier> <integer>? ]+ | none |
| Initial: | note |
| Applies To: | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context |
| Inherited: | no |
| Percentages: | N/A |
| Media: | alll |
| Computed value: | specified value |
The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.
The 'counter-reset' property also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.
If 'counter-increment' refers to a counter that is not in the scope (see below) of any 'counter-reset', the counter is assumed to have been reset to 0 by the root element.
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
If an element or pseudo-element resets or increments a counter and also uses it (in its 'content' property), the counter is used after being reset or incremented.
If an element or pseudo-element both resets and increments a counter, the counter is reset first and then incremented.
The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:
H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }
will only reset 'imagenum'. To reset both counters, they have to be specified together:
H1 { counter-reset: section -1 imagenum 99 }
Counters are "self-nesting", in the sense that re-using a counter in a child element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.
Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
The self-nesting is based on the principle that every element or pseudo-element that has a 'counter-reset' for a counter X, creates a fresh counter X, the scope of which is the element or pseudo-element, its following siblings, and all the descendants of the element or pseudo-element and its following siblings.
In the example above, an OL will create a counter, and all children of the OL will refer to that counter.
If we denote by item[n] the nth instance of the "item" counter, and by "(" and ")" the beginning and end of a scope, then the following HTML fragment will use the indicated counters. (We assume the style sheet as given in the example above).
<OL> <!-- (set item[0] to 0 -->
<LI>item <!-- increment item[0] (= 1) -->
<LI>item <!-- increment item[0] (= 2) -->
<OL> <!-- (set item[1] to 0 -->
<LI>item <!-- increment item[1] (= 1) -->
<LI>item <!-- increment item[1] (= 2) -->
<LI>item <!-- increment item[1] (= 3) -->
<OL> <!-- (set item[2] to 0 -->
<LI>item <!-- increment item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (set item[3] to 0 -->
<LI> <!-- increment item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- increment item[0] (= 3) -->
<LI>item <!-- increment item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (reset item[4] to 0 -->
<LI>item <!-- increment item[4] (= 1) -->
<LI>item <!-- increment item[4] (= 2) -->
</OL> <!-- ) -->
The 'counters()' function generates a string composed of the values of all counters with the same name, separated by a given string.
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
By default, counters are formatted with decimal numbers, but all the styles available for the 'list-style-type' property are also available for counters. The notation is:
counter(name)
for the default style, or:
counter(name, <'list-style-type'>)
All the styles are allowed, including the glyph types such as 'disc', 'circle', and 'square'. The 'none' value is also allowed, and causes the counter to generate nothing.
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) } /* inserts nothing */
An element that is not displayed ('display' set to 'none') cannot increment or reset a counter.
For example, with the following style sheet, H2s with class "secret" do not increment 'count2'.
H2.secret {counter-increment: count2; display: none}
Elements with 'visibility' set to 'hidden', on the other hand, do increment counters.
The 'list-item', 'section-note', 'endnote', and 'footnote' counters are not reserved. They are ordinary counters that happen to be incremented and used by other properties as well as the counter properties.
The 'total-pages' counter, however, is reserved. Resetting or increasing this counter has no effect. See the Paged Media module [CSS3PAGE] for more information on this counter.
CSS3 introduces 'named strings', which are the textual equivalent of counters and which have a distinct namespace from counters. Named strings follow the same nesting rules as counters. The 'string-set' property accepts values similar to the 'content' property, including the extraction of the current value of counters.
Named strings are a convenient way to pull metadata out of the document for insertion into headers and footers. In HTML, for example, META elements contained in the document HEAD can set the value of named strings. In conjunction with attribute selectors, this can be a powerful mechanism:
META[author] { string-set: author attr(author); }
HEAD > TITLE { string-set: title contents; }
@page:left {
@top {
text-align: left;
vertical-align: middle;
content: string(title);
}
}
@page:right {
@top {
text-align: right;
vertical-align: middle;
content: string(author);
}
}
This section is missing a property definition.
This section is missing a definition of the string() function.
The following example captures the contents of H1 elements, which represent chapter names in this hypothetical document.
H1 { string-set: chapter contents; }
When an H1 element is encountered, the 'chapter' string is set to the element's textual contents, and the previous value of 'chapter', if any, is overwritten.
It's possible that the page in question itself contains multiple elements that set counters or increment strings. Should the formatter use the value at the start of the page or at the end of the page? To address this question, authors may use @counter or @string declaration blocks and the 'page-policy' property, which applies only to strings and counters.
What about counter-policy and string-policy
This 'list-style-type' property can be used with an '@counter' rule to change the counter's default counter style. This is typicially used to change, for example, the footnote style:
@counter footnote {
list-style-type: super-decimal;
}
The default list style types for counters is 'decimal' except for the 'footnote' counter which defaults to 'footnotes'.
Syntax still to come.
Syntax still to come.
| Name: | page-policy |
| Value: | start | first | last |
| Initial: | start |
| Applies to: | @counter and @string blocks |
| Inherited: | N/A |
| Percentages: | N/A |
| Media: | paged |
| Computed value: | specified value |
'page-policy' determines which page-based occurance of a given element is applied to a counter or string value:
The following example places the chapter name in the header, specifying that it is the value of the string at the end of the page. Example:
@string chapter { page-policy: last; }
@page {
size: 21.0cm 29.7cm; /* A4 */
@top {
text-align: right;
vertical-align: center;
content: string (chapter);
}
}
To use the chapter name as it was when the processing of the page started, the designer would specify a 'page-policy' of 'start' instead of 'last'. Designers can also use the value of a string or counter after its first state change on a page by specifying 'first'.
| Name: | content |
| Value: | [ <uri> ',' ]* [ normal | none | inhibit | <content-list> ] |
| Initial: | normal |
| Applies To: | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Computed value: | The specified value with each occurrence of 'normal' expanded as per the prose below. |
The 'content' property dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.
If the value is the only value in the list, as the two URIs in the example below are:
h1 { content: url(header/mng), url(header/png); }
...then if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any. In the example above, if 'header/mng' wasn't in a supported format, then 'header/png' would have been used instead. If no alternatives exist, then 'none' is used as a final fallback, so in the example above, if 'header/png' wasn't available either, then the <h1> element would be empty.
Thus to make an element fallback on its contents, you have to explicitly give 'contents' as a fallback:
content: url(1), url(2), url(3), contents;
If the URI is not the only value in the list, as the second URI in the following example:
h1 { content: url(welcome), "Welcome to: " url(logo); }
...then if the file is available and the format is supported, then an anonymous replaced inline element is inserted, otherwise the image is ignored (as if it hadn't been given at all).
When a URI is used as replaced content, it affects the generation of '::before' and '::after' pseudo-elements.
For an element, this computes to 'contents'.
For '::alternate', if the superior parent uses the 'footnote', 'endnote', or 'section-note' counter in its 'content' property then the computed value of 'content' is 'contents', otherwise it computes to 'inhibit'.
For '::before', '::after', and '::line-marker' this computes to 'inhibit'.
For '::marker', if the superior parent's superior parent uses 'footnote' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(footnote, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.
For '::marker', if the superior parent's superior parent uses 'endnote' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(endnote, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.
For '::marker', if the superior parent's superior parent uses 'section-note' in its 'content' property then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(section-note, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.
Otherwise, for '::marker', if the computed value of 'display' for the superior parent is 'list-item' then 'normal' computes to the computed value of the 'list-style-image' property if the list-style-image is not 'none', otherwise 'counter(list-item, <list-style-type>) "suffix"' where <list-style-type> is the computed value of the 'list-style-type' property if that property is not 'none' and suffix is the suffix appropriate for that list style type, otherwise 'inhibit'.
For the '@footnote' area, it computes to 'pending(footnote)'.
For margin areas, it computes to 'none'.
On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.
On pseudo-elements it causes the pseudo-element to have no content.
In neither case does it prevent any pseudo-elements which have this element or pseudo-element as a superior from being generated.
On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.
On pseudo-elements, this inhibits the creation of the pseudo-element, as if 'display' computed to 'none'.
In both cases, this further inhibits the creation of any pseudo-elements which have this pseudo-element as a superior.
[ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counters> | <strings> | open-quote | close-quote | no-open-quote | no-close-quote | <glyph> | <uri> | <date> | document-url | <target> ]+
One or more of the following values, concatenated.
This causes all elements and pseudo-elements whose 'move-to' property computes to the specified identifier to be inserted as children of the current element (or pseudo-element). Note: This doesn't change the DOM, and elements and pseudo-elements that have been moved inherit from their position in the DOM, not from their new position.
This must be the case, because otherwise it would be impossible to determine the value of 'move-to'. Unfortunately, this can cause some unfortunate discontinuities, such as adjacent footnotes using different fonts because they were moved from elements with different fonts. It is therefore important that moved content be styled with the new location in mind.
Note that only elements and pseudo-element that have not yet been reinserted into content are moved. For example:
moved { move-to: insert; }
insert { content: pending(insert); }
<root>
<moved> A </moved>
1
<insert/>
2
<moved> B </moved>
3
<insert/>
</root>
...would result in "1 A 2 3 B".
If used on an element or pseudo-element (particularly '::alternate') which has a 'move-to' property with a computed value other than 'here', the content pending at the pseudo-element's superior's position is inserted, not the content pending at the element or pseudo-element's insertion point. Similarly if used on a child of an element that has been moved: the 'content' property is evaluated before the element is inserted in its new position. This should prevent an element ever being inserted into itself or other such existential conundrums.
Counters on content that is moved in this way are evaluated at the point of origin, not the insertion point.
The identifiers 'here' and 'normal' are valid, in that they do not cause a parse error and are not ignored, but they are useless as the 'move-to' property cannot ever be set to an identifier with either of those values.
Need to define exactly how this interacts with 'position:fixed'. Does 'position:fixed' cause multiple rendering objects to be created, one per page? If so where does 'move-to' on a 'position:fixed' element move from?
If the element or pseudo-element's 'display' property computes to anything but 'inline' then the element or pseude-element contains an empty anonymous inline box, otherwise the element contains an empty string.
(This is a formal way of saying that an empty string is different from 'none' in that it forces the creation of a line box, even if the line box would be empty.)
The element or pseudo-element contains the specified string. Occurrences of line-feed or space characters in the string are handled according to the properties given in the Text module.
The element's descendents. Since this can only be used once per element (you can't duplicate the children if, e.g., one is a plugin or form control), it is handled as follows:
Always honoured. Note that this is the default, since the initial value of 'content' is 'normal' and 'normal' computes to 'contents' on an element.
Evaluates to nothing (like 'none').
Check to see that it is not set on a "previous" pseudo-element, in the following order, depth first:
If it is already used, then it evaluates to nothing (like 'none'). Only pseudo-elements that are actually generated are checked. Thus
/* ::after(2) { content: inhibit; } /* implied by initial value */
::after(9999) { content: contents }
...would typically not change anything.
So for example, in the following case:
foo { content: none; }
foo::before { content: '[' counter(footnote) ']' contents; }
foo::alternate { content: counter(footnote) '. ' contents; }
...the '::before' pseudo-element's contents would become '[1]', and the footnote would contain '1. ' followed by the element's contents, because the '::alternate' takes priority over the '::before' pseudo-element at the same depth.
However, in the following case:
/* foo { content: normal; } /* this is the initial value */
foo::after { content: contents; }
...the element's 'content' property would compute to 'contents' and the after pseudo element would have no contents (equivalent to 'none') and thus would not appear.
Note that while it is useless to include 'contents' twice in a single 'content' property, that is not a parse error. The second occurrence simply has no effect, as it has already been used. It is also not a parse error to use it on a marker pseudo-element, it is only during the rendering stage that it gets treated like 'none'.
Shorthand for 'counter(footnote, normal)'. This is intended to be used on the in-flow part of a footnote.
Shorthand for 'counter(endnote, normal)'. This is intended to be used on the in-flow part of a endnote.
Shorthand for 'counter(section-note, normal)'. This is intended to be used on the in-flow part of a section-note.
Shorthand for 'counter(list-item, normal)'. Note that this is not equivalent to 'normal' when set on a '::marker' pseudo-element that has a superior with 'display' set to 'list-item', as it ignores the 'list-style' properties.
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the named counter at this point in the formatting structure; it is formatted in the indicated style (the default is specified using '@counter' rules). The latter function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name at this point in the formatting structure, separated by the specified string. The counters are rendered in the indicated style (the default is again specified using '@counter' rules). See the section on automatic counters and numbering for more information.
Set strings may be specified with the 'string(name)' expression. The generated text is the value of the named string at this point in the formatting structure. See the section on named strings for more information.
These values are replaced by the appropriate string from the 'quotes' property.
Inserts nothing (as in 'none'), but increments (decrements) the level of nesting for quotes.
Inserts the specified symbol. The available symbols are:
For more information on the list of symbols and their definitions, see the Lists module [CSS3LIST].
The 'date(format)' expression returns the current date and/or time, formatted according to the specified formatting string. Formatting strings will be defined in a future version of this draft and may be based on POSIX date formatting strings.
The URI of the current document. For local files, this may simply be the local file name.
Using the target expressions, authors can write cross-references. Need to write this up.
If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
To insert text around replaced content, '::outside::before' and '::outside::after' may be used.
| Name: | crop |
| Values: | <shape> | auto |
| Initial: | auto |
| Applies To: | replaced elements |
| Inherited: | no |
| Percentages: | relative to intrinsic size |
| Media: | visual |
| Computed value: | The specified value. |
This property allows a replaced element to be just a rectangular area of an object, instead of the whole object.
The 'crop' property adds a step when determining the intrinsic dimensions of an element. With 'crop', the notion of computed intrinsic width and height are introduced. When the layout algorithms reference the "intrinsic width" (and/or height), they are referring to the computed intrinsic width and height.
The computed intrinsic width and height of an element are the result of applying the crop to the actual intrinsic width and height of the element.
If the element does not have an intrinsic width, the UA may in some cases be able to infer the intrinsic width that the style sheet writer assumed. First the UA must find the computed 'width' and computed 'height' and then the intrinsic width can be found as follows (the intrinsic height is analogous):
Note: 'crop' does not impact the scaling, stretching, tiling or positioning of the replaced element. 'crop' simply allows the author to essentially use a part of a replaced element in place of the element itself for all intents and purposes.
The following example displays both the whole sheep and its head:
.thumbnail { crop: rect(0px, 115px, 85px, 30px) }
<p>Here is Woolly, the CSS sheep:
<img src="woolly" alt="Woolly">
<p>And here he is as a thumbnail:
<img src="woolly" class="thumbnail" alt="Woolly thumbnail">
The result might look like this:
The same image, once uncropped, once cropped.
Replaced content may have intrinsic dimensions, such as: an intrinsic width and an intrinsic height, a fixed intrinsic ratio, or a ratio calculable from a specified width or height.
The 'height' and 'width' properties' 'auto' values change meaning when applied to a replaced element with intrinsic dimensions.
If applied to both dimensions, then if the replaced content has an intrinsic width, the width computes to the actual width of the content, otherwise if the replaced content has an intrinsic height, the height computes to the actual height of the content, otherwise the width is UA-defined. The remaining dimension is then calculated so as to preserve the aspect ratio. (This paragraph assumes a vertical block progression direction. In a horizontal block progression direction context, the 'height' property is done first.)
If applied to only one of the two properties only, then if the element has any intrinsic dimensions at all, the property is calculated to preserve the aspect ratio, otherwise the property is given a UA-specific value.
To make an element into a footnote, leaving a marker behind:
fn { content: footnote; }
By carefully defining the computation rules of initial values, this causes the following:
/* Replace the element with a footnote leader counter */
fn { content: counter(footnote, footnotes); }
/* Move the content of the element into the '::alternate'
pseudo-element, and mark that pseudo-element to be moved
to the footnote area. */
fn::alternate { content: contents; move-to: footnotes; }
/* Make the footnote marker be the footnote counter */
fn::alternate::marker { content: counter(footnote, footnotes); }
/* Make the footnote area expect to receive footnotes. */
@footnote { content: pending(footnotes); }
Note that there is no magic involved, the computation rules are simply carefully designed to compute as described above.
To make an element's attribute into a footnote:
[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }
To use numbers for footnotes instead of symbols:
@counter footnote {
list-style-type: decimal-super;
}
To put three borders around an element:
h1 { border: solid blue; }
h1::outside(1) { border: solid green; display: block; }
h1::outside(2) { border: solid red; display: block; }
To put a background in each corner:
body::outside(1) { display: block; background: top left url(tl); }
body::outside(2) { display: block; background: top right url(tr); }
body::outside(3) { display: block; background: bottom left url(bl); }
body::outside(4) { display: block; background: bottom right url(br); }
To use all title attributes as section numbered notes:
section > [title]::after { content: section-note; }
section > [title]::after::alternate { content: attr(title); }
section::after { content: 'Notes: ' pending(section-notes); }
Note how setting 'content' to 'section-note' on the '::after' pseudo-element automatically sets 'move-to' on the '::after::alternate' pesudo-element to 'section-notes', due to the definition of the initial value of 'move-to'.
Top floats (assuming fixed position elements are positioned relative is the page area's border edge):
img {
move-to: top-floats;
}
:root::before {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 10em;
content: pending(top-floats);
}
@page {
padding-top: 10em;
}
A test suite checking many of the more involved of this specifiation, as well as the basics, will be created and used to establish whether the CR exit criteria have been met.
There will be several profiles: Level 1 (equivalent to the CSS1 model), Level 2 (not quite identical to the CSS2 model), and Full.
An implementation can implement a superset of the features and claim conformance to the profile.
Stuart Ballard, David Baron, Bert Bos, and Tantek Çelı̇k provided invaluable suggestions used in this specification.
| Property | Values | Initial | Applies to | Inh. | Percentages | Media |
|---|---|---|---|---|---|---|
| content | [ <uri> ',' ]* [ normal | none | inhibit | <content-list> ] | normal | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas | no | N/A | all |
| counter-increment | [ <identifier> <integer>? ]+ | none | note | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context | no | N/A | alll |
| counter-reset | [ <identifier> <integer>? ]+ | none | note | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context | no | N/A | alll |
| crop | <shape> | auto | auto | replaced elements | no | relative to intrinsic size | visual |
| display | normal | normal | all elements, ::before, ::after, ::alternate, and ::outside | no | N/A | all |
| move-to | normal | here | <identifier> | normal | all elements, ::before, ::after, and ::alternate | no | N/A | all |
| page-policy | start | first | last | start | @counter and @string blocks | N/A | N/A | paged |
| quotes | foo | bar | text | all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas | no | N/A | visual |