This document is currently not maintained. The CSS working group is developing CSS�2.1. When features common to CSS2 and CSS�2.1 are defined differently, please consider the definition in CSS�2.1 as errata for CSS2. While CSS�2.1 is still a Working Draft, the errata are to be considered proposed errata.
Please email error reports to [email protected].
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 do not enforce this rule: 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue', and 'outline'.
[2001-04-03] The underscore character ("_") should be allowed in identifiers. The definitions of the lexical macros "nmstart" and "nmchar" should include it and become, respectively:
nmstart [a-zA-Z_]|{nonascii}|{escape}
nmchar [a-zA-Z0-9-_]|{nonascii}|{escape}
In the third bullet, add 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."
[2001-07-30] The underscore should be allowed in identifiers. Change "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 (_)
Several values described in subsections of this section incorrectly allow two "+" or "-" signs at their beginnings. Lengths, for instance, are described as follows:
The format of a length value (denoted by <length> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.).
However, since <number> already allows a "+" or "-" sign, the above definition means two signs may appear. The following value types allow two signs but are meant to allow one initial sign only:
[2001-08-28] 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
Delete the comments about range restriction after the following examples:
EM { color: rgb(255,0,0) }
EM { color: rgb(100%, 0%, 0%) }
[2002-07-29] Just as for lengths, the unit may be omitted if the value is '0': '0deg' may be written simply as '0'.
Ditto for frequencies and times.
In the second bullet, the following sentence is 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 colors in the example HTML do not match the colors in the image.
[2001-06-25] The value 'transparent' is also allowed on 'border-top-color', 'border-right-color', etc. Change the line "Value: <color> | inherit" to
Value: <color> | transparent | inherit
The five properties related to padding ('padding', 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left') should say that they don't apply to table rows, row groups, header groups, footer groups, columns, and column groups.
Change 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.
Change <'border-top-width'> to <border-width> as the first value option for 'border-top', 'border-right', 'border-bottom', and 'border-left', and change <'border-style'> to <border-style>. For 'border', change <'border-width'> to <border-width> and <'border-style'> to <border-style>.
[2001-06-25] The value 'transparent' is also allowed on 'border-top', 'border-bottom', 'border-right', 'border-left', and 'border'.
Change the two lines "Value: [ <'border-top-width'> || <'border-style'> || <color> | inherit" to
Value: [ <border-top-width> || <border-style> || [<color> | transparent] | inherit
Change <'border-top-width'> to <border-width> as the first value option for 'border-top', 'border-right', 'border-bottom', and 'border-left', and change <'border-style'> to <border-style>. For 'border', change <'border-width'> to <border-width> and <'border-style'> to <border-style>.
The definition of the value 'static' should say that the properties 'top', 'right', 'bottom', and 'left' do not apply.
The properties 'top', 'right', 'bottom', and 'left', incorrectly refer to offsets with respect to a box's content edge. The proper edge is the margin edge. Thus, for 'top', the description should read, "This property specifies how far a box's top margin edge is offset below the top edge of the box's containing block."
In the first sentence, add to the end of "Once a box has been laid out according to the normal flow" the words "or floated,".
[2002-04-15] If an element floats, the 'display' property is set to a block-level value, but not necessarily 'block'. In bullet 3, change "Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated" to:
Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to this table:
Specified value Computed value inline-table table inline, run-in, compact, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption block others same as specified
[2002-10-29] The 'clear' property does not apply to inline elements, thus the example that sets 'clear' on the SPAN element with ID "#sibling" is incorrect. Remove the text and the two images from "To show the effect of the 'clear' property" until the end of the section.
Change:
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." -- substitute 'rtl' for 'ltr'.
Change:
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 is not quite correct. The height calculation should read as follows:
If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their computed value is 0. If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders.
If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box and the bottom border-edge of the bottommost block-level child box. However, if the element has a non-zero top padding and/or top border, then the content starts at the top margin edge of the topmost child. Similarly, if the element has a non-zero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous box.
The example of a DIV element containing a BLOCKQUOTE containing another DIV is not rendered correctly. The first rule:
DIV { width : 100px; height: 100px;
border: thin solid red;
}
Applies to both the external and internal DIV, so, for example, the internal DIV box should be rendered with a red border. The intention of the authors was that the first style rule only apply to the external DIV. This could be accomplished by making it more specific by adding a "class" or "id" value to the markup and changing the selectors accordingly.
[2001-06-25] Change "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).
The 'content' property applies to 'display : marker' elements and both :before and :after pseudo-elements.
Under the 'list-style' property, the following example:
UL > UL { list-style: circle outside } /* Any UL child of a UL */
Will never match valid HTML markup (since a UL element cannot be a child of another UL element; there must be at least an intervening LI element).
Under the 'font-size-adjust' property, in the formula given for <number>, the variables y, a', and c are explained. An explanation for the variable "a" is missing and should read:
a = aspect value of first-choice font
In the sentence beginning "In bicameral scripts..." change "(font size divided by x-height)" to "(x-height divided by font size)".
[2001-06-25] 'font-size-adjust' should be applied to the first choice font as well. (This should have no effect since the value of 'first-size-adjust' typically will be the ex:em ratio of the first choice font.) This corrects an oversight related to cases where the property is inherited into children inline elements.
'Totum' and 'Kodic' is not a 'serif' but 'sans-serif'. 'pathang' is not a 'sans-serif' but 'serif'.
In bullet 2, change "the UA uses the 'font-family' descriptor" to "the UA uses the 'font-family' property".
In bullet 6, change "steps 3, 4 and 5" to "steps 2, 3, 4 and 5".
[2001-08-28] The 'white-space' property applies to all elements, not just block-level elements.
In the definition of table-header-group, change "footer" to "header" in "Print user agents may repeat footer rows on each page spanned by a table."
Move the first bullet text to the prose before the list of generation rules. The rules should then be the following:
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.
Should be 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.
Change:
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.
In the image, change "cell-spacing" to "border-spacing".
@media speech should be @media aural.
[2001-04-03] The underscore character ("_") should be allowed in identifiers. The definitions of the lexical macros "nmstart" and "nmchar" should include it and become, respectively:
nmstart [a-z_]|{nonascii}|{escape}
nmchar [a-z0-9-_]|{nonascii}|{escape}
Note that the tokenizer is case-insensitive, so uppercase A-Z is matched as well.
(Same change in section 4.1.1, see above.)
For the example with the LINK element, the list following the example incorrectly refers to the "ref" attribute. This should be the "href" attribute.
[2002-01-28] The sentence: "For example, the headline font size should be larger than then rest of the text" should read: "For example, the headline font size should be larger than the rest of the text."
Under the definition of "Child", the phrase "if an only if" should read "if and only if".
Under the definition of "Sibling", the last sentence should read, "Element B is a following sibling if it comes after A in the document tree."
The correct RFC number for the registration of the "text/css" content type is RFC 2318, not RFC 2138.
In "XML uses an attribute called XML:LANG", the XML attribute should be in lowercase, i.e., xml:lang.
The rendering of the first example is:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines.
while the fictional tag sequence is given as:
<P><P:first-line> This is a somewhat long HTML
paragraph that will </P:first-line> ...
The word "will" should follow the fictional tag sequence for :first-line.
The last sentence in the penultimate paragraph should begin "All user and author rules..." instead of "All rules user and author rules...".
[ <color> | transparent ]{1,4} | inherit
Under the definition of "ridge", change "grove" to "groove".
In the example after the diagram, the HTML fragment "<P>This is the content of P.</>" should end instead with the end tag "</P>".
In the (third paragraph) sentence "In the example, the color of the anonymous initial boxes is inherited from the P, but the background is transparent", substitute the word "inline" for "initial".
In the second paragraph, "a new a new" should only read "a new".
The 'height' property doesn't apply. The height of the content area is equal to the actual font size of the element. The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the font, not the 'line-height'. But only the 'line-height' is used to compute the height of the line box.
If more than one font size is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we recommend that the largest font size determine the content height.
In the description of the 'scroll' value, add "a" to "if the user agent uses [a] scrolling mechanism".
In the definition of <counter>, the sentence "The latter function also has two forms: 'counter(name, string)' or 'counter(name, string, style)'" should read "two forms: 'counters(name, string)' or 'counters(name, string, style)'"
Change the third paragraph as follows:
For the :before pseudo-element, the baseline in the marker box will be vertically aligned with the baseline in the first line box of the principal box. If the principal box contains no line boxes, or if there is a block box within the principal box that is above the first line box, the top outer edge of the marker box will be aligned with the top outer edge of the principal box.
For the :after pseudo-element, the baseline in the marker box will be vertically aligned with the baseline in the last line box in the principal box. If the principal box contains no line boxes, or if there is a block box within the principal box that is below the last line box, the bottom outer edge of the marker box will be aligned with the bottom outer edge of the principal box.
[2003-07-24] In the second example, there is a "}" missing at the end of the 'LI:before' rule. It should read:
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
}
LI:after {
display: marker;
content: url("sad.gif");
}
}
[2001-07-19] In the last example above
'marker-offset', the line "<TITLE>Markers to create numbered
notes4>/TITLE>" should read "<TITLE>Markers to create
numbered notes</TITLE>" instead.
In the following code, put a ":" after "size".
@page { size 8.5in 11in; margin: 2cm }
The first sentence has one too many "the"s in "please consult the the Gamma Tutorial...".
[2003-01-22] In the second paragraph,
the sentence "Rows, columns, row groups, row columns, and
cells may have borders drawn around them," should read:
Rows, columns, row groups, column groups, and cells may have borders drawn around them.
In the following sentence from the definition of the 'voice-family' property:
If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.
all occurrences of the word "font" should be replaced by "voice family".
Remove "RGB S*" from the rule "term" since rgb() is covered by the "function" production, which matches counter(), atrr(), format(), and others as well.
In the last bullet, change .\55ft to
.\35 5ft.
The value of the 'line-height' property set for the BODY element should be "1.12em".
The OBJECT and APPLET elements should have 'display: inline'.
The initial value for 'background' is missing. The "XX" should be "see individual properties."
The index includes anchors that differ only by base ("A" and "a") and this is not legal HTML. From HTML 4.01, section 12.2.1:
Anchor names that differ only in case may not appear in the same document.
Browser behavior may differ because of this.
The specification for the XML style sheet PI
was written after CSS2 was finalized. The first line of the full XML
example should not be <?XML:stylesheet type="text/css"
href="bach.css"?>, but
<?xml-stylesheet type="text/css" href="bach.css"?>
DELIM should not include 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 "*"' may be misleading. The note is 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.
The word "precedence" in the last but one paragraph should be "specificity."
[2001-08-27] Add the following clarifications at the end of the section:
In case a certain first line is the first line of some block-level element A as well as of A's ancestor B , the fictional tag sequence is as follows:
<B>...<A>...<B:first-line><A:first-line>This is the first line</A:first-line></B:first-line>All fictional tags for first-line are inside the smallest enclosing block -level element and the nesting order of the fictional tags A:first-line and B-first-line is the same as that of the elements A and B .
The "first formatted line" of a block level element is the first line in the element's flow, i.e., ignoring any floats or absolutely positioned elements. For example, in
<div> <p style="float: left">Floating paragraph...</p> <p>First line starts here...</p> </div>he selector 'div:first-line' applies to the first line of the second p, because the first p is taken out of the flow.
The 'inherit' value causes the properties value to be inherited. This applies even to properties for which values do not otherwise inherit.
Change "Rules specified in a given style sheet override rules imported from other style sheets." to Change "Rules specified in a given style sheet override rules of the same weight imported from other style sheets."
Add 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 theidattribute is defined as an "ID" in the source document's DTD.
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.
Add 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.
The statement "When an inline box is split, margins, borders, and padding have no visual effect where the split occurs." may be generalized. Margins, borders, and padding have no visual effect where one or more splits occur.
Relatively positioned boxes do not always establish new containing blocks. Change the second paragraph to:
A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it. The section on containing blocks explains when a relatively positioned box establishes a new containing block.
The following attempts to clarify the meaning of the 'left', 'right', 'top' and 'bottom' properties for relative positioning:
For relatively positioned elements, 'left' and 'right' move the box(es) horizontally, without changing their size. 'Left' moves the boxes to the right, and 'right' moves them to the left. Since boxes are not split or stretched as a result of 'left' or 'right', the computed values are always: left = -right.
If both 'left' and 'right' are 'auto' (their initial values), the computed values are '0' (i.e., the boxes stay in their original position).
If 'left' is 'auto', its computed value is minus the value of 'right' (i.e., the boxes move to the left by the value of 'right').
If 'right' is specified as 'auto', its computed value is minus the value of 'left'.
If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property is 'ltr', the value of 'left' wins and 'right' becomes -'left'. If 'direction' is 'rtl', 'right' wins and 'left' is ignored.
Example. The following two style sheets are equivalent:
DIV.a8 { position: relative; left: -1em; right: auto }andDIV.a8 { position: relative; left: auto; right: 1em }The 'top' and 'bottom' properties move relatively positioned elements up or down. They also must be each other's negative. If both are 'auto', their computed values are both '0'. If one of them is 'auto', it becomes the negative of the other. If neither is 'auto', 'bottom' is ignored (i.e., the computed value of 'bottom' will be minus the value of 'top').
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" means 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).
[2002-04-15] Replace the third paragraph ("If a document contains right-to-left characters [...] left-to-right languages.") with:
If a document contains right-to-left characters, and if the user agent displays these characters (with appropriate glyphs, not arbitrary substitutes such as a question mark, a hex code, a black box, etc.), the user agent must apply the bidirectional algorithm. User agents are not required to apply the bidirectional algorithm to documents that contain only left-to-right characters. This
seeminglyone-sided requirement reflects the fact that, although not every Hebrew or Arabic document contains mixed-directionality text, such documents are much more likely to contain left-to-right text (e.g., numbers, text from other languages) than are documents written in left-to-right languages to contain right-to-left text.
[2001-06-25] Add 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.
[2002-07-29] Add the following:
Since a UA is free to choose the containing block for the root element (see 10.1, it may, e.g., compute a percentage height on the root element relative to the viewport height.
Clarify 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'.
[2001-08-27] 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," add 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").
Clarifications to the last two bullets on when overflow may occur:
Remove '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.
Values of "rect()" should be separated by commas. Thus, the definition of <shape> should start:
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.
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', 'block', and 'marker'. 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'.
[2001-08-06] Add 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).
To clarify Hebrew numbering, add "(Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...)".
Second sentence: "In terms of the box model, 'background' refers to the background of the content and the padding areas" should also mention 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, add to the end of "User agents should observe the following precedence rules to fill in the background" the following words: "of the canvas".
Add 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 mechamism (see 'overflow'), a 'fixed' background doesn't move with it.
[2001-08-27] Under 'background-repeat', the sentence "All tiling covers the content and padding areas [...]" should be
"All tiling covers the content, padding and border areas [...]".
[2001-08-27] Under 'background-attachment', the sentence "Even if the image is fixed [...] background or padding area of the element" should be
Even if the image is fixed, it is still only visible when it is in the background, padding or border area of the element.
[2000-10-31] Replace the sentence that says: "Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set" by:
Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match.
Add to the explanation of 'font-size' the following clarification: "The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares."
[2000-10-31] In point 8, replace the sentence that says: "If a particular character cannot be displayed using this font, the UA should indicate that a character is not being displayed (for example, using the 'missing character' glyph)" by
If a particular character cannot be displayed using this font, then the UA has no suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.
Add 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."
Change "double justify" to "justify" under "left, right, center, and justify".
[2000-12-12] In point 6, change 'These "empty" cells are transparent' to:
These "empty" cells are transparent if the value of their 'empty-cells' property is 'hide'
[2001-08-27] At the end of the section add 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
The sentence "User agents may ignore these 'display' property values for HTML documents, since authors should not alter an element's expected behavior" should be replaced by:
User agents may ignore these 'display' property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering.
The intention was that a UA may refuse to render an HTML table as anything else than a table. The sentences was not meant to discourage the use of 'display: table' on other, non-table elements in HTML.
Add 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.
[2000-12-12] The 'empty-cells' property not only controls the borders, but also the background.
In the sentence after the question, add "and padding-lefti and padding-righti refer to the left (resp., right) padding of cell i."
For the 'ButtonHighlight' value, change the description from "Dark shadow" to "Highlight color".
The parenthetical phrase "somewhat analogous to the 'display' property" is misleading. The 'speak' property resembles 'visibility' in some ways and 'display' in others.
The @page rule should be entirely outside the @media block:
@page { margin: 10% }
@media print {
H1, H2, H3,
...
}
Remove the following line from the scanner as it do 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.
The entry for "[URI]" referred to a draft that has become an RFC. The entry can be changed to:
- [URI]
- "Uniform Resource Identifiers (URI): Generic Syntax," T. Berners-Lee, R. Fielding, L. Masinter. August 1998. Internet RFC 2396. Available at http://www.ietf.org/rfc/rfc2396.txt
The following changes are proposed by the CSS Working Group. Please note that these changes have "working draft" status and may not be considered definitive unless incorporated into a revised Recommendation.
[2002-02-28] Replace section 6.4.3 with the following text:
A selector's specificity is calculated as follows:
- count 1 if the selector is a 'style' attribute rather than a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names in the selector (= d)
- ignore pseudo-elements.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples, sorted from least specific to most specific:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ LI {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ UL LI {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ UL OL+LI {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ H1 + *[REL=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ UL OL LI.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ LI.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */<HEAD> <TITLE>Specificity Example</TITLE> <STYLE type="text/css"> p#x97z { color: red } </STYLE> </HEAD> <BODY> <P ID=x97z style="color: green"> </BODY>In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.
[2000-10-24] A value 'static-position' is added. Replace the section by this text:
An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:
- 'top'
Value: <length> | <percentage> | auto | static-position | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to height of containing block Media: visual This property specifies how far a box's top margin edge is offset below the top edge of the box's containing block.
- 'right'
Value: <length> | <percentage> | auto | static-position | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to width of containing block Media: visual This property specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block.
- 'bottom'
Value: <length> | <percentage> | auto | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to height of containing block Media: visual This property specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.
- 'left'
Value: <length> | <percentage> | auto | static-position | inherit Initial: auto Applies to: positioned elements Inherited: no Percentages: refer to width of containing block Media: visual This property specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block.
The values for the four properties have the following meanings:
- <length>
- The offset is a fixed distance from the reference edge.
- <percentage>
- The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.
- auto
- The effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.
- static-position
- Only applies to absolutely positioned elements.
- For 'left' use the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static'. The value is negative if the hypothetical box is to the left of the containing block.
- For 'right' use the distance from the right edge of the containing block to the right margin edge of the same hypothetical box as above. The value is positive if the hypothetical box is to the left of the containing block's edge.
- For 'top' use the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static'. The value is negative if the hypothetical box is above the containing block.
For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
[2000-10-24] Like normal-flow block-level elements, absolutely positioned elements by default take on the height of their contents. Replace the section by this text:
For absolutely positioned elements, the vertical dimensions must satisfy this constraint:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
If all three of 'top', 'height', and 'bottom' are auto, treat 'top' like 'static-position' and apply rule number three below.
If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
Otherwise, pick the one of the following six rules that applies.
- 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
- 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then treat 'top' like 'static-position', set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
- 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
- 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'
- 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
- 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'
[2000-10-24]Section to be replaced by following text, which allows width to be based on content ("shrink to fit"):
The constraint that determines the computed values for these elements is:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
If all three of 'left', 'width', and 'right' are 'auto': if 'direction' is 'ltr' treat 'left' like 'static-position' and apply rule number three below; otherwise, treat 'right' like 'static-position' and apply rule number one below.
If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case 'direction' is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
- 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
- 'left' and 'right' are 'auto' and 'width' is not 'auto', then if 'direction' is 'ltr' treat 'left' like 'static-position', otherwise treat 'right' like 'static-position'. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
- 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
- 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
- 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
- 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'
Calculation of the shrink-to-fit width is similar to computing the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS2 does not define the exact algorithm. Thirdly, compute the available width: this is computed by solving for 'width' after setting 'left' (in case 1) or 'right (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
[1999-11-01] While CSS2 specifies that values of "rect()" specify 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). The Working Group proposes to revise CSS2 to conform to current practice.
[2001-10-03] 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. Therefore the CSS WG proposes to change the initial value to 'separate', in the expectation that it better matches what users expect it to be.