This specification defines Cascading Style Sheet, Level 2.
This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other 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". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the CSS working group.
This document has been produced as part of the W3C Style Activity, and is intended as a draft of a proposed recommendation for CSS2.
If you did not get this document directly from the W3C website you may want to check whether you have the latest version of this document by looking at the list of W3C technical reports at <http://www.w3.org/TR/>.
CSS2 builds on CSS1, specified in http://www.w3.org/TR/REC-CSS1-961217. All valid CSS1 stylesheets are valid CSS2 stylesheets.
Please send detailed comments on this document to the editors. We cannot guarantee a personal response but we will try when it is appropriate. Public discussion on CSS features takes place on www-style@w3.org and messages are archived at http://lists.w3.org/Archives/Public/www-style/.
1 About the CSS2 Specification
1.1 How to read the specification
1.2 How the specification is organized
1.3 Acknowledgments
2 Introduction to CSS2
2.1 A brief CSS2 tutorial
2.2 Design principles behind CSS2
3 Definitions and document conventions
3.1 Definitions
3.1.1 Document language
3.1.2 Element
3.1.3 User agent (or UA)
3.1.4 Conforming user
agent
3.1.5 Default style sheet
Where it says: User agents that don't actually use style sheets to specify default rules must behave as if they did. It shouldn't. This requirement, if taken literally, unduly restricts the user agent functionality. User agents should be encouraged to offer functionality by default which exceeds what can be expressed in a document in this language.
4 CSS2 syntax and basic data types
4.1 Syntax
4.1.1 Tokenization
4.1.2 Characters and case
4.1.3 Statements
4.1.4 At-rules
4.1.5 Blocks
4.1.6 Rule sets, declaration blocks, and selectors
4.1.7 Declarations and properties
4.1.8 Comments
4.1.9 More examples
4.2 Values
4.2.1 Integers and numbers
4.2.2 Lengths
Where it says: If a negative length value cannot be supported, it should be converted to the nearest value that can be supported. One needs to be concerned about converting all negative lengths to the same value where there are several used in parallel applications. If possible, some distinction should be sought for classes of content that are formatted differently from one another as cued by these lengths. Question: How should lengths be indicated in the TTY environment? In "em" units?
[Expository -- small] Where it says: Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage refers to. [Expository -- advisory] I would suggest you change "a length unit" to "a length" or some other quantity. Strictly speaking, "a length unit" refers to a text item, not a quantity. It is a term in the language and "a unit length" is a physical quantity that is named by the language term. I would also suggest that you change the "computed value vs. relative value" terminology. Possibilities: computed value --> value [or "actual value"] relative value --> formula [or "value expression"]
[semi-technical and necessary (but incompletely specified)] Dan Connolly kicked up a dust storm on the URI and URN mailing lists that has come down nearly to resolution on the idea that what you need to say here is "URI reference." See draft-fielding-uri-syntax-... And consult Dan.
[Need to discuss] This whole topic would benefit from adopting an object formalism in which to describe the source domain of different document languages and the target domain of different media. Then you develop a method model of the methods employed in mapping from a document graph to a medium-ready graph, and develop syntax for the expression of rules which control the application of these methods and you are done. I don't know how close the formalism used in the DOM work is to coping with this requirement, but what is used here should be made as compatible with that work as is possible.
Where it says: The majority of transfer issues in step 4 lie outside the scope of this specification. However, CSS2 addresses these issues: * What can user agents do when certain system resources are not available (e.g., [25]fonts)? * How do style sheets interact with system resources (e.g., [26]cursors and colors)? * How do style sheet properties assist certain devices (e.g., [27]page orientation for a printer)? These are step 3 issues anyway, not step 4. You don't need to confuse things by acting as though these are transfer issues. They are not. Step 3 populates a structure of objects. There are constraints on these objects which reflect the limitations of the transfer target. To build the step 3 output you have to addressed all fitness-for-intended-use concerns.
This section needs a clear and precise description of the heredity mechanism. Something approximately on the order of
"If an attribute is defined to be inheritable, then the value which this attribute takes in the immediately enclosing context of a document element furnishes a default which becomes the attribute value for the child element if no other value is explicity asserted for the child. Having the child match the selector of a style rule constitutes an explicit assertion of property values, for the purposes of overriding inherited values. [insert forward reference to cascading logic as a see-also]"
You have to explain that values don't inherit automatically, only
by default. Only if the child does nothing to set the value of
this attribute does it get the same value as its parent.
5.4 Rendering objects
What is the background of the tree-order-preserving rule? The target domain is not a tree, in general. [The source domain isn't really, either, but we can start with a data structure constructed on a syntax tree as its framework.] Framesets and audio are target domains with a non-tree topology. For accessibility it would be desirable to be able to reflow the document content (violate the tree order). The explanation in terms of "all nodes generated for the parent" is confusing. Consider presenting it in terms of preservation of subtree relationships: If C is a subtree of P in the document tree, then the image of C is a subtree of the image of P in the generated structure. That is a standard concept -- an order-preserving mapping from a partially ordered space to another partially ordered space.
6 Selectors
6.1 Type selectors
6.2 Grouping
6.3 Attribute selectors
6.3.1 Matching attributes, single values, and multiple values
6.3.2 The class and id attribute in HTML
6.3.3 The class attribute in other document languages: @class
6.3.4 The id attribute
Where it says: Note that in HTML 4.0, the ID attribute is called "ID", but in XML documents it may be called something else. The name of the ID attribute is immaterial for CSS. Don't leave us hanging like that. Either say how one establishes which attribute is to play the ID role in creating items referenceable by #id syntax, or don't talk about it.
Where it says: The sequential selector matches if the element matched by the first selector precedes the element matched by the second selector, and both have the same parent. Why the "both have the same parent" restriction? This seems to me to discourage hierarchical markup such as wrapping an Hn and several P elements in a DIV. Where it says: [Do we need the functionality of /H1 P/, or only that of /H1~P/ and //P/? Also, should /P// and //P// be added?] I suggest that you use the same first(P) syntax here as used in generating headers. I would think one wants last(P) and only(P) as well, if I read the question right. If you don't want to overload your operators you can name these isfirst(P), islast(P) and isonly(P) but I would probably go ahead and overload them. I believe we need to know what variables will be accessible as a result of numbering before finalizing this feature. At least first() could be expressed as [.ord=1] where it is assumed that "ord" represents the place number of this element among its peers in a sequence suitable for numbering. That notation would allow e.g. a gently dithered sequence of images to be used to soften the effect of list bullets. In that case we might still want to add the logical place-numbers "last" and "only" to the legal choices for what to match against the ordinal number.
[need to discuss] The style combining policy is too chaotic. It shows no convincing regularity or smoothness. This is a problem for accessibility, but not a special problem of those with disabilities. It is simply a CSS show-stopper across the board. The control established is too fragmented. It is too likely to generate garbage if one font size is overriden by a selector in a sheet written by someone else, without consideration of the other font sizes used in the same context. I begin to see why Murray was so emphatic that the user should make sweeping assertions (he said globally for all web resources) concerning style resources to be used. Favoring styles of greater specificity is dysfunctional for accessibility. See the recent thread kicked off by Jutta's experiences. Assigning control over properties on the basis of a well constructed class lattice for property classes would be more in line with accessibility needs. If a stylesheet gains control of text effects, it sets all text effects unless it itself indicates a willingness to entertain amendments. That way the relationships between different classes of text would be better preserved. One possible resolution could be that writing a personal style sheet is not what persons with disabilities need to do. They may need to use control via the browser and their environment external to the browser. For example, unload offending fonts. Force the style processor to adapt to this as an unavailable resource.
8 Media types
8.1 Introduction to media types
[Need to discuss] Where it says: Certain CSS properties only make sense for certain media (e.g., the [14]'cue-before' property for aural style sheets). It is ironic. This attribute is a good example of the opposite. Many things that are called by different names in different media don't deserve to be different properties. The "say-before" generic property that Jason has been asking for, the list bullet, and this "cue-before" property can and should be recognized as being the same thing. Actually, headers are an example of "say-before" with regard to the page reference box. Other examples are discussed under audio.
Eventually it should be recognized that the target domains are not disjoint and enjoy multiple heredity. Braille print shares some properties with interactive Braille and a lot with TTY print and laser printing. A VT-100 device or emulation has a scrollable display area but it should probably be classified as TTY and not SCREEN. Suggest that you emphasize pixel-by-pixel control of the display as the distinguishing SCREEN characteristic as opposed to scrollability. There is a whole discussion from the HC review of HTML4 that revolves around the idea that authors will want to develop libraries of style sheets which differ in their target medium by small variations and not just base types.
Please refer to the HC review report for more on the MEDIA issue.
9 The box model
9.1 Introduction to the box model
9.2 Box dimensions
9.3 Margin properties:
'margin-top',
'margin-right',
'margin-bottom',
'margin-left', and
'margin'
Values for <margin-width>
9.4 Padding properties:
'padding-top',
'padding-right',
'padding-bottom',
'padding-left', and
'padding'
9.4.1 Values for <padding-width>
9.5 Border properties
9.5.1 Border width: 'border-top-width', 'border-right-width', 'border-bottom-width',
'border-left-width', and
'border-width'
Values for <border-width>
9.5.2 Border color:
'border-top-color',
'border-right-color',
'border-bottom-color',
'border-left-color', and
'border-color'
9.5.3 Border style:
'border-top-style',
'border-right-style',
'border-bottom-style',
'border-left-style', and
'border-style'
Values for <border-style>
9.6 Example of margins, padding, and borders
10 Visual rendering model
10.1 Introduction to the visual rendering model
10.2 Establishing box positions
10.2.1 Containing blocks
10.2.2 Direction of flow
10.3 Normal flow
10.3.1 Block-level layout
List-item elements
10.3.2 Inline layout
Anonymous text boxes
10.3.3 Dual-mode elements: run-in and compact
10.3.4 Relative positioning
10.3.5 Controlling layout behavior: the 'display' property
[Need to discuss] This property gives show/hide control. Usually in GUI environments, objects have show/hide/minimize states. It would be useful to be able to set objects in a minimized state on initial rendering as a function of the target medium. We should discuss what it would mean to add "minimize" as a display value. Given that one can't reorder the tree, one could go a long way with this display property if it contained a minimize option. It should be possible for an IMG element, for example, to be a block level element and show its ALT text as an inline element under other circumstances.
11 Visual rendering model details
11.1 Box width calculations: the 'width' property
11.1.1 Relationship of width dimensions
11.1.2 Width of floats and replaced elements
11.1.3 Width of absolutely positioned elements
11.1.4 Minimum and maximum widths: 'min-width' and 'max-width'
11.2 Box height calculations: the 'height' property
11.2.1 Height of replaced elements
11.2.2 Height of absolutely positioned elements
11.2.3 Minimum and maximum heights: 'min-height' and 'max-height'
11.2.4 Collapsing margins
11.3 Line height calculations: the 'line-height' and 'vertical-align'
properties
11.4 Floating constraints
11.5 Overflow and clipping
11.5.1 Overflow: the 'overflow' property
11.5.2 Clipping: the 'clip' property
11.6 Visibility: the 'visibility' property
11.7 Dynamic positioning
11.8 Filters
12 Paged media
12.1 Introduction to paged media
12.2 Page breaks
12.2.1 Page break properties: 'page-break-before',
'page-break-after',
'orphans', and
'widows'
12.2.2 Allowed page breaks
12.2.3 Forced page breaks
12.2.4 "Best" page breaks
[Editorial] Where it says: CSS does not define which of the page breaks allowed by (A), (B), or (C) should be used. In particular, CSS does not forbid a UA from I believe that the (A) etc list enumerators are no longer used in the list to which this refers.
13 Colors and Backgrounds
13.1 Foreground color: the 'color' property
[Expository] Where it says: EM { color: red } /* natural language */ The phrase "natural language" is not correct and may mislead some people. Say "name a predefined color" or something along those lines. The term used has to be one of the color names defined in CSS2, not English.
14 Fonts
14.1 Introduction
14.2 Font specification
14.2.1 Font specification properties
14.2.2 Font family: the 'font-family'
14.2.3 Font style: the
'font-style',
'font-variant', and
'font-weight' properties
14.2.4 Font size: the 'font-size' property
14.2.5 Shorthand font property: the 'font' property
14.2.6 Generic font families
serif
sans-serif
cursive
fantasy
monospace
14.3 Font selection
14.3.1 Font Descriptions and @font-face
14.3.2 Descriptors for Selecting a Font:
'font-family',
'font-style',
'font-variant',
'font-weight', and
'font-size'
14.3.3 Descriptors for Font Data Qualification: 'unicode-range'
14.3.4 Descriptor for Numeric Values: 'units-per-em'
14.3.5 Descriptor for Referencing: 'src'
14.3.6 Descriptors for Matching: 'panose-1',
'stemv',
'stemh',
'slope',
'cap-height',
'x-height',
'ascent', and
'descent'
14.3.7 Descriptors for Synthesis: 'widths' and 'definition-src'
14.3.8 Descriptors for Alignment:
'baseline',
'centerline',
'mathline',
and 'topline'
14.4 Font Characteristics
14.4.1 Introducing Font Characteristics
14.4.2 Adorned font name
14.4.3 Central Baseline
14.4.4 Co-ordinate units on the em square
14.4.5 Font encoding tables
14.4.6 Font family name
14.4.7 Glyph Representation widths
14.4.8 Horizontal stem width
14.4.9 Height of capital glyph representations
14.4.10 Height of lowercase glyph representations
14.4.11 Lower Baseline
14.4.12 Mathematical Baseline
14.4.13 Maximal bounding box
14.4.14 Maximum unaccented height
14.4.15 Maximum unaccented depth
14.4.16 Panose-1 number
14.4.17 Range of Unicode characters
14.4.18 Top Baseline
14.4.19 Vertical stem width
14.4.20 Vertical stroke angle
14.5 Font matching algorithm
14.5.1 Examples of font matching
15 Text
15.1 Indentation: the 'text-indent' property
15.2 Alignment: the 'alignment'
property
15.3 Decoration
Where it says: This property describes decorations that are added to the text of an element. If the element has no text (e.g., the IMG element in HTML) or is an empty element (e.g., EM in HTML), this property has no effect. A value of 'blink' causes the text to blink. I don't follow the reference to EM. Is this a typo?
[Need to discuss] It would be desirable, and should be feasible, to define all list functions as applications of more generic capbilities. Note that the bullet reference in list-style could be an instance of say-before. This should allow us to put punctuation around enumerators in list elements, too. Add to pot for generated text. Compare with headers and footers.
17 Tables
17.1 Table layout
17.1.1 Row and column properties: 'column-span', and
'row-span'
17.2 Computing widths and heights
17.3 Placement of the borders
17.4 Conflict resolution for borders
17.5 Properties for columns and rows
17.6 Vertical alignment of cells in a row
17.7 Horizontal alignment of cells in a column
17.8 Table captions: the property
17.9 Generating speech: the 'speak-header-cell' property
17.10 Table implementation notes
18 User interface
18.1 Cursors: the 'cursor' property
18.2 User preferences for colors
18.3 Other rendering issues that depend on user agents
18.3.1 Magnification
19 Aural style sheets
19.1 Aural cascading style sheet properties
19.1.1 Volume properties: 'volume'
19.1.2 Speaking properties: 'speak'
19.1.3 Pause properties: 'pause-before', 'pause-after', and 'pause'
[Need to discuss] All the pause and cue properties can and should be folded together with background and framing properties used in other media. Audio and Braille can beneficially share say-before etc. framing properties defined by text. The layer stack for concurrent audio streams (cue is a background sound, e.g.) should be developed and married with the layer stack logic of the SCREEN environment.
Appendix A: A sample style sheet for HTML 4.0
Appendix B: Changes from CSS1
Appendix C: Implementation and performance
notes
Colors
Gamma Correction
Fonts
Glossary of font terms
Font retrieval
Appendix D: The grammar of CSS2
Appendix E: Aids to Web Fonts implementation
Meaning of the Panose Digits
Deducing Unicode Ranges for TrueType