Tuesday, February 26, 2008

Differences Between CSS1 and CSS2

There are some really interesting differences between Cascading Style Sheets level 1 and level 2. CSS2 offers many new options for accessibility and use across various user agents. Positioning in CSS2 is more flexible and offers more options to the designer. Automated content allows developers to force the user agent to display specific content elements as well as the layout, look, and feel. Also there is support for special cursors in CSS2 as well as dynamic outlining.

Accessibility and CSS2

Aural style sheets

With CSS2, there are now style properties to define an aural style sheet for your documents. This means, that if a customer comes to your Web page with a screen reader that is CSS2 enabled, you can define how your page will sound. And this isn't just useful for blind customers, with aural CSS your documents can be listened to in automobiles, as auditory documentation for training, entertainment, and even for people who simply can't read.


CSS1 dealt almost solely with "continuous media" - that is, media like Web pages that would run continuously until the end. Paged media, such as paper, slide shows, or transparencies were not handled. But with CSS2, it is possible to define how pages should be displayed or printed. This means that you can specify the size of the page to be printed, add things like crop marks and register marks, or how the page should layout on double- and single-sided printings.

Media Types

CSS2 media types allow you to specify different style rules depending upon how your document is going to be displayed. There are many different types you can specify, including: aural, braille, handheld, screen, print, and tv (plus others).

International Accessibility Features

CSS2 now offers features such as more list styles for international documents, support for bidirectional text, and language-sensitive quotation marks.

There are some differences in the syntax specified in the CSS1 recommendation ([CSS1]), and the one above. Most of these are due to new tokens in CSS2 that didn't exist in CSS1. Others are because the grammar has been rewritten to be more readable. However, there are some incompatible changes, that were felt to be errors in the CSS1 syntax. They are explained below.

  • CSS1 style sheets could only be in 1-byte-per-character encodings, such as ASCII and ISO-8859-1. CSS2 has no such limitation. In practice, there was little difficulty in extrapolating the CSS1 tokenizer, and some UAs have accepted 2-byte encodings.

  • CSS1 only allowed four hex-digits after the backslash (\) to refer to Unicode characters, CSS2 allows six. Furthermore, CSS2 allows a whitespace character to delimit the escape sequence. E.g., according to CSS1, the string "\abcdef" has 3 letters (\abcd, e, and f), according to CSS2 it has only one (\abcdef).

  • The tab character (ASCII 9) was not allowed in strings. However, since strings in CSS1 were only used for font names and for URLs, the only way this can lead to incompatibility between CSS1 and CSS2 is if a style sheet contains a font family that has a tab in its name.

  • Similarly, newlines (escaped with a backslash) were not allowed in strings in CSS1.

  • CSS2 parses a number immediately followed by an identifier as a DIMEN token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)

  • In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped.

Improved Features over CSS1

Font selection

When choosing which font to use, CSS2 offers both the standard "name matching" system that CSS1 uses, plus three other methods for defining fonts. These are: intelligent font matching, where the user agent uses a font that is the closest match to the requested font. Font synthesis, where the user agent creates a font that matches the metrics of the requested font. And font download, where the user agent retrieves a font over the Web.


CSS2 recognizes that there might not be a table element (and related elements) in an XML document - but to display tabular data, it is important to have this as a style. So CSS2 allows you to define any element as a table element (and all the related table elements).


While CSS1 had some aspects of positioning, CSS2 takes it to the next level. Relative and absolute positioning determine their location based on their placement within the document or based on the user agent. But along with absolute positioning is the concept of fixed positioning. This acts as a sort of "watermark" in continuous media. In paged media, an element with fixed position is repeated on every page. This allows you to create frame-like documents or place a signature on every page of a document.


Now you can define how you want your cursor to respond to various actions. For example, you might want the default behavior over a link to be changed over some of the links in your document. With CSS2 you can define how the cursor should look over any element.

There are many other features that are new with CSS2, but these are some of the most exciting ones. There are also elements like text-shadows, new pseudo-classes, the use of system colors, and dynamic outlines. You can find out more about the differences between CSS1 and CSS2 on the W3C Web site.

Changes from CSS1


  • 1 New functionality

  • 2 Updated descriptions

  • 3 Semantic changes from CSS1

This appendix is informative, not normative.
CSS2 builds on CSS1 and all valid CSS1 style sheets are valid CSS2 style sheets. The changes between the CSS1 specification (see [CSS1]) and this specification fall into three groups: new functionality, updated descriptions of CSS1 functionality, and changes to CSS1.

New functionality

In addition to the functionality of CSS1, CSS2 supports:
  • The concept of media types.

  • The 'inherit' value for all properties.

  • Paged media

  • Aural style sheets

  • Several internationalization features, including list numbering styles, support for bidirectional text, and support for language-sensitive quotation marks.

  • An extended font selection mechanism, including intelligent matching, synthesis, and downloadable fonts. Also, the concept of system fonts has been is introduced, and a new property, 'font-size-adjust', has been added.

  • Tables, including new values on 'display' and 'vertical-align'.

  • Relative and absolute positioning, including fixed positioning.

  • New box types (along with block and inline): compact and run-in.

  • The ability to control content overflow, clipping, and visibility in the visual formatting model.

  • The ability to specify minimum and maximum widths and heights in the visual formatting model.

  • An extended selector mechanism, including child selectors, adjacent selectors, and attribute selectors.

  • Generated content, counters and automatic numbering, and markers.

  • Text shadows, through the new 'text-shadow' property.

  • Several new pseudo-classes, :first-child, :hover, :focus, :lang.

  • System colors and fonts.

  • Cursors.

  • Dynamic outlines.

  • Updated descriptions

    The CSS1 specification was short and concise. This specification is much more voluminous and more readable. Much of the additional content describes new functionality, but the description of CSS1 features has also been extended. Except in a few cases described below, the rewritten descriptions do not indicate a change in syntax nor semantics.

    Semantic changes from CSS1

    While all CSS1 style sheets are valid CSS2 style sheets, there are a few cases where the CSS1 style sheet will have a different meaning when interpreted as a CSS2 style sheet. Most changes are due to implementation experience feeding back into the specification, but there are also some error corrections.

    • The meaning of "!important" has been changed. In CSS1, "!important" in an author's style sheet took precedence over one in a user style sheet. This has been reversed in CSS2.

    • In CSS2 color values are clipped with regard to the device gamut, not with regard to the sRGB gamut as in CSS1.

    • CSS1 simply said that 'margin-right' was ignored if the both 'margin-left' and 'width' were set. In CSS2 the choice between relaxing 'margin-right' or 'margin-left' depends on the writing direction.

    • In CSS1, several properties (e.g., 'padding') had values referring to the width of the parent element. This was an error; the value should always refer to the width of a block-level element and this specification reflects this by introducing the term "containing block".

    • The initial value of 'display' is 'inline' in CSS2, not 'block' as in CSS1.

    • In CSS1, the 'clear' property applied to all elements. This was an error, and the property only applies to block-level elements in CSS2.

    • In CSS1, ':link', ':visited' and ':active' were mutually exclusive; in CSS2, ':active' can occur together with ':link' or ':visited'.

    • The suggested scaling factor between adjacent 'font-size' indexes in the table of font sizes has been reduced from 1.5 to 1.2.

    • The computed value, not the actual value, of 'font-size' is inherited.

    • The CSS1 description of 'inside' (for 'list-style-position') allowed the interpretation that the left margin of the text was affected, rather than the position of the bullet. In CSS2 that interpretation is ruled out.

    • Please also consult the normative section on the differences between the CSS1 and CSS2 tokenizer.

    No comments: