Adding stylesheets for other output devices

This page contains changes which are not marked for translation.

Languages:

English

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.

Media Types

The recognised media types are:

all - Suitable for all devices.
aural - For speech synthesizers.
braille - Intended for braille tactile feedback devices.
embossed -Intended for paged braille printers.
handheld - Intended for handheld devices.
print - Used for formatting printed pages.
projection - Intended for projected presentations, for example projectors or print to transparencies.
screen - Intended primarily for color computer screens.
tty - Intended 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.
tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Examples

You can assign a media type to a CSS declaration with the following syntax

@media print {
  body { 
    font-size: 12pt;
    font-color: #000000; 
  }
}

To assign more than one declaration style to more than one media type:

@media print, handheld{
  body { 
    font-size: 12pt;
    font-color: #000000;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />