Adding stylesheets for other output devices: Difference between revisions
From Joomla! Documentation
Marked this version for translation |
m Added warning: out of date message |
||
| (One intermediate revision by one other user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude><languages /></noinclude> | <noinclude><languages /></noinclude> | ||
{{warning|This document is out of date! Do not use it. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media}} | |||
<translate> | <translate> | ||
<!--T:1--> | <!--T:1--> | ||
Using | 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. | ||
</translate> | </translate> | ||
| Line 18: | Line 19: | ||
*screen - Intended primarily for color computer screens.</translate> | *screen - Intended primarily for color computer screens.</translate> | ||
<translate><!--T:5--> | <translate><!--T:5--> | ||
*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 - 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).</translate> | *tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate> | ||
| Line 24: | Line 25: | ||
You can assign a media type to a CSS declaration with the following syntax</translate> | You can assign a media type to a CSS declaration with the following syntax</translate> | ||
< | <syntaxhighlight lang="css"> | ||
@media print { | @media print { | ||
body { | body { | ||
| Line 31: | Line 32: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
<translate><!--T:7--> | <translate><!--T:7--> | ||
To assign more than one declaration style to more than one media type:</translate> | To assign more than one declaration style to more than one media type:</translate> | ||
< | <syntaxhighlight lang="css"> | ||
@media print, handheld{ | @media print, handheld{ | ||
body { | body { | ||
| Line 47: | Line 48: | ||
} | } | ||
} | } | ||
</ | </syntaxhighlight> | ||
<translate><!--T:8--> | <translate><!--T:8--> | ||
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 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:</translate> | ||
< | <syntaxhighlight lang="html4strict"> | ||
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print. | <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" media="print" /> | ||
</ | </syntaxhighlight> | ||
<translate><!--T:10--> | <translate><!--T:10--> | ||
The recommended way to include a | The recommended way to include a style sheet is:</translate> | ||
< | <syntaxhighlight lang="php"> | ||
<?php | <?php | ||
$document = JFactory::getDocument(); | $document = JFactory::getDocument(); | ||
| Line 64: | Line 65: | ||
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media | $document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media | ||
?> | ?> | ||
</ | </syntaxhighlight> | ||
<translate><!--T:11--> | <translate><!--T:11--> | ||
This way, you ensure the | 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).</translate> | ||
<noinclude> | <noinclude> | ||
Latest revision as of 17:39, 17 October 2022
Warning!
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
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).