W3CWD-CSS2-971104

CSS2 Specification

W3C Working Draft 04-November-1997

Abstract

This specification defines Cascading Style Sheet, Level 2.

Status of this document

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.

Editors

Comments

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

Table of Contents

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.


3.2 Conventions
   3.2.1 Document language elements and attributes
   3.2.2 CSS property definitions
   3.2.3 HTML conventions

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?


   4.2.3 Percentages
[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"]


   4.2.4 URLs
[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.

   4.2.5 Colors
   4.2.6 Angles
   4.2.7 Time
   4.2.8 Frequencies
4.3 CSS embedded in HTML
4.4 CSS as a stand-alone file
4.5 Character escapes in CSS

5 CSS2 processing model


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


5.1 Introduction to the CSS2 processing model

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.


5.2 The document tree
5.3 Inheritance

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. 


6.4 Contextual selectors
6.5 Parent-child selectors
6.6 Sequential selectors

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.


6.7 Pseudo-elements and pseudo-classes
   6.7.1 The :first-line pseudo-element
   6.7.2 The :first-letter pseudo-element
   6.7.3 Overlapping pseudo-elements
   6.7.4 Pseudo-elements with contextual selectors
   6.7.5 Anchor pseudo-classes: :link, :active, and :visited
   6.7.6 Combining pseudo-elements with normal classes
   6.7.7 Colliding attribute selectors and pseudo-classes

7 Cascade
7.1 Cascading order


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


   7.1.1 'Important' rules
   7.1.2 Cascading order in HTML
   7.1.3 Precedence of non-CSS presentational hints

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.

8.2 Specifying media-dependent style sheets
   8.2.1 The @media rule
   8.2.2 The media-dependent @import rule
8.3 Recognized media types

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.


   8.3.1 The canvas
      Scrollable media

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. 


10.4 Floats: 'float' and 'clear'
   10.4.1 Controlling floats
10.5 Absolute positioning
   10.5.1 Properties to specify position: 'top', 'right', 'bottom', 'left'
   10.5.2 Fixed positioning
10.6 Comparison of normal, relative, floating, absolute positioning
   10.6.1 Normal flow
   10.6.2 Relative positioning
   10.6.3 Floating a box
   10.6.4 Absolute positioning
10.7 Z-order: Layered presentation
   10.7.1 Specifying the stack level: the 'z-index' property
10.8 Multicolumn layout

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.


12.3 Page boxes: the @page rule
   12.3.1 Page margins
   12.3.2 Page size: the 'size' property
      Rendering page boxes that do not fit a target sheet
   12.3.3 Crop marks: the 'marks property
   12.3.4 Left and right pages
   12.3.5 Running headers and footers
   12.3.6 Marking elements for the running headers & footers
   12.3.7 Content outside the page box
12.4 Cascading in the page context

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.


13.2 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

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?


   15.3.1 Underlining, over lining, striking, and blinking: the 'text-decoration' property
   15.3.2 Text shadows: the 'text-shadow' property
15.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties
15.5 Case
   15.5.1 Capitalization: the 'text-transform' property
   15.5.2 Special first letter/first line
15.6 White space: the 'white-space' property
15.7 Generated text
15.8 Automatic numbering
15.9 Text in HTML
   15.9.1 Forcing a line break

16 Lists


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



16.1 Visual formatting of lists
   16.1.1 List properties: 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style'

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


   19.1.4 Cue properties: 'cue-before', 'cue-after', and 'cue'
   19.1.5 Mixing properties: 'play-during'
   19.1.6 Spatial properties: 'azimuth' and 'elevation'
   19.1.7 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', 'richness', 'speak-punctuation', 'speak-date', 'speak-numeral', and 'speak-time'

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

References
Normative references
Informative references

Index