Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 04th of August 2015 09:54:00 PM

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: Setting width and height

If you want to give your positioned element a specific width, then the obvious property to turn to is width. Similarly, height will let you declare a specific height for a positioned element.



  • screen, as in a computer screen

  • print, for things like printouts and print-preview displays

  • projection, for projected presentations such as slide shows

  • braille and embossed, for tactile feedback devices and printers

  • aural, for speech generators

  • tv, for television-type displays (think WebTV)

  • tty, for fixed-width character displays

  • handheld , for palmtop computers

  • the ubiquitous all

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

  • @font-face, which is used in the definition of a font by manual means

  • @import, which has more power than under CSS1 by allowing authors to associate media types with @import statements; for example, @import (print.css) print;

  • @page, which allows you to define the styles of a page when using paged-media style sheets; for example, @page {size: 8.5in 11in;}

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%;}

Library Navigation Links

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

H2 {margin: 14px 5em 0.1in 3ex;}  /* value variety! */

Figure 7-9 shows us, with a little extraannotation, the results of this declaration.

Figure 7-9

Figure 7-9. Mixed-value margins

7.3.2. Percentages and Margins

As stated earlier, it's possible toset percentage values for the margins of an element. Percentages aredifference between EM and I:

P {font-style: normal;}
EM {font-style: oblique;}
I {font-style: italic;}

If you look closely at Figure 5-26, you'll see there is no apparent difference between the EM and I elements. In practice, not every font is so sophisticated as to have both an italic face and an oblique face, and even fewer web browsers are sophisticated enough to tell theDTDs are a simple way to make sure that 2 or more XML documents are of the same "type". Its a very limited approach to making "typed" XML documents shareable across systems. In the future some kind of schema system will be proposed by the W3C that should allow typing, instantiation and inheritance of information (in XML).

XML enables interoperability

All of the advantages of XML outlined so far all make interoperability possible. This is one of the most important requirements for XML, to enable disparate systems to be able to share information easily.

By taking the lowest common denominator approach, by being web enabled, protocol independent, network independent, platform independent and extensible, XML makes it possible for new systems and old systems (that are all different) to communicate with each other. Encoding information in plain text with tags is better than using propietary and platform dependent binary formats.

Vision Negative margins and floating

Negativity, of course, always complicatesthe situation. Let's consider an image that is floated to theleft and has left and top margins of -15px . Thisimage is placed inside a DIV that has no padding,borders, or margins. The result will be as shown in Figure 7-70.

Figure 7-70

Figure 7-70. A floating image with negative top and left margins

The math in this situation works out something like this: assume thetop inner edge of the DIV is at the pixel position

Figure 8-37

Figure 8-37. Given the other constraints, go as high as possible


Unfortunately, since there is no precise definition meaning for "as high as possible" (which could be, and in fact has been, argued to mean "as high as conveniently possible"), you cannot rely on consistent behavior even among browsers that are considered CSS1-compliant. Most browsers will follow historical practice and float the image down into the next line, but a few -- Opera 3.6, for one -- will float the image into the