Difference between revisions of "Adding stylesheets for other output devices"
From Joomla! Documentation
m (removing category stubs, sporatic use and other categories more descriptive in use) |
AlexSmirnov (talk | contribs) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | <noinclude><languages /></noinclude> | |
| − | + | <translate> | |
| + | <!--T:1--> | ||
| + | Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages. | ||
| + | </translate> | ||
| + | <translate>===Media Types=== <!--T:2--></translate> | ||
| + | <translate><!--T:3--> | ||
The recognised media types are: | The recognised media types are: | ||
| − | |||
*all - Suitable for all devices. | *all - Suitable for all devices. | ||
*aural - For speech synthesizers. | *aural - For speech synthesizers. | ||
| − | *braille - Intended for braille tactile feedback devices. | + | *braille - Intended for braille tactile feedback devices.</translate> |
| − | *embossed -Intended for paged braille printers. | + | <translate><!--T:4--> |
| + | *embossed - Intended for paged braille printers. | ||
*handheld - Intended for handheld devices. | *handheld - Intended for handheld devices. | ||
*print - Used for formatting printed pages. | *print - Used for formatting printed pages. | ||
*projection - Intended for projected presentations, for example projectors or print to transparencies. | *projection - Intended for projected presentations, for example projectors or print to transparencies. | ||
| − | *screen - Intended primarily for color computer screens. | + | *screen - Intended primarily for color computer screens.</translate> |
| + | <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" media type. | *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). | + | *tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate> |
| − | You can assign a media type to a CSS declaration with the following syntax | + | <translate>===Examples=== <!--T:6--> |
| + | You can assign a media type to a CSS declaration with the following syntax</translate> | ||
| − | < | + | <source lang="css"> |
@media print { | @media print { | ||
| − | + | body { | |
| + | font-size: 12pt; | ||
| + | font-color: #000000; | ||
} | } | ||
| − | </ | + | } |
| + | </source> | ||
| − | To assign | + | <translate><!--T:7--> |
| + | To assign more than one declaration style to more than one media type:</translate> | ||
| − | < | + | <source lang="css"> |
| − | @media print handheld{ | + | @media print, handheld{ |
| − | + | body { | |
| + | font-size: 12pt; | ||
| + | font-color: #000000; | ||
| + | } | ||
| + | img { | ||
| + | max-width: 100%; | ||
| + | height: auto; | ||
} | } | ||
| − | </ | + | } |
| + | </source> | ||
| − | + | <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 following is taken from the Joomla! Beez template):</translate> | ||
| − | < | + | <source lang="html4strict"> |
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" /> | <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" /> | ||
| − | </ | + | </source> |
| + | <noinclude> | ||
| + | <translate> | ||
| + | <!--T:9--> | ||
[[Category:Tutorials]] | [[Category:Tutorials]] | ||
[[Category:Templates]] | [[Category:Templates]] | ||
| + | [[Category:CSS]] | ||
| + | </translate> | ||
| + | </noinclude> | ||
Revision as of 18:01, 6 August 2015
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[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 (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" />