Adding stylesheets for other output devices
From Joomla! Documentation
This document is out of date! Do not use it. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media
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[edit]
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[edit]
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).