Adding stylesheets for other output devices

This page contains changes which are not marked for translation.

Warning!

Using cascading style sheets (CSS), 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:

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

The recommended way to include a style sheet is:

<?php
$document = JFactory::getDocument();
 $tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>

This way, you ensure the style sheet will be added to the document and is accessible to plugins (e.g for combining and compressing style sheets).

Adding stylesheets for other output devices

From Joomla! Documentation

Media Types

Examples