demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Media types

One of the significant advantages of CSS is that we can create different style rules to represent our content in different formats, on different devices, or for different users: for example, the display of a web page on a cellphone should be different from that on a 27″ monitor which will be different again from the printed version of that page.

If no media value is specified, style rules are assumed by the browser to apply to every media format and device, at least within reason: handheld devices, such as iPhones, will attempt to scale the web page down, and browsers will usually reverse colors if you are trying to print out a page with a black background and white text to save ink. However, we can be much more precise by specifying different style rules for different devices through different media values:

all (the default), screen (for computer monitors), braille (for braille tactile feedback devices), embossed (for braille printers), handheld (for handheld internet devices such as iPhones and tablets), print, projection, speech (for text-to-speech synthesisers), tty (for teletype terminals), and tv.

Under CSS 1 & 2, different style sheets are created for different media types, and linked to separately:

  1. <link rel="stylesheet" href="styles.css" type="text/css" media=“all” />
  2. <link rel="stylesheet" href="styles_p.css" type="text/css" media=“print” />

Style rules may also be specified to apply to multiple formats at the same time:

  1. <style type=“text/css” media=“screen, handheld” >
  2. </style>

Under CSS3, no separate documents need to be written: styles for other media are added to the stylesheet itself by the use of media queries:

  1. /* styles that apply to everything here */
  2. @media print {
  3. /* styles that are applicable only to print here */
  4. }

It is important to note that a stylesheet defined as all, or with no media definition, will apply to all devices and media types; stylesheets defined after this point for print, etc will be used in addition to the first stylesheet: they do not have to repeat rules already present.

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.