Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 24th of July 2016 03:02:36 AM

10.9. Summary

CSS2 obviously covers a lot of ground, and exploring it in detail would probably have added at least four more chapters to this book, not to mention dramatically bulking up some of the chapters that already exist. However, since so little of CSS2 has actually been implemented at this writing, we felt it was better to provide an overview that was light on details. After all, the specification may change as implementations reveal flaws, and we'd rather stick to describing things that are fairly reliable.

For quick reference purposes, Table 10-1 gives a quick summary of everything new in CSS2.

Table 10-1. New Properties in CSS2

New Properties in CSS2

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

New Pseudo-Classes and Pseudo-Elements in CSS2

:hover
:left
:right
:first
:before
:after

New @-rules in CSS2

@media
@font-face
@page

Table 10-2. New Values in CSS2

All Properties

inherit

The display Property

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

The font Property

In practice, most browsers will not do this. They will instead simply increase the height of the element, as though the value of height had been set to auto. This is permitted under CSS1, which states that browsers can ignore any value of height other than auto if an element is not a replaced element such as an image. Under CSS2, it is possible to set up a situation where scrollbars would be applied to an element such as a

caption
icon
menu
message-box
small-caption
status-bar

The list-style-type Property

decimal-leading-zero
hebrew
georgian
armenian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
lower-greek

The color values

active-border
active-caption
app-workspace
background
button-face
button-highlight
button-text
caption-text
gray-text
highlight
highlight-text
inactive-border
inactive-caption
info-background
info-text
menu
menu-text
scrollbar
three-d-dark-shadow
three-d-face
three-d-highlight
three-d-lightshadow
three-d-shadow
window
window-frame
window-text

The vertical-align Property

length 


Library Navigation Links

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

type2, as shown in Figure 6-8:

IMG.type1 {color: gray; border-style: solid;}
IMG.type2 {border-color: gray; border-style: solid;}
Figure 6-8

Figure 6-8. Setting the border color for images

Border colors, and borders in general, are all discussed in much greater detail in the Chapter 7, "Boxes and Borders".

the image is determined by the viewing area, not the document size.

Figure 6-55

Figure 6-55. Nailing the background in place

When printed, of course, the two are the same, since the display area (the paper) is the same as the document size, at least for that page. In a web browser, though, the viewing area can change as the user resizes the browser's window. This will cause the background's origin image to shift as the window changes size. Figure 6-56 depicts several views of the same document. So in a certain sense the image isn't fixed downward, while negative values move it above the top of its containing block. Similarly, left describes how far to the right (for positive values) or left (for negative values) the outer left edge of the positioned element is from the left edge of its containing block. Another way to look at it is that positive values cause inward offsets, moving the edges toward the center of the containing block, and negative values cause outward offsets.

TIP

width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of thedocument, half as wide as the document's width and overwritingthe first few elements!

In addition, if the document is scrolled, the paragraph will scrollright along with it. This is because the element's containingblock is the BODY element's content area,not the viewport. If you want to position elements so thatcan vary to exactly fit the content. This is sometimes called"shrink-wrapping" thecontent, since it mimics the act of applying shrink-wrap to a box orother product. In the same way the plastic shrink-wrap precisely hugsthe contents of the package, so too does a positionedelement -- given the right styles, of course.

If bottom is set to an actualvalue -- percentage or length -- then the height of thepositioned element is constrained. As a demonstration, let's