Spécifications CSS


7 Les types de médias

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 ;

    Exemple(s) :

    @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="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
auralcontinuauditifsans objetles deux
braillecontinutactilegrilleles deux
embossedpaginétactilegrilleles deux
handheldles deuxvisuelles deuxles deux
printpaginévisuelbitmapstatique
projectionpaginévisuelbitmapstatique
screencontinuvisuelbitmaples deux
ttycontinuvisuelgrilleles deux
tvles deuxvisuel, auditifbitmaples deux

Document créé le 12/08/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

  1.  W3C : World Wide Web consortium

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

  1. Consulter le document html Langue du document :fr Spécifications CSS : http://www.yoyodesign.org, Les types de médias

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