Media-Specific Style Sheets

The bulk of this chapter is about writing style sheets for print. Besides computer screens, printers are the most common Web devices. However, there are many other types of Web devices, and part of the motivation for creating style sheets is to ensure that content remains in a form that can be displayed on all devices. For example, by storing text as characters and not as, say, images speech synthesizers can read documents aloud, and your cell-phone screen can show Web pages.

CSS2 groups the different devices into media types and allows you to write different style sheets for each type. For example, here is a style sheet that only has an effect on computer screens:

 @media screen {   BODY { font-size: 12pt }   H1 { font-size: 2em } } 

The @media keyword is followed by the name of a media type. (CSS2 defines nine different media types; see the next section.) Inside the curly brackets that follow is a perfectly normal style sheet. Because it applies only to a certain media type, it is said to be a media-specific style sheet. Note that media-specific style sheets come complete with selectors that have their own curly brackets. Always make sure that the left and right curly brackets are balanced. The left curly bracket should come after the media type name, and the right curly bracket should come after the style rules.

The font-size property is an example of a property that is useful for many different media types, but which may require different values depending on the media type. For example, because legibility is higher on paper, the same text can be read comfortably with a smaller font size:

 @media print {   BODY { font-size: 10pt } /* slightly smaller */   H1 { font-size: 2em } } 

You can have many @media sections in a style sheet, so the two previous examples can be combined:

 @media screen {   BODY { font-size: 12pt } } @media print {   BODY { font-size: 10pt } } H1 { font-size: 2em } 

Because the H1 rule is the same for both media types, it has been taken out of the media-specific parts and it now applies to all media types.

The font-size property used in the previous examples applies to several media types. Other properties are only defined for a certain media type. For example, the speech-volume property only makes sense in an aural style sheet:

 @media speech {   BODY { volume: soft } } 

(Properties for speech synthesizers will be in CSS level 3, which was not yet ready when this book was written.)

Media Types

Screen, print, and speech are three media types defined by CSS2. Here is the complete list:

screen

Scrollable color computer screens.

print

Printers, when printing on paper (as opposed to transparencies). This media type should also be used when the browser does a "print preview."

speech

Speech synthesizers, which read Web documents aloud.

braille

Electronic Braille readers, which "display" characters by making tactile patterns.

embossed

Braille printers, which emboss Braille on paper.

handheld

Handheld devices, which typically have small screens and limited bandwidth.

The following example does not display images on handheld devices. If the style sheet is evaluated in a proxy server, this can save much bandwidth:

 @media handheld {   IMG { display: none } } 

projection

Projected presentations (for example, transparencies or a computer hooked up to a projector). Typically, these presentations have few lines per page and need large font sizes.

The following style sheet sets the font size to be extra large and ensures a page break before every H1 element:

 @media projection {   BODY { font-size: x-large }   H1 { page-break-before: always } } 

tty

Text-based terminals and other devices using a fixed-pitch character grid:

 @media tty {   H1 { margin-below: 1em } } 

Because these devices are based on characters and not pixels, they are not able to display rich styles. Even the otherwise trusted em unit will have difficulties when used horizontally.

tv

Television-based presentations, typically on screens with colors, low resolution, long viewing distance, and limited capabilities for scrolling.

The following example sets colors to be white on black for TV screens:

 @media tv {   BODY {    color: white;    background: black;   } } 

all

This media type is suitable for all devices:

 @media all {   BODY {     line-height: 1.4;   } } 

Media types were not part of CSS1. Therefore, this media type can be used to hide style sheets from older browsers. For example, some early CSS browsers have problems handling declarations on the line-height property. In the previous example, only newer browsers that are aware of media-specific style sheets see the style sheet inside.

Some people would like to have more detailed information about the device. For example, they want to write one style sheet for computer screens with resolutions of 800 x 600, and another for 640 x 480 screens. In general, it is better to design style sheets so that they work on any size screen which means they have a good chance to work on future devices as well but it is indeed possible to add such details to the @media rule. For example:

 @media screen and (max-width: 1023px) {   BODY { margin: 5% } } 

But, this is part of CSS level 3, which, as we said, is still in development at the time of writing, and, therefore, we won't describe these so-called "media queries" in more detail.