Contenu
Certaines propriétés CSS fonctionnent exclusivement avec un média donné (ex. la propriété 'cue-before' pour les agents utilisateurs auditifs). Cependant, il peut arriver qu'une même propriété fasse partie de différentes feuilles de style propres à un média, cette propriété prenant alors des valeurs en fonction de ce média. Par exemple, la propriété 'font-size' peut jouer un rôle aussi bien dans un rendu sur écran que dans une page imprimée. Ces deux médias sont suffisamment dissemblables pour nécessiter des valeurs particulières pour cette même propriété ; le rendu typique d'un document sur un moniteur demande une plus grande taille de police que sur une feuille de papier. L'expérience montre également que les polices sans-serif ont une plus grande lisibilité à l'écran, et inversement, que les polices serif sont plus lisibles sur le papier. Pour ces raisons, il faut pouvoir dire qu'une feuille de style, ou une partie de celle-ci, ne concerne que certains types de médias.
Pour l'instant, on peut adjoindre les feuilles de style appropriées aux médias concernés de deux façons :
@import url("loudvoice.css") aural;
@media print {
/* la feuille de style pour l'impression vient ici */
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Un lien vers le média cible</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>Le corps du document...
</BODY>
</HTML>
La règle @import est définie dans le chapitre sur la cascade.
Une règle @media spécifie les types de médias (séparés par des virgules) d'un jeu de règles (entres des accolades). La construction @media permet d'écrire des règles pour divers médias au sein d'une même feuille de style :
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Un type de média nomme un jeu de propriétés CSS. Un agent utilisateur qui prétend reconnaître un type de média par son nom doit en appliquer toutes les propriétés.
Les noms choisis pour les types de médias CSS rappellent celui des appareils cibles pour lesquels les propriétés sont significatives. Suit la liste des types de médias, les descriptions entre parenthèses ne sont pas normatives. Ces descriptions donnent seulement une indication sur l'appareil auquel le type de média se réfère.
Les noms des types de médias ne sont pas sensibles à la casse.
Comme les technologies évoluent rapidement, CSS2 n'arrête pas une liste définitive des types de médias pouvant être des valeurs pour @media.
Remarque : Des versions ultérieures de CSS pourraient accroître cette liste. Les auteurs ne devraient pas employer de noms de types de médias qui ne sont pas encore définis par la spécification CSS.
Chacune des propriétés CSS définit les types de médias pour lesquels cette propriété doit être implémentée par un agent utilisateur conforme. Les propriétés s'appliquant généralement à plusieurs médias, la partie "Media" dans la définition de chacune d'entre elles en précise les groupes de médias plutôt qu'une liste des divers types individuels. La propriété s'applique ainsi à tous les types de médias concernés, ceux-ci étant représentés par des groupe de médias.
CSS2 définit les groupes de médias suivants :
La table suivante montre les relations entre les groupes de médias et les types de médias :
| Types de médias | Groupes de médias | |||
|---|---|---|---|---|
| continu/paginé | visuel/auditif/tactile | grille/bitmap | interactif/statique | |
| aural | continu | auditif | sans objet | les deux |
| braille | continu | tactile | grille | les deux |
| embossed | paginé | tactile | grille | les deux |
| handheld | les deux | visuel | les deux | les deux |
| paginé | visuel | bitmap | statique | |
| projection | paginé | visuel | bitmap | statique |
| screen | continu | visuel | bitmap | les deux |
| tty | continu | visuel | grille | les deux |
| tv | les deux | visuel, auditif | bitmap | les deux |