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.
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.)
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:
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.
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.
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.
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: '25%
top' is now allowed.
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.
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. The 'aural' media type is deprecated.
(A new 'speech' media type is expected in CSS3.)
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'.
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 (_)
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
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.
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.
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.
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
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 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."
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.
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) ).
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'.
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) ).
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.
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.
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).
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.
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.
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.
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
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.
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.
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."
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.
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.
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.
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).
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.
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").
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'.
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).
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".
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.
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
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.
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.
The parenthetical phrase "somewhat analogous to the 'display' property"
was misleading. The 'speak' property resembles 'visibility' in
some ways and 'display' in others.
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.
