CSS Design and style... the possibilitiesCSS Design and style... the possibilities

CSS Media Types

Media Types

CSS Media Types are methods of providing CSS to the differing types of well, media! The W3 schools link above shows the different media types and also that there is an @import method which can be used all within a single stylesheet, however this method is not yet widely supported.

Example:

@media screen { 
   p {font-size: 14px;} 
   h1 {more rules..;} 
}
@media print {
   p {font-size: 12pt;} 
   h1 {more rules..;} 
}

You can also use the @import method with a specified media following it, but again it's not yet fully supported.

Example:

 
@import "mystyle.css" screen; 
@import "myprintstyles.css" print;

So using separate stylesheets and declaring the media type in the <link> element or <style> element is probably still the safest.

Example:

 
<link rel="stylesheet" type="text/css" 
 href="myprintstyles.css" media="print">

<style type="text/css" media="screen">
   @import "mystyles.css"; 
</style>

not ideal, but better than nothing?

There are many Recognized Media Types, and even though device support for them could be better, the future should allow us great flexibility.

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the "Media" field in the description of each property is informative.

  • all - Suitable for all devices.
  • braille - Intended for braille tactile feedback devices.
  • embossed - Intended for paged braille printers.
  • handheld - Intended for handheld devices (typically small screen, limited bandwidth).
  • print - Intended for paged material and for documents viewed on screen in print preview mode.
  • projection - Intended for projected presentations, for example projectors.
  • screen - Intended primarily for color computer screens.
  • speech - Intended for speech synthesizers.
  • tty - Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
  • tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

But for now e.g. applying a computer screen design to all of them may be less than practical at this stage. Would it be better if a PDA (small screen rendering device) got plain unstyled text instead of trying to force an 800px horizontal width on it? It might have to be so until support of @media handheld gets better.


Resources:

Updates:

«« Previous Page | Crib Sheet Index»»