Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of April 2017 06:21:46 AM

10.8. Media Types and @-rules

Don't get too excited yet. We aren't talking about media types in the sense of things like audio and video authoring. Well, not exactly, anyway. We're talking about creating rules for presentation within various kinds of media. The defined types of media thus far are:

These are all values of @media, one of several new @-rules. Some others are:

10.8.1. Paged Media

Since I just brought up paged media, I should probably mention that there are some new properties that apply to such media. Five of them apply to page breaks and where they appear:


The first two are used to control whether a page break should appear before or after a given element, and the latter two are common desktop publishing terms for the minimum number of lines that can appear at the end or beginning of a page. They mean the same thing in CSS2 as they do in desktop publishing.

page-break-inside (first proposed by this author, as it happens) is used to define whether or not page breaks should be placed inside a given element. For example, you might not want unordered lists to have page breaks inside them. You would then declare UL {page-break-inside: avoid;}. The rendering agent (your printer, for example) would avoid breaking unordered lists whenever possible.

There is also size, which is simply used to define whether a page should be printed in landscape or portrait mode and the length of each axis. If you plan to print your page to a professional printing system, you might want to use marks, which can apply either cross or crop marks to your page. Thus you might declare:

@page {size: 8.5in 11in; margin: 0.5in; marks: cross;}

This will set the pages to be U.S. letter-standard, 8.5 inches wide by 11 inches tall, and place cross marks in the corners of each page.

In addition, there are the new pseudo-classes :left , :right, and :first, all of which are applied only to the @page rule. Thus, you could set different margins for left and right pages in double-sided printing:

@page:left {margin-left: 0.75in; margin-right: 1in;}
@page:right{margin-left: 1in; margin-right: 0.75in;} 

The :first selector applies only to the first page of a document, so that you could give it a larger top margin or a bigger font size:

@page:first {margin-top: 2in; font-size: 150%;}
interesting part will be recreating the way they hang out into the blank space to the left of the column.

If we just give these pictures the style float: left, they'll be completely contained within the column. However, since the first column has a left margin, all we have to do is give images a negative margin-left, like this:

IMG {float: left; margin-left: -2.5em;}

10.8.2. The Spoken Word

To round things out, we'll cover some of the properties in the area of aural style sheets. These are properties that help define how a speaking browser will actually speak the page. This may not be important to many people, but for the visually impaired, these properties are a necessity.

First off, there is voice-family, which is much the same as font-family in its structure: the author can define both a specific voice and a generic voice family. There are several properties controlling the speed at which the page is read (speech-rate), as well as properties for the pitch , pitch-range, stress, richness, and volume of a given voice. There are also properties that let you control how acronyms, punctuation, dates, numerals, and time are spoken. There are ways to specify audio cues, which can be played before, during, or after a given element (such as a hyperlink), ways to insert pauses before or after elements, and even the ability to control the apparent position in space from which a sound comes via the properties azimuth and elevation. With these last two properties, you could define a style sheet where the text is read by a voice "in front of" the user, whereas background music comes from "behind" and audio cues come from "above" the user!

Library Navigation Links

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

top: -5em; bottom: 50%; left: 75%; right: -3em;
Figure 9-3

Figure 9-3. Positioning an element beyond its containing block

Now let's see why leaving out width andheight isn't always a bad thing inpositioning, as well as how declaring them can work to youradvantage.

to a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line in order to more clearly illustrate the principle at work here). This rule first appeared in CSS2, to correct its omission in CSS1.

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high as possible.

Subject to the restrictions introduced by the previous seven rules, of course. Historically, browsers aligned the top of a floated around" it. This is familiar behavior with floated images, butthe same is true if you float a paragraph, for example. In Figure 7-64, we can see this effect (a margin has beenadded to make the situation more clear):

P.aside {float: left; width: 5em; margin: 1em;}
Figure 7-64

Figure 7-64. A floating paragraph

One of the first interesting things tonotice about floated elements is that margins around floated elementsdo not collapse. If you float an image with 20-pixel margins, thereH1 elements to have a top margin of 10 pixels, aright margin of 20 pixels, a bottom margin of 15 pixels, and a leftmargin of 5 pixels, here's all we need:

H1 {margin: 10px 20px 15px 5px; background-color: silver;}

As Figure 7-8 reveals, we have what we wanted. Theorder of the values is obviously important, and follows this pattern:

margin: top right bottom left
Figure 7-8

Figure 7-8. Uneven margins

Here, although the top and bottom margins will stay constant in any situation, the side margins will change based on the width of the browser window. This of course assumes that all H1 elements are the child of the BODY element and that BODY is as wide as the browser window. More properly stated, the side margins of H1 elements will be 10% of the width of the H1's parent element.

Let's revisit that example for a moment: