7 Les types de médias

Contenu

7.1 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.

7.2 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;
@media print {
  /* la feuille de style pour l'impression vient ici */
}

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="https://www.gaudry.be/css-rf-foo.css">
   </HEAD>
   <BODY>
      <P>Le corps du document...
   </BODY>
</HTML>

La règle @import est définie dans le chapitre sur la cascade.

7.2.1 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 }
  }

7.3 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) ;
print: 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.

7.3.1 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 :

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
print	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

Version en cache

21/11/2024 23:38:57 Cette version de la page est en cache (à la date du 21/11/2024 23:38:57) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 04/02/2006, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/css-rf-/media.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

↑ W3C : World Wide Web consortium
↑ Avertissement Légal : Bien que repectant de trè près le document original, cette traduction n'est pas une version française agréée par le W3C

Table des matières Haut

Références

Spécifications CSS : http://www.yoyodesign.org

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.

Table des matières Haut