start page | rating of books | rating of authors | reviews | copyrights

Book HomeWeb Design in a NutshellSearch this book

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



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.