Changes

# Appendix C. Changes

Contents

This appendix is informative, not normative.

CSS 2.1 is an updated version of CSS2. The changes between the CSS2 specification (see [CSS2]) and this specification fall into five groups: known errors, typographical errors, clarifications, changes and additions. Typographical errors are not listed here.

## C.1 Additional property values

### C.1.1 Section 4.3.5 Colors

New color value: 'orange'

### C.1.2 Section 9.2.4 The 'display' property

New 'display' value: 'inline-block'

### C.1.3 Section 12.2 The 'content' property

New 'content' value 'normal'. (Because ':before {content: ""}' generates a box, while ':before {content: normal}' does not. It is called 'normal' and not 'none', because 'content: normal' will mean other things for other kinds of elements in CSS3.)

### C.1.4 Section 18.1 Cursors: the 'cursor' property

New 'cursor' value: 'progress'

### C.1.5 Section 16.6 Whitespace: the 'white-space' property

New 'white-space' values: 'pre-wrap' and 'pre-line'

## C.2 Changes

### C.2.1 Section 3.2 Conformance

Support for user style sheets is now required (in most cases), rather than just recommended.

### C.2.2 Section 6.1.2 Computed values

The computed value of a property can now also be a percentage. In particular, the following properties now inherit the percentage if the specified value is a percentage:

- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top,
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent

Note that only 'text-indent' inherits by default, the others only inherit if the 'inherit' keyword is specified.

### C.2.3 Section 6.4.3 Calculating a selector's specificity

The "style" attribute now has a higher specificity than any style rule.

### C.2.4 Section 6.4.4 Precedence of non-CSS presentational hints

"Non-CSS presentational hints" no longer exist, with the exception of a small set of attributes in HTML.

### C.2.5 Chapter 9 Visual formatting model

The value 'compact' for 'display' does not exist in CSS 2.1.

### C.2.6 Section 10.3.7 Absolutely positioned, non-replaced elements

Absolutely positioned elements can now "shrink-wrap" their contents:

When both 'width' and 'right' (or 'width' and 'left') are 'auto', the element's computed width is the width of the contents (using an algorithm similar to that for table cells) and then 'right' (or 'left') is solved. CSS2 incorrectly said that 'right' (or 'left') was set to 0 in that case, and then width was solved.

### C.2.7 Section 10.6.4 Absolutely positioned, non-replaced elements

Like normal-flow block-level elements, absolutely positioned elements by default take on the height of their contents ("shrink-wrap"). If 'height' and 'bottom' are both 'auto', the computed value of 'height' is set to the height of the contents and then 'bottom' is solved. CSS2 incorrectly said the reverse: 'bottom' was set to 0 and then height was solved.

### C.2.8 Section 11.1.2 Clipping: the 'clip' property

While CSS2 specified that values of "rect()" give offsets from the respective sides of the box, current implementations interpret values with respect to the top and left edges for all four values (top, right, bottom, and left). This is now the correct interpretation.

### C.2.9 Section 14.2.1 Background properties

Under 'background-position', the sentence "Keywords cannot be combined with percentage values or length values (all possible combinations are given above)" is removed. I.e., a value like: 'top 25%' is now allowed.

### C.2.10 17.4.1 Caption position and alignment

The 'left' and 'right' values on 'caption-side' have been removed.

### C.2.11 17.5.4 Horizontal alignment in a column

The <string> value for 'text-align' is not part of CSS 2.1.

### C.2.12 Section 17.6 Borders

Several popular browsers assume an initial value for 'border-collapse' of 'separate' rather than 'collapse' or exhibit behavior that is close to that value, even if they do not actually implement the CSS table model. 'Separate' is now the initial value.

### C.2.13 Chapter 12 Generated content, automatic numbering, and lists

The 'marker' value for 'display' does not exist in CSS 2.1

### C.2.14 Section 12.2 The 'content' property

The '<uri>' value is dropped.

### C.2.15 Chapter 13 Paged media

The 'size', 'marks' and 'page' properties are not in CSS 2.1.

### C.2.16 Chapter 15 Fonts

The 'font-stretch' and 'font-size-adjust' properties don't exist in CSS 2.1.

Font descriptors and the '@font-face' declaration don't exist in CSS 2.1.

### C.2.17 Chapter 16 Text

The 'text-shadow' property is not in CSS 2.1.

### C.2.18 Appendix A. Aural style sheets

Chapter 19 on aural style sheets has become appendix A and is not normative in CSS 2.1. Related units (deg, grad, rad, ms, s, Hz, kHz) are also moved to this appendix, as is the 'speak-header' property from the "tables" chapter.

### C.2.19 Other

The former informative appendix C, "Implementation and performance notes for fonts," is left out of CSS 2.1.

## C.3 Errors

### C.3.1 Shorthand properties

Shorthand properties take a list of subproperty values or the value 'inherit'. One cannot mix 'inherit' with other subproperty values as it would not be possible to specify the subproperty to which 'inherit' applied. The definitions of a number of shorthand properties did not enforce this rule: 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue', and 'outline'.

### C.3.2 Section 4.1.1 (and G2)

- The "nmchar" token also allows the range "A-Z".
- In the rule for "any" (in the core syntax), changed "FUNCTION" to "FUNCTION any* ')'".

The underscore character ("_") is allowed in identifiers. The definitions of the lexical macros "nmstart" and "nmchar" now include it.

### C.3.3 4.1.3 Characters and case

In the third bullet, added to point 1:

> 1.with a space (or other whitespace character): "\26 B" ("&B")

the following text: "In this case, user agents should treat a "CR/LF" pair (13/10) as a single whitespace character."

The underscore is allowed in identifiers. Changed "In CSS2, identifiers [...] can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-)" to:

> In CSS2, identifiers [...] contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_)

### C.3.4 Section 4.3 (Double sign problem)

Several values described in subsections of this section incorrectly allowed two "+" or "-" signs at their beginnings.

### C.3.5 Section 4.3.2 Lengths

The suggested reference pixel is based on a 96 dpi device, not 90 dpi. The visual angle is thus about 0.0213 degrees instead of 0.0227, and a pixel at arm's length is about 0.26 mm instead of 0.28

### C.3.6 Section 4.3.6

Deleted the comments about range restriction after the following examples:

    em { color: rgb(255,0,0) }
    em { color: rgb(100%, 0%, 0%) }

### C.3.7 5.10 Pseudo-elements and pseudo-classes

In the second bullet, the following sentence was incomplete: "The exception is ':first-child', which can be deduced from the document tree." The ':lang()' pseudo-class can be deduced from the document in some cases.

### C.3.8 8.2 Example of margins, padding, and borders

The colors in the example HTML did not match the colors in the image.

### C.3.9 Section 8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color'

The value 'transparent' is also allowed on 'border-top-color', 'border-right-color', etc. Changed the line "Value: <color> | inherit" to

> Value: <color> | transparent | inherit

### C.3.10 Section 8.4 Padding properties

The five properties related to padding ('padding', 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left') now say that they don't apply to table rows, row groups, header groups, footer groups, columns, and column groups.

### C.3.11 8.5.3 Border style

Changed the sentence "The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's 'color' property" to

> The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' should be based on the element's 'border-color' property, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

### C.3.12 Section 8.5.4 Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'

Changed <'border-top-width'> to <border-width> as the first value option for 'border-top', 'border-right', 'border-bottom', and 'border-left', and changed <'border-style'> to <border-style>. For 'border', changed <'border-width'> to <border-width> and <'border-style'> to <border-style>.

The value 'transparent' is also allowed on 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'.

Changed the two lines "Value: [ <'border-top-width'> || <'border-style'> || <color> | inherit" to

> Value: [ <border-top-width> || <border-style> || [<color> | transparent] | inherit

### C.3.13 8.5.4 Border shorthand properties: 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'

Changed <'border-top-width'> to <border-width> as the first value option for 'border-top', 'border-right', 'border-bottom', and 'border-left', and changed <'border-style'> to <border-style>. For 'border', changed <'border-width'> to <border-width> and <'border-style'> to <border-style>.

### C.3.14 Section 9.3.1

The definition of the value 'static' now says that the properties 'top', 'right', 'bottom', and 'left' do not apply.

### C.3.15 Section 9.3.2

The properties 'top', 'right', 'bottom', and 'left', incorrectly referred to offsets with respect to a box's content edge. The proper edge is the margin edge. Thus, for 'top', the description now reads: "This property specifies how far a box's top margin edge is offset below the top edge of the box's containing block."

### C.3.16 Section 9.4.3

In the first sentence, added to the end of "Once a box has been laid out according to the normal flow" the words "or floated,".

### C.3.17 Section 9.7 Relationships between 'display', 'position', and 'float'

If an element floats, the 'display' property is set to a block-level value, but not necessarily 'block'. In bullet 3, changed "Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated" to a table with the proper computed values.

### C.3.18 Section 10.3.2 Inline, replaced elements (and 10.3.4, 10.3.6, and 10.3.8)

Changed:

> A specified value of 'auto' for 'width' gives the element's intrinsic width as the computed value.

to:

> If 'width' has a specified value of 'auto' and 'height' also has a specified value of 'auto', the element's intrinsic width is the computed value of 'width'. If 'width' has a specified value of 'auto' and 'height' has some other specified value, then the computed value of 'width' is (intrinsic width) * ( (computed height) / (intrinsic height) ).

### C.3.19 Section 10.3.3

In the last sentence of the paragraph following the equation ("If the value of 'direction' is 'ltr', this happens to 'margin-left' instead") substituted 'rtl' for 'ltr'.

### C.3.20 Section 10.6.2 Inline, replaced elements ... (and 10.6.5)

Changed:

> If 'height' is 'auto', the computed value is the intrinsic height.

to:

> If 'height' has a specified value of 'auto' and 'width' also has a specified value of 'auto', the element's intrinsic height is the computed value of 'height'. If 'height' has a specified value of 'auto' and 'width' has some other specified value, then the computed value of 'height' is (intrinsic height) * ( (computed width) / (intrinsic width) ).

### C.3.21 Section 10.6.3

The height calculation for block-level, non-replaced elements in normal flow, and floating, non-replaced elements was not quite correct. It now takes into account the case when margins do not collapse, due to the presence of a padding or border.

### C.3.22 Section 11.1.1

The example of a DIV element containing a BLOCKQUOTE containing another DIV was not rendered correctly. The first style rule applied to both DIVs, so the second DIV box should have been rendered with a red border as well. The second DIV has now been changed to a CITE, which doesn't have a red border.

### C.3.23 11.2 Visibility: the 'visibility' property

Changed "initial" and "inherited" to:

> Initial: visible
> Inherited: yes

This has the same effect as the original definition, but removes the undefined state of the root element (which was a problem for DOM implementations).

### C.3.24 12.6.2 Lists

Under the 'list-style' property, the example:

    ul > ul { list-style: circle outside } /* Any UL child of a UL */

could never match valid HTML markup (since a UL element cannot be a child of another UL element). An LI has been inserted in between.

### C.3.25 Section 15.2.6

'Totum' and 'Kodic' is not a 'serif' but 'sans-serif'. 'pathang' is not a 'sans-serif' but 'serif'.

### C.3.26 Section 15.5

In bullet 2, changed "the UA uses the 'font-family' descriptor" to "the UA uses the 'font-family' property".

In bullet 6, changed "steps 3, 4 and 5" to "steps 2, 3, 4 and 5".

### C.3.27 Section 16.6 Whitespace: the 'white-space' property

The 'white-space' property applies to all elements, not just block-level elements.

### C.3.28 Section 17.2 The CSS table model

In the definition of table-header-group, changed "footer" to "header" in "Print user agents may repeat footer rows on each page spanned by a table."

### C.3.29 17.2.1 Anonymous table objects

Moved the first bullet text to the prose before the list of generation rules and added missing rules.

### C.3.30 17.5 Visual layout of table contents

The following note:

> Note. Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow, affecting table alignment.

has been amended as follows:

> Note. Table cells may be positioned, but this is not recommended: absolute and fixed positioning, as well as floating, remove a box from the flow, affecting table size.

### C.3.31 17.5 Visual layout of table contents

Changed:

> Like other elements of the document language, internal table elements generate rectangular boxes with content, padding, and borders. They do not have margins, however.

to:

> Like other elements of the document language, internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

### C.3.32 Section 17.5.1 Table layers and transparency

The rows and columns only cover the whole table in the collapsed borders model, not in the separated borders model. The points 2, 3, 4 and 5 have been corrected to define the area covered by rows, columns, row groups and column groups in terms of the cells they cover.

### C.3.33 Section 17.6.1 The separated borders model

In the image, changed "cell-spacing" to "border-spacing".

### C.3.34 Appendix D.2 Lexical scanner

The underscore character ("_") is be allowed in identifiers. The definitions of the lexical macros "nmstart" and "nmchar" have been fixed.

Note that the tokenizer is case-insensitive, so uppercase A-Z is matched as well.

(Same change in section 4.1.1, see above.)

## C.4 Clarifications

### C.4.1 2.2 A brief CSS2 tutorial for XML

The specification for the XML style sheet PI was written after CSS2 was finalized. The first line of the full XML example should not have been be `<?XML:stylesheet type="text/css" href="bach.css"?>`, but

    <?xml-stylesheet type="text/css" href="bach.css"?>

### C.4.2 Section 4.1.1

DELIM should not have included single or double quote. Refer also to section 4.1.6 on strings, which must have matching single or double quotes around them.

### C.4.3 Section 5.5

Near the end of the section, the text 'Note the whitespace on either side of the "*"' was misleading. The note was not meant to imply that whitespace is required on both sides of the "*" (since the grammar does not require it in this case) but that one may use whitespace in this case.

### C.4.4 Section 5.9 ID selectors

The word "precedence" in the last but one paragraph should have been "specificity."

### C.4.5 Section 5.12.1 The :first-line pseudo-element

Added some clarifications at the end of the section about the fictional tag sequence in the case of nested block-level elements

### C.4.6 Section 6.2.1

The 'inherit' value causes the properties value to be inherited. This applies even to properties for which values do not otherwise inherit.

### C.4.7 6.4 The Cascade

Changed "Rules specified in a given style sheet override rules imported from other style sheets." to "Rules specified in a given style sheet override rules of the same weight imported from other style sheets."

### C.4.8 Section 6.4.3 Calculating a selector's specificity

Added a note:

> The specificity is based only on the form of the selector. In particular, a selector of the form "`[id=p33]`" is counted as an attribute selector (a=0, b=1, c=0), even if the `id` attribute is defined as an "ID" in the source document's DTD.

### C.4.9 Section 7.3 Recognized media types

Text has been added to clarify that media types are mutually exclusive.

### C.4.10 Section 8.1

- From the definition of "padding edge", deleted the sentence "The padding edge of a box defines the edges of the containing block established by the box." For information about containing blocks, consult Section 10.1.
- Border backgrounds are not specified by border properties. Changed the last paragraph of 8.1 to:

  > The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

### C.4.11 Section 8.3.1

Added this clarifying note to the first bullet of the explanation of vertical collapsing of margins:

> Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.

### C.4.12 Section 9.4.2

The statement "When an inline box is split, margins, borders, and padding have no visual effect where the split occurs." has been generalized. Margins, borders, and padding have no visual effect where one or more splits occur.

### C.4.13 Section 9.4.3

Relatively positioned boxes do not always establish new containing blocks. Changed the second paragraph accordingly.

Added clarifying text and an example about the 'left', 'right', 'top' and 'bottom' properties for relative positioning.

### C.4.14 Section 9.10

In this sentence of the last paragraph:

> Conforming HTML user agents may therefore ignore the 'direction' and 'unicode-bidi' properties in author and user style sheets.

the word "ignore" meant that if a 'unicode-bidi' or 'direction' value conflicts with the HTML 4.0 "dir" attribute value, then user agents may choose to use the "dir" value rather than the CSS properties.

User agents are not required to support the 'direction' and 'unicode-bidi' properties to conform to CSS2 unless they support bi-directional text rendering (except for the case of HTML 4.0 as noted above).

The sentence has been rewritten to be clearer.

### C.4.15 10.3.3 Block-level, non-replaced elements in normal flow

Added the following note at the end of the section:

> Note that 'width' may not be greater than 'max-width' and not less than 'min-width'. In particular, it may not be negative. See the rules in section 10.4 below.

### C.4.16 Section 10.5 Content height: the 'height' property

The UA is free to chose the containing block for the root element (see 10.1), therefore this sentence has been added as a suggestion:

> A UA may compute a percentage height on the root element relative to the viewport.

### C.4.17 Section 10.8.1

Clarified this paragraph:

> Note that replaced elements have a 'font-size' and a 'line-height' property, even if they are not used directly to determine the height of the box. The 'font-size' is, however, used to define the 'em' and 'ex' units, and the 'line-height' has a role in the 'vertical-align' property.

as follows:

> Note that replaced elements have a 'font-size' and a 'line-height' property, even if they are not used directly to determine the height of the box: 'em' and 'ex' values are relative to values of 'font-size' and percentage values for 'vertical-align' are relative to values of 'line-height'.

Under 'line-height', after the sentence "If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each generated inline box," added the following clarification:

> The minimum height consist of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").

### C.4.18 Section 11.1

Clarifications to the last two bullets on when overflow may occur:

- A descendent box is positioned absolutely partly outside of the box.
- A descendent box has negative margins, causing it to be positioned partly outside the box.

### C.4.19 Section 11.1.1

Removed 'projection' from this sentence under the value 'scroll'

> When this value is specified and the target medium is 'print' or 'projection', overflowing content should be printed.

### C.4.20 Section 11.1.2

Values of "rect()" should be separated by commas. Thus, the definition of <shape> now starts:

> In CSS2, the only valid <shape> value is: rect (<top>, <right>, <bottom>, <left>) ...

Due to this ambiguity, user agents may support separation of offsets in "rect()" with or without commas.

### C.4.21 12.1 The :before and :after pseudo-elements

Clarification to the following lines:

> The :before and :after pseudo-elements elements allow values of the 'display' property as follows:

> - If the subject of the selector is a block-level element, allowed values are 'none', 'inline' and 'block'. If the value of the pseudo-element's 'display' property has any other value, the pseudo-element will behave as if its value were 'block'.
> - If the subject of the selector is an inline-level element, allowed values are 'none' and 'inline'. If the value of the pseudo-element's 'display' property has any other value, the pseudo-element will behave as if its value were 'inline'.

### C.4.22 Section 12.4.2 Inserting quotes with the 'content' property

Added the following sentence at the end of the 2nd paragraph:

> A 'close-quote' that would make the depth negative is in error and is ignored: the depth stays at 0 and no quote mark is rendered (although the rest of the 'content' property's value is still inserted).

### C.4.23 Lists 12.6.2

To clarify Hebrew numbering, added "(Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...)".

### C.4.24 14.2 The background

Second sentence: "In terms of the box model, 'background' refers to the background of the content and the padding areas" now also mentions the border area. (See also errata to section 8.1 above.) Thus:

> In terms of the box model, "background" refers to the background of the content, padding and border areas.

In the fourth paragraph, added to the end of "User agents should observe the following precedence rules to fill in the background" the following words: "of the canvas".

### C.4.25 14.2.1 Background properties

Added this note after the first paragraph after 'background-attachment':

> Note that there is only one viewport per document. I.e., even if an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with it.

Under 'background-repeat', the sentence "All tiling covers the content and padding areas [...]" has been corrected to

> "All tiling covers the content, padding and border areas [...]".

Under 'background-attachment', the sentence "Even if the image is fixed [...] background or padding area of the element" has been corrected to

> Even if the image is fixed, it is still only visible when it is in the background, padding or border area of the element.

### C.4.26 Section 16.1

Added to:

> The value of 'text-indent' may be negative, but there may be implementation-specific limits.

the following clarification: "If the value of 'text-indent' is negative, the value of 'overflow' will affect whether the text is visible."

### C.4.27 16.2 Alignment: the 'text-align' property

Changed "double justify" to "justify" under "left, right, center, and justify".

### C.4.28 Section 17.5.1 Table layers and transparency

In point 6, changed 'These "empty" cells are transparent' to:

> If the value of their 'empty-cells' property is 'hide' these "empty" cells are transparent through the cell, row, row group, column, and column group backgrounds, letting the table background show through.

To remove ambiguity about the position of backgrounds on rows and column, the following paragraph was added after point 6:

> the edges of the rows, columns, row groups and column groups in the collapsing borders model coincide with the hypothetical grid lines on which the borders of the cells are centered. (And thus, in this model, the rows together exactly cover the table, leaving no gaps; ditto for the columns.) In the separated borders model, the edges coincide with the border edges of cells. (And thus, in this model, there may be gaps between the rows and columns, corresponding to the 'border-spacing' property.)

At the end of the section added the following paragraph:

> Note that if the table has 'border-collapse: separate', the background of the area given by the 'border-spacing' property is always the background of the table element. See 17.6.1

### C.4.29 Section 17.5.2 Table width algorithms

Added the following paragraph after the initial paragraph of this section:

> Note that this section overrides the rules that apply to calculating widths as described in section 10.3. In particular, if the margins of a table are set to '0' and the width to 'auto', the table will not automatically size to fill its containing block. However, once the calculated value of 'width' for the table is found (using the algorithms given below or, when appropriate, some other UA dependant algorithm) then the other parts of section 10.3 do apply. Therefore a table can be centered using left and right 'auto' margins, for instance.

The WG may introduce ways of automatically making tables fit their containing blocks in CSS3.

### C.4.30 17.6.1 The separated borders model

Added clarification about alignment of row/column backgrounds. The sentence "This space is filled with the background of the table element" was replaced by:

> In this space, the row, column, row group, and column group backgrounds are invisible, allowing the table background to show through.

### C.4.31 Borders around empty cells: the 'empty-cells' property

The 'empty-cells' property not only controls the borders, but also the background.

### C.4.32 Section 17.6.2 The collapsing borders model

In the sentence after the question, added "and padding-lefti and padding-righti refer to the left (resp., right) padding of cell i."

### C.4.33 Section 18.2

For the 'ButtonHighlight' value, changed the description from "Dark shadow" to "Highlight color".

### C.4.34 Section A.3

The parenthetical phrase "somewhat analogous to the 'display' property" was misleading. The 'speak' property resembles 'visibility' in some ways and 'display' in others.

### C.4.35 Appendix G.2 Lexical scanner

Removed the following line from the scanner as it does not appear in the grammar:

    "@"{ident}              {return ATKEYWORD;}

The DIMEN token is in the scanner to ensure that a number followed by an identifier is read as one token rather than two. This case is considered an error in CSS2.

### C.4.36 Appendix E. References

The entry for "[URI]" referred to a draft that has become an RFC. The entry has been changed.