| Suivant > |
|---|
Introduction aux types de médias
Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir spécifier comment représenter un document pour différents médias : un écran, une feuille de papier, un synthétiseur de parole, un appareil braille, etc.
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.
La spécification des feuilles de style en fonction du média
Pour l'instant, on peut adjoindre les feuilles de style appropriées aux médias concernés de deux façons :
- En spécifiant le média visé dans la feuille de style au travers des règles-at @media ou @import ;
@import url('/loudvoice.css') aural; - En spécifiant le média visé dans le langage du document. Par exemple avec HTML 4.0 ([HTML40]), on utilise l'attribut "media" de l'élément LINK pour attacher une feuille de style externe à un média donné :
<!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.
La règle @media
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 }
}
Les types de médias reconnus
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.
- all
- convient pour tous les appareils ;
- aural
- destiné aux synthétiseurs de parole. Voir les détails fournis dans le chapitre sur les feuilles de style auditives ;
- braille
- destiné aux appareils braille à retour tactile ;
- embossed
- destiné aux appareils à impression braille ;
- handheld
- destiné aux appareils portatifs (typiquement ceux avec petits écrans, monochromes et à bande passante limitée) ;
- destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression. Consulter le chapitre sur les médias paginés pour des informations sur les questions de mise en forme spécifiques à ceux-ci ;
- projection
- destiné aux présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents. Consulter le chapitre sur les médias paginés pour des informations sur les questions spécifiques à ceux-ci ;
- screen
- destiné principalement aux moniteurs couleurs ;
- tty
- destiné aux médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites. Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média ;
- tv
- destiné aux appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).
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.
Les groupes de médias
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 :
- continu ou paginé. Quand il est écrit "les deux", cela signifie que la propriété s'applique aux deux groupes de médias ;
- visuel, auditif ou tactile ;
- grille (pour les appareils avec grille de caractères) ou bitmap. Quand il est écrit "les deux", cela signifie que cette propriété s'applique aux deux groupes de médias ; groups.
- interactif (pour les appareils qui interagissent avec l'utilisateur) ou statique (à l'inverse, pour ceux qui n'interagissent pas avec celui-ci). Quand il est écrit "les deux", cela signifie que la propriété s'applique aux deux groupes de médias ;
- all (comprend tous les types de médias).
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 |
