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
| | | 17.6. Positioning with Style Sheets | | 17.8. Style Sheet Tips and Tricks |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
|
|