Ajouter des feuilles de style pour la visualisation sur d'autres périphériques
From Joomla! Documentation
En se servant de feuilles de style CSS, il est possible d'utiliser un ensemble de directives (styles) en fonction du type d'appareil utilisé pour consulter des pages web.
Types de médias
Les types de médias reconnus sont les suivants :
- all - Convient pour tous types d'appareils.
- aural - Pour les synthétiseurs vocaux.
- braille - Conçu pour les dispositifs de retour tactile en braille.
- embossed - Prévu pour les imprimantes en braille.
- handheld - Conçu pour les appareils "de poche".
- print - Utilisé pour la mise en forme de pages imprimées.
- projection - Prévu de projeter des présentations, par exemple les projecteurs - ou les impressions sur transparents.
- screen - Conçu principalement pour les écrans en couleur d'ordinateurs.
- tty - Pour les médias utilisant une grille de caractères à hauteur fixe, tels que les télétypes, des bornes ou des appareils portables avec peu de capacités d'affichage. Il est conseiller de ne pas utiliser les unités de pixels avec le type de média "tty".
- tv - Destiné aux dispositifs télévisuels (basse résolution, couleur, capacité de défilement des écrans limitée, le son est disponible).
Exemples
Vous pouvez attribuer un type de média à une déclaration CSS avec la syntaxe suivante :
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}Pour attribuer plus d'une déclaration de style à plus d'un type de support vous pouvez utiliser :
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}Les directives peuvent être utilisées dans le fichier CSS principal ou dans une feuille de style différente pour un même type de média. Il doit y exister une inclusion du fichier CSS dans le <head> du template (voici par exemple l'inclusion dans le template Beez de Joomla) :
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />La méthode recommandée pour inclure une feuille de style est la suivante :
<?php
$document = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>Ainsi, vous vous assurez que la feuille de style sera bien ajoutée au document et est accessible aux plugins (par exemple pour combiner et compresser les feuilles de style).