What's New in CSS2 (Web Design in a Nutshell, 2nd Edition)

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

17.7.1. 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;}

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

17.7.3. 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.)

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

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

17.7.6. New Values for Existing Properties

The following are the new CSS2 values for existing properties:

all properties: inherit

display: run-in, compact, marker, table, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group

font: caption, icon, menu, message-box, small-caption, status-bar

list-style-type: hebrew, armenian, georgian, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha

<color> values: (These values are used to borrow colors from the user's system setup to be applied within the web document. They are case-insensitive, but use of the capitalization is encouraged for the sake of readability.)

ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightshadow, ThreeDShadow, Window, WindowFrame, WindowText