22. The @media rule: Tuning for different rendering platforms

22. The `@media` rule: Tuning for different rendering platforms

If you want certain rules to be applied only for certain media types, wrap them in a @media at-rule with this format:

@media type[, ...] { rule ... }

where the @media keyword is followed by a comma-separated list of media types, and the rules inside the curly braces are used only when the content is rendered on one of those media types. See Section 22.1, “Media types”.

For example, these lines would specify 14-point fonts on a screen, 12-point fonts on paper, and brown type on a yellow background in both cases:

@media screen
{ body
  { font-size: 14pt;
  }
}
@media print
{ body
  { font-size: 12pt;
  }
}
@media print, screen
{ body
  { color: brown;
    background-color: yellow;
  }
}

22.1. Media types

Because Web content can be rendered in so many different ways, CSS allows you to define rules that apply only to certain types of media.

CSS defines a set of media types that describe different ways to render content. Examples: screen for a color display, print for printed pages.
CSS also defines several media groups that describe different qualities of each media type. For example, different media may be described as paged or continuous depending on whether they are presented on fixed-size pages, or continuously such as in a Web browser with scrollbars.

Here are the media groups. The keyword “both” is allowed in some groups to mean that either choice applies.

Paged

Is this medium made of fixed-size pages, or is it continuously scrollable? Values are:

paged for fixed-size pages.
continuous for Web browsers and other devices with scrolling capability.

Senses

What senses do users need to perceive this rendering? Values are:

visual for sight.
aural for hearing.
tactile for touch.

Grid

Can this device render individual pixels, or is it restricted to a grid of characters? Example: ancient CRT displays that show only 24 rows of 80 characters. Values are:

grid for devices restricted to a character grid.
bitmap for devices that can render individual pixels.

Interactive

Can this medium change in response to user actions? A screen can, but paper can't. Values are:

interactive
static (non-interactive)

Here is a table showing the current set of media types and the attributes of the various media groups.

Type	Paged	Senses	Grid	Interactive	Example
`aural`	`continuous`	`aural`	`—`	`interactive`	Speech synthesizer.
`braille`	`continuous`	`tactile`	`grid`	`interactive`	A Braille device with tactile feedback.
`embossed`	`paged`	`tactile`	`grid`	`interactive`	A paged Braille printer.
`handheld`	`both`	`visual`	`both`	`interactive`	Handheld devices with small screens, limited resolution, and low bandwidth, such as palmtops.
`print`	`paged`	`visual`	`bitmap`	`static`	Printed documents.
`projection`	`paged`	`visual`	`bitmap`	`static`	A set of overhead projector transparencies.
`screen`	`continuous`	`visual`	`bitmap`	`both`	A color display screen.
`tty`	`continuous`	`visual`	`grid`	`both`	A “dumb terminal.”
`tv`	`both`	`visual/aural`	`bitmap`	`both`	A television with audio.

Styling Web pages with CSS-2