A Complete Guide to Web Design

422 Chapter 23 – Cascading Style Sheets

What’s New in CSS2

Web Design in a Nutshell, eMatter Edition

This is different fromdisplay:none(another method for hiding elements) in that

thedisplayproperty closes up the space once occupied by the element. The

other difference is thatdisplay:noneonly works on block-level items, where

visibility:hidden can be used on inline elements.

Overflow

Another new property first proposed in the Positioning Specification isoverflow,

which provides alternative ways for handling text that does not fit in the box

dimensions as specified. It has four possible attributes:visible, which just resizes

the bounding box so the whole element can be viewed;hidden, which hides

from view the portion of the element that does not fit in the box;scroll, which

places a scroll bar in the box so the user can scroll down to read its contents, and

auto, which places a scroll bar only when necessary.

Figure 23-8 shows the effects of different overflow settings on a text element spec-

ified at 200×100 pixels (visible,hidden, andscroll, respectively).

What’s New in CSS2

As of this writing, the current specification published by the W3C is Cascading

Style Sheets, Level 2 (http://www.w3.org/TR/REC-CSS2/). CSS2 expands signifi-

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

Figure 23-8: Box resizes to fit text when overflow is set to visible

P { position: absolute;

width: 200px;

height: 100px;

overflow: hidden; }

P { position: absolute;

width: 200px;

height: 100px;

overflow: visible; }

P { position: absolute;

width: 200px;

height: 100px;

overflow: scroll; }