June 18, 2000 - The @media Construct | WebReference

June 18, 2000 - The @media Construct

Yehuda Shiran June 18, 2000
The @media Construct
Tips: June 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Now that so many devices can display HTML code, you probably want to customize the way your page looks like on each device. Cascaded Style Sheet (CSS)'s rules can specify the target media for which the rules apply. The types are separated by commas. The @media construct allows style sheet rules for various media in the same style sheet. Here are some examples:

@media print {
    BODY {font-size: 10pt}
  }
@media screen {
    BODY { font-size: 12pt }
  }
@media screen, print {
    BODY { line-height: 1.2 }
  }

A CSS media type names a set of CSS properties. A user agent (such as a wireless device) that claims to support a media type by name must implement all of the properties that apply to that media type. The names chosen for CSS media types reflect target devices for which the relevant properties make sense. Here they are:

Media NameTarget
allSuitable for all devices.

auralIntended for speech synthesizers. See the section on aural style sheets for details.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

handheldIntended for handheld devices (typically small screen, monochrome, limited bandwidth).

printIntended for paged, opaque material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors or print to transparencies.

screenIntended primarily for color computer screens.

ttyIntended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.

tvIntended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive. Due to rapidly changing technologies, CSS2 does not specify a definitive list of media types that may be values for @media. Future versions of CSS may extend this list. Authors should not rely on media type names that are not yet defined by a CSS specification.