Abstract

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.

Status of this document

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 [email protected] (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.

Candidate Recommendation Exit Criteria

For this specification to exit the CR stage, the following conditions must be met:

1. There must be at least two interoperable implementations implementing all the features. For the purposes of this criterion, we define the following terms:

   feature

   a section, subsection, assertion, or other testable aspect of the specification.

   interoperable

   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.

   implementation

   a user agent which:

   1. implements the feature.
   2. is available (i.e. publicly downloadable or available through some other public point of sale mechanism). This is the "show me" requirement.
   3. is shipping (i.e. development, private or unofficial versions are insufficient).
   4. is not experimental (i.e. is intended for a wide audience and could be used on a daily basis).

2. 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.

3. Features will be dropped if two or more interoperable implementations are not found by the end of the CR period.

4. 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.

Table of contents

• Status of this document
  • Candidate Recommendation Exit Criteria
• 1. Dependencies on other modules
• 2. Introduction
  • 2.1. Conformance Requirements
• 3. Terminology
• 4. Pseudo-elements
  • 4.1. Syntax
  • 4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements
    • 4.2.1. Nesting '::before' and '::after' pseudo-elements
    • 4.2.2. Inserting multiple '::before' and '::after' pseudo-elements
  • 4.3. Wrapping elements in pseudo-elements with '::outside'
    • 4.3.1. Mixing '::outside' with '::before' and '::after'
  • 4.4. Inserting new content later in the document tree with '::alternate'
    • 4.4.1. Mixing '::alternate' with '::outside', '::before', and '::after'
  • 4.5. Block markers: The '::marker' pseudo-element
  • 4.6. Line markers: The '::line-marker' pseudo-element
• 5. Moving content to later in the document: the 'move-to' property
• 6. The 'display' property
• 7. Specifying quotes with the 'quotes' property
  • 7.1. Inserting quotes with the 'content' property
• 8. Automatic counters and numbering: the 'counter-increment' and 'counter-reset' properties
  • 8.1. Nested counters and scope
  • 8.2. Counter styles
  • 8.3. Counters in elements with 'display: none'
  • 8.4. Reserved Counter Names
• 9. Named strings
• 10. '@counter' and '@string'
  • 10.1. '@counter'
  • 10.2. '@string'
  • 10.3. Determining which counter or string-set value to use: the 'page-policy' property
• 11. Inserting and replacing content with the 'content' property
• 12. Replaced content
  • 12.1. The 'crop' property
  • 12.2. Intrinsic dimensions
• 13. Examples
  • 13.1. Footnote elements
  • 13.2. Footnote attributes
  • 13.3. Styling footnotes
  • 13.4. Multiple styles on one element
  • 13.5. Section notes
  • 13.6. Top floats
• 14. Test suite
• 15. Profiles
• Acknowledgments
• References
  • Normative references
  • Other references
• Index
• Property index

1. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

• CSS3 module: syntax [CSS3SYN]
• CSS3 module: values and units [CSS3VAL]
• CSS3 module: selectors [SELECT]
• CSS3 module: lists [CSS3LIST]
• CSS3 module: block box model [CSS3BOX]
• CSS3 module: inline box model [CSS3LINE]
• CSS3 module: paged media [CSS3PAGE]

2. Introduction

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

2.1. Conformance Requirements

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.

3. Terminology

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.

superior parent

A pseudo-element's superior parent is the element or pseudo-element to which it is associated. e.g. the superior parent of the pseudo-element matched by '::before::after' is the pseudo-element matched by '::before', and that pseudo-element's superior parent is the element itself. The suporior parent of an '::outside(n)' pseudo-element is the '::outside(n-1)' pseudo-element. Note that an element never has a superior parent, and a pseudo-element always has exactly one.

superior siblings

The '::before' or '::after' pseudo-elements that have lower numeric arguments. e.g. '::before(2)' is a superior sibling of '::before(5)'. Only '::before' and '::after' pseudo-elements with numeric arguments greater than 1 have superior siblings.

superior

Any element or pseudo-element that is either a superior parent or superior sibling.

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".

4. Pseudo-elements

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.

4.1. Syntax

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.

4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements

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.

abbr { content: attr(title); }

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" }

 

  
A
 
B
 
C
 
 

             
E
 
F
 

An anonymous table cell box is generated around the '::before' content in this case, resulting in a 3×2 table.

4.2.1. Nesting '::before' and '::after' pseudo-elements

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         |
| | `---'   |           |
| `---------'           |
`-----------------------'

4.2.2. Inserting multiple '::before' and '::after' pseudo-elements

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               |
| `---'                 |
`-----------------------'

4.3. Wrapping elements in pseudo-elements with '::outside'

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.

4.3.1. Mixing '::outside' with '::before' and '::after'

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.

4.4. Inserting new content later in the document tree with '::alternate'

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'.

4.4.1. Mixing '::alternate' with '::outside', '::before', and '::after'

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 | after1 | | before1 | alternate1 | | | after2 | alternate2 | | |
|      |        | `---------'            | | |        `------------' | |
|      |        `------------------------' | '-----------------------' |
|      `-----------------------------------'                           |
`----------------------------------------------------------------------'

4.5. Block markers: The '::marker' pseudo-element

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.

4.6. Line markers: The '::line-marker' pseudo-element

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'.

5. Moving content to later in the document: the 'move-to' property

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.

normal

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'.

here

The element or pseudo-element is not moved. This value inhibits the creation of '::alternate' pseudo-elements and any pseudo-elements that have such a pseudo-element as a superior.

The element is not displayed at the current location, but at the next occurrence of 'pending()' (where the identifiers match), with all other elements moved to that point, in document order. If at the end af the document (after the '::after' pseudo-elements of the root element) there are outstanding elements, then they are all inserted in document order at that point.

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

6. The 'display' property

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.

normal

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).

none

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.

list-item

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'.

7. Specifying quotes with the 'quotes' property

This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:

none

The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks, as if they were 'no-open-quote' and 'no-close-quote' respectively.

[ ]+

Values for the 'open-quote' and 'close-quote' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.

/* 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 }

  
    
  
  
    
Quote me!
  

"Quote me!"

  
    
  
  
    
Trøndere gråter når Vinsjan på kaia blir deklamert.
  

+Trøndere gråter når  blir deklamert.;

7.1. Inserting quotes with the 'content' property

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.

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

For symmetry, there is also a 'no-open-quote' keyword, which inserts nothing, but increments the quotation depth by one.

:lang(fr) > * { quotes: "+" ";" "\2039" "\203A" }
:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019" }

:lang(fr) > * { quotes: "+" ";" "‹" "›" }
:lang(en) > * { quotes: "“" "”" "‘" "’" }

8. Automatic counters and numbering: the 'counter-increment' and 'counter-reset' properties

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.

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.

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 }

8.1. Nested counters and scope

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.

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.

               
  
item         
  
item         
    
           
      
item     
      
item     
      
item     
        
       
          
item 
        
      
        
       
          
     
        
      
      
item     
  
item         
              
               
  
item         
  
item         
              

The 'counters()' function generates a string composed of the values of all counters with the same name, separated by a given string.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

8.2. Counter styles

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 */

8.3. Counters in elements with 'display: none'

An element that is not displayed ('display' set to 'none') cannot increment or reset a counter.

H2.secret {counter-increment: count2; display: none}

Elements with 'visibility' set to 'hidden', on the other hand, do increment counters.

8.4. Reserved Counter Names

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.

9. Named strings

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.

H1 { string-set: chapter contents; }

10. '@counter' and '@string'

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

10.1. '@counter'

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.

10.2. '@string'

Syntax still to come.

10.3. Determining which counter or string-set value to use: the 'page-policy' property

'page-policy' determines which page-based occurance of a given element is applied to a counter or string value:

start

Takes the value of the counter or string at the beginning of the page (before applying style to the elements of the page, but after applying it to the @page context itself).

first

Takes the value after the first state change in the counter or string during processing of the page.

last

Takes the value following the final state change on the page.

@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'.

11. Inserting and replacing content with the 'content' property

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

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.

normal

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, ) "suffix"' where 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, ) "suffix"' where 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, ) "suffix"' where 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, ) "suffix"' where 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'.

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.

inhibit

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() | | contents | footnote | endnote | section-note | list-item | | | open-quote | close-quote | no-open-quote | no-close-quote | | | | document-url | ]+

One or more of the following values, concatenated.

pending()

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); }


   A 
  1
  
  2
   B 
  3
  

...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?

"" (the empty string)

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.

contents

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:

If set on the element:

Always honoured. Note that this is the default, since the initial value of 'content' is 'normal' and 'normal' computes to 'contents' on an element.

If set on a '::marker' or '::line-marker' pseudo-element:

Evaluates to nothing (like 'none').

If set on one of the element's other pseudo-elements:

Check to see that it is not set on a "previous" pseudo-element, in the following order, depth first:

1. the element itself
2. ::alternate
3. ::before
4. ::after

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'.

footnote

Shorthand for 'counter(footnote, normal)'. This is intended to be used on the in-flow part of a footnote.

endnote

Shorthand for 'counter(endnote, normal)'. This is intended to be used on the in-flow part of a endnote.

section-note

Shorthand for 'counter(section-note, normal)'. This is intended to be used on the in-flow part of a section-note.

list-item

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.

open-quote and close-quote

These values are replaced by the appropriate string from the 'quotes' property.

no-open-quote and no-close-quote

Inserts nothing (as in 'none'), but increments (decrements) the level of nesting for quotes.

Inserts the specified symbol. The available symbols are:

box

A hollow square. (like □ U+25A1 WHITE SQUARE, ◻ U+25FB WHITE MEDIUM SQUARE, or ◽ U+25FD WHITE MEDIUM SMALL SQUARE)

check

A check mark. On interactive media, it is suggested that the same glyph which is used on the platform to render a checked menu item be used for 'check'. (like ✓ U+2713 CHECK MARK)

circle

A hollow circle. (like ◦ U+25E6 WHITE BULLET)

diamond

A filled diamond. On interactive media, it is suggested that the same glyph which is used on the platform next to a selected menu item be used for 'diamond'. On some platforms, this is similar to 'disc'. (like ◆ U+25C6 BLACK DIAMOND or ♦ U+2666 BLACK DIAMOND SUIT)

disc

A filled circle. (like • U+2022 BULLET)

hyphen

A hyphen bullet. (like ⁃ U+2043 HYPHEN BULLET or – U+2013 EN DASH)

square

A filled square. (like ■ U+25A0 BLACK SQUARE, ◼ U+25FC BLACK MEDIUM SQUARE, or ◾ U+25FE BLACK MEDIUM SMALL SQUARE)

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.

document-url

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.

12. Replaced content

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.

12.1. The 'crop' property

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.

'auto'

The element's computed intrinsic width and height are the same as its actual intrinsic width and height.

rect(top, right, bottom, left)

Each of the four arguments can be a or a . All percentage values are computed relative to the intrinsic dimensions of the element, if there is one. Values are offsets relative to the top left of the element. The computed intrinsic width and height of the element are determined by subtracting the left from the right for the width, and similarly top from bottom for the height. However, if this computation results in a negative value, it is considered to be zero.

inset-rect(top, right, bottom, left)

Like rect(), except that the values are offsets relative to the respective edges 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):

1. If 'crop' is 'auto', the assumed intrinsic width is the same as the computed value of 'width'
2. If 'crop' is 'rect(t, r, b, l)' and r is a percentage, the intrinsic width can be solved from the equation: r = computed 'width' + l
3. If 'crop' is 'rect(t, r, b, l)' and r is not a percentage, the intrinsic width cannot be computed and the result is UA dependent.
4. If 'crop' is 'inset-rect(t, r, b, l)', then the intrinsic width can always be solved from the equation intrinsic width = l + computed 'width' + r

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.

.thumbnail { crop: rect(0px, 115px, 85px, 30px) }

Here is Woolly, the CSS sheep:

And here he is as a thumbnail:

12.2. Intrinsic dimensions

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.

13. Examples

13.1. Footnote elements

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.

13.2. Footnote attributes

To make an element's attribute into a footnote:

[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }

13.3. Styling footnotes

To use numbers for footnotes instead of symbols:

@counter footnote {
    list-style-type: decimal-super;
}

13.4. Multiple styles on one element

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); }

13.5. Section notes

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'.

13.6. Top floats

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;
}

14. Test suite

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.

15. Profiles

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.

Acknowledgments

Stuart Ballard, David Baron, Bert Bos, and Tantek Çelı̇k provided invaluable suggestions used in this specification.

References

Normative references

[CSS3BOX]

Bert Bos. CSS3 module: box model. 26 July 2001. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2001/WD-css3-box-20010726

[CSS3LINE]

Eric A. Meyer. CSS3 module: linebox model. (forthcoming). W3C working draft. (Work in progress.)

[CSS3LIST]

Tantek ?elik; Ian Hickson. CSS3 module: lists. 20 Feb 2002. W3C working draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-css3-lists-20020220

[CSS3PAGE]

Robert Stevahn. CSS3 module: paged media. 28 Sep 1999. W3C working draft. (Work in progress) URL: http://www.w3.org/TR/1999/WD-css3-page-19990928

[CSS3SYN]

David Baron. CSS3 module: syntax. (forthcoming). W3C working draft. (Work in progress.)

[CSS3VAL]

H?kon Wium Lie. CSS3 module: values and units. (forthcoming). W3C working draft. (Work in progress.)

[RFC2119]

S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

[SELECT]

Daniel Glazman; Tantek ?elik; Ian Hickson; et al. Selectors. 13 Nov 2001. W3C Candidate Recommendation. URL: http://www.w3.org/TR/2001/CR-css3-selectors-20011113

Other references

Index

• box, #
• check, #
• circle, #
• close-quote, #
• content, #
• contents, #
• counter-increment, #
• counter-reset, #
• counters, #
• crop, #
• diamond, #
• disc, #
• display, #
• document-url, #
• endnote, #
• footnote, #
• here, #
• hyphen, #
• inhibit, #
• list-item, #, #
• , #
• , #
• , #
• move-to, #
• no-close-quote, #
• none, #, #, #
• no-open-quote, #, #
• normal, #, #, #
• open-quote, #
• page-policy, #
• pending(), #
• quotes, #
• scope, #
• section-note, #
• square, #
• superior, #
• superior parent, #
• superior siblings, #

Property index