What's New in CSS2

The CSS Level 2 (http://www.w3.org/TR/REC-CSS2) specification expands significantly on the work done in CSS1. Not surprisingly, it includes dozens of new properties (and pseudo-elements) and a fair number of additional values for existing properties (see the following tables).

CSS2 incorporates and refines the set of properties used for positioning to give designers more control over page layout and DHTML authors the ability to create dynamic motion effects.

It provides more controls over traditional typesetting elements such as widows, orphans, and page breaks. This shows that style sheets are being developed with a mind to developing documents for both HTML display and print output.

CSS2 also introduces properties that give additional control over table element presentation.

As part of the W3C's efforts to make web pages accessible to all users, the latest style sheet specification includes a number of new properties that pertain to the nonvisual display of web pages. These new attributes provide controls for speech-delivery and sound controls.

The following list of new CSS2 elements was compiled and graciously contributed to this tutorial by CSS guru Eric Meyer. It reflects the state of the final CSS2 specification, which was made a W3C Recommendation in May 1998. Unfortunately, as of this writing, no browsers are supporting CSS2 in its entirety, and no promises have been made on when that day will come.

New Selectors

The following table lists the new CSS2 selectors.

Selector Description
* Matches any element.

Example: 

*{font-family:serif;}


A>B Matches any element B that is a child of any element A.

Example: 

DIV.main>P{line-height:1.5;}


A+B Matches any element B that immediately follows any element A. Example: 

P+UL{margin-top:0;}


A[att] Matches any element A that has the given attribute defined, whatever its value.

Example: 

TABLE[border]{background-color:white;}


A[att="val"] Matches any element B that has the specified attribute set to the specified value.

Example: 

TABLE[border="3"]{background-color:yellow;}


A[att~="val"] Matches any element B that has the specified value as one of the values in a list given to the specified attribute.

Example: 

TABLE[class~="example"]{background-color:orange;}


A[lang|="val"] Matches any element A that has the given value as one of the values for the lang attribute.

Example: 

P[lang|="en"]{text-align:left;}


New Properties

The following are the new CSS2 properties:

text-shadow top table-layout
font-size-adjust right border-spacing
font-stretch bottom empty-cells
unicode-bidi left caption-side
z-index speak-header-cell
cursor
outline min-width volume
outline-color max-width speak
outline-style min-height pause-before
outline-width max-height pause-after
overflow pause
content clip cue-before
quotes visibility cue-after
counter-reset cue
counter-increment page play-during
marker-offset page-break-before azimuth
page-break-after elevation
border-top-color page-break-inside speech-rate
border-right-color orphans voice-family
border-bottom-color widows pitch
border-left-color size pitch-range
border-top-style marks stress
border-right-style richness
border-bottom-style row-span speak-punctuation
border-left-style column-span speak-date
border-collapse speak-numeral
position border-spacing speak-time
direction

Font Descriptors

The following new CSS2 font descriptors (properties) are used to identify particular font properties for downloading, font matching, or alignment:

unicode-range slope bbox
units-per-em cap-height definition-src
src x-height baseline
panose-1 ascent centerline
stemv descent mathline
stemh widths topline

(Note that these properties are used only for font matching and description; most authors will not need to use them.)

New Pseudo-Selectors

Pseudo-selectors allow the author to assign styles to structures that don't necessarily exist in the document, or to things that are inferred by the state of certain elements or the document itself. The following are the new CSS2 pseudo-selectors:

Pseudo-selector Description
:after Inserts generated content after an element's content
:before Inserts generated content before an element's content
:first Applies a style to the first page of a document
:first-child Matches an element that is the first child of some other element
:focus Applies a style while an element is "in focus"
:hover Applies a style when the curser hovers over an element
:lang Matches an element based on its language
:left Applies a style to left-hand pages
:right Applies a style to right-hand pages

New "at-rules"

The following are the new CSS2 functions:

Pseudo-selector Description
@charset Specifies the name of a character encoding (e.g., "ISO-8859-1")
@font-face Specifies values for every font descriptor, either implicitly or explicitly
@media Specifies the media for which the style applies
@page Specifies the dimensions, orientation, margins, etc., of a page box when using paged-media style sheets

New Values for Existing Properties

The following are the new CSS2 values for existing properties: