les media CSS : qu'est-ce que c'est ?

L'un des ambitions des feuilles de styles CSS est la possibilité d'offrir des styles spécifiques selon le media visé, et de faciliter ainsi la réutilisation du même contenu indépendamment du media. Il peut s'agir en théorie :

• D'un media visuel non paginé : écran d'ordinateur, de mobile, d'assistant personnel, écran de télévision, télétypes, etc. Dans ce cas, typiquement, une "fenêtre d'affichage" ne montrent qu'une partie du canevas sur lequel est représenté le document. Un mécanisme de défilement permet de déplacer cette fenêtre sur le canevas ;
• D'un media visuel paginé : projecteur, impression papier traditionnelle, etc. Dans ce cas, le document est découpé visuellement en pages successives.
• D'un media tactile tel les tablettes brailles, l'impression braille....
• D'un media auditif, tel les lecteurs d'écrans et les navigateurs vocaux...
• Des medias restant à inventer, tel le fameux frigidaire intelligent gérant vos emplettes.

Le ou les medias visés par des styles CSS peuvent être spécifiés soit :

• Dans le document HTML à l'aide de l'attribut media de l'élément ou de l'instruction faisant le lien avec la feuille de style ;
• Dans le(s) document(s) CSS, à l'aide de la propriété media d'une règle d'importation de style @import ou d'une règle @media regroupant les déclarations de styles à appliquer pour le media visé.

Dans les deux cas, on utilise les mêmes descripteurs de medias, dont les principaux sont concrètement à l'heure actuelle :

• screen pour l'écran couleur ;
• projection pour les projecteurs et le mode plein écran du navigateur Opera ;
• handheld pour les écrans de petite taille et de résolution réduite des appareils portables, ainsi que le mode Small Screen Rendering (SSR) d'Opera ;
• print pour les medias paginés destinés à l'impression ;
• tv pour le WebTV ;

Concernant le media auditif, une confusion fréquente doit être dissipée :

• CSS2.0 définit le type de media aural, destiné aux navigateurs vocaux, lecteurs d'écrans et plus généralement à l'interaction vocale. Mais ce descripteur de media n'a pratiquement pas été implémenté, tout comme l'ensemble des feuilles de styles auditives CSS2.0, en fait ;
• C'est pourquoi la future spécification CSS2.1 déprécie aural et l'ensemble des styles auditifs CSS2.0, et réserve un nouveau descripteur de media auditif speech, sans en définir plus avant les propriétés ;
• Il reviendra à CSS3.0 de définir plus précisément le media speech CSS3, ainsi que ses propriétés auditives à travers le module CSS Speech.

Concernant l'implémentation actuelle des propriétés CSS auditives, précisons que :

• Les lecteurs d'écran courants tels que Jaws, IBM HPR ou Windows Eyes, destinés à être couplés à un navigateur graphique, ne reconnaissent aucun des deux types de media aural et speech, et n'implémentent aucune propriété CSS2 ou CSS3 auditives. Ils appliquent en fait partiellement les styles screen, de manière problématique ;
• Opera 8.0 implémente certaines propriétés CSS3 speech, ainsi que le descripteur de media speech.

Quelques précisions sur l'utilisation des descripteurs de media :

• Les descripteurs de medias sont indifférents à la casse, en dépit de ce que pourrait laisser supposer une erreur typographique dans la spécification HTML4.01 : media="All" et media="all" sont équivalents ;
• Malgré une erreur de la spécification HTML4.01 à propos de l'attribut media (la valeur par défaut de cet attribut est "screen"), en l'absence de media spécifié, les styles concernés doivent s'appliquer à tous les medias (c'est l'équivalent du media All). C'est explicitement le cas du point de vue CSS (Si le type de média n'est pas précisé, l'import est inconditionnel. De même, si on spécifie le type de média 'all'). D'autre part, les navigateurs graphiques actuels appliquent dans ce cas la feuille de style indifféremment du media de restitution réel (screen, print, projection, handheld). Enfin, ceci est cohérent avec ce que prévoit la future XHTML2.0.

  Notons qu'Opera fait exception pour le media projection (mode d'affichage plein écran) qui ne prend en compte que les styles all et projection, et qui ignorera une feuille de style dépourvue de type de media ;

Ajoutons encore :

• Que les agents utilisateurs actuels ne prennent en compte que les styles correspondant à un seul media, mais qu'ils peuvent offrir alternativement plusieurs modes de rendus correspondant à des medias différents : par exemple, un navigateur graphique (Opera) exploite alternativement les medias screen (affichage à l'écran), projection (affichage en mode plein écran), print (aperçu avant impression), handheld (affichage en mode small screen rendering) ;
• Qu'à l'avenir, de nouveaux descripteurs de medias comme l'éventuel reader pourrait prendre en compte le fait que certains dispositifs d'aides à l'accessibilité restituent en fait simultanéement un document dans plusieurs medias (en l'occurence, screen, speech et braille pour un lecteur d'écran couplé à un navigateur et à un dispositif braille) ;
• Que la future technique des Media Queries permettrait à l'avenir de préciser les types de medias en fonction de caractéristiques plus détaillées, mais en nombre limitées, telles que les dimensions de la zone d'affichage, la résolution d'écran, le nombre de couleurs disponibles, etc. Les Media Queries sont actuellement supportées à titre expérimental par Opera 7+.

Implémentations actuelles des types de media et perspectives d'avenir

Cela dit, dans le Web actuel :

• L'utilisation des CSS screen à destination des navigateurs graphiques ne peut pas faire abstraction des différences considérables de support CSS2 d'un navigateur à un autre. A moins de s'en tenir à une utilisation succinte de CSS1, on ne peut éviter :
  • les procédés masquant les feuilles de styles aux navigateurs anciens dont le support CSS est trop partiel et trop peu conforme à la spécification (navigateurs de génération 4 tel l'historique Netscape 4.7) ;
  • voire également les procédés compensant les bugs et différences d'implémentation CSS des navigateurs plus récents (les très discutés hacks).
• Les CSS print doivent finalement revoir leurs ambitions, les possibilité de contrôle sur le périphérique d'impression étant réduite par les implémentations (Voir ce qu'en retiendra CSS2.1). Pour gérer de manière précise le format de page, l'insertion d'en-tête et de pieds de page, l'orientation, etc., force est bien souvent de se tourner... vers le format PDF ;
• L'utilisation des CSS handheld se heurte à un support souvent défectueux des sélecteurs de media par les multiples navigateurs actuellement utilisés sur les mobiles. Les témoignages recueillis sur ce sujet par Patrick Griffiths sont édifiants : quelque-soit le mode de liaison (@import, link, <?xml-stylesheet?>), ces styles sont ignorés par une partie des navigateurs propres aux constructeurs (Nokia, Motorola, Sony...), par une partie des navigateurs spécifiques tels Openwave ou NetFront, ou même par certaines versions d'Opera pour mobile. Inversement, les styles screen sont parfois pris en compte. Sur le terrain des mobiles, il semble donc que la situation soit des plus confuses !

  Citons à ce propos Karen Stevenson Brown qui considère que Les gens qui accèdent à Internet grâce à un mobile ont les plus grandes chances d'être de ceux qui se mettent à jour et adoptent de meilleurs outils, plus récents. C'est pourquoi je prévois de coder selon les standards, et d'assumer que les mobiles seront très bientôt au rendez-vous. De plus, les mobiles se perdent, se font voler, casser, etc. bien plus vite que les ordinateurs de bureau. Cela signifie heureusement que nous aurons sous peu des gens utilisant des mobiles plus récents, et que nous pouvons espérer que ceux-ci auront un meilleur support CSS ? A chacun de se déterminer... (Rappelons qu'il est très souvent impossible de procéder à la mise à jour du navigateur installé sur un mobile, ou à l'installation d'un autre navigateur.)

L'avenir des contenus indépendants du media réside en fait à la fois dans la différenciation des feuilles de styles par media et dans les procédés d'adaptation du contenu côté serveur et côté client (Opera et ERA) :

• L'accès aux contenus Web sur les mobiles, par exemple, tient moins à leur présentation (contraste des couleurs, taille des caractères, multi-colonnage, etc) qu'à la nature du contenu lui-même (compacité du code économisant la bande passante, dimensions et poids réels des images, non support des frames, difficultés rencontrées avec Flash et autres objets faisant appels aux plugins, difficultés rencontrées avec le javascript et les pages dynamiques, etc). On se reportera ave profit aux normes de structuration propres à ce media : XHTML basic et sa variante XHTML Mobile Profile ;
• Au-delà du seul domaine des mobiles, l'interaction vocale avec XHTML Voice est encore davantage affaire de format de contenu que de format de présentation.
• Il en est de même d'XHTML-Print / CSS Print pour l'impression sur des périphériques aux capacités limitées.

La clé de l'indépendance du contenu par rapport au media serait finalement plutôt à cherche dans la voie ouverte par les futurs Composite Capability/Preference Profiles (CC/PP) qui permettraient de délivrer un contenu adapté en réponse aux capacités du dispositif d'accès et aux préférences de l'utilisateur.

Faut-il être attentif aux medias CSS aujourd'hui ? Il est certes possible de se contenter de feuilles de styles génériques, sans media ou visant le media all. De nombreux auteurs se cantonnent ainsi à des styles conçu pour l'écran screen, adressés indifféremment à tous les medias. Une simple CSS print est déjà souvent considérée comme un gadget. Les CSS handheld sont pratiquement ignorées.

Cependant :

• Ces styles génériques seront prises en compte avec plus ou moins de bonheur selon le media final (impression ou affichage tronqués, scroll horizontal sur un petit écran, ou à l'inverse page en timbre-poste dans un coin de l'affichage sur un écran de haute résolution, contrastes de couleur insuffisants sur un écran de faibles capacités, etc.) Sans suffir à résoudre toutes ces difficultés, la différenciation des styles par media permet d'ors et déjà de "limiter la casse" et d'améliorer notablement l'expérience utilisateur ;
• Sans distinction des medias, l'utilisateur va fréquemment télécharger une quantité non négligeable d'informations inutiles car inexploitable sur son dispositif d'accès ;
• S'en tenir à une perception traditionnellement "desktop-écran" de l'accès au Web risque de devenir un pari très restrictif dans un proche avenir. La qualité d'accès "alternatif" (mobile, interaction vocale, impression, accessibilité) à tout ou partie de l'information diffusée par votre site a de grandes chances de devenir un critère de qualité (et de marketing) inévitable.

La discrimination des styles selon les medias semble donc bien être le premier pas nécessaire (à moindre coût) pour offrir dès aujourd'hui une meilleure expérience de navigation sur un site et élargir son audience potentielle. D'autant, qu'elle n'est aucunement incompatible avec une gestion mutualisée des différents styles, grâce à la combinaison des CSS permanentes et du media all.

Exemples d'utilisation des descripteurs de media selon les modes de liaisons des CSS

Les valeurs des descripteurs de media et leur syntaxe sont identiques pour :

• L'attribut media de l'élément (X)HTML link.

  Exemples :

  <link rel="stylesheet" type="text/css" href="general.css" media="all" >
  <link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection" >
  <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" >
  <link rel="stylesheet" type="text/css" href="impression.css" media="print" > 
  

• L'attribut media de l'élément (X)HTML style

  Exemple :

  <style type="text/css" media="all">...</style>
  <style type="text/css" media="screen, projection">...</style>
  <style type="text/css" media="handheld">...</style>
  <style type="text/css" media="print">...</style>
  

• L'attribut media de l'instruction XML <?xml-stylesheet?>

  Exemple :

  <?xml-stylesheet type="text/css" href="general.css" media="all"?>
  <?xml-stylesheet type="text/css" href="ecran.css" media="screen, projection" ?>
  <?xml-stylesheet type="text/css" href="mobile.css" media="handheld" ?>
  <?xml-stylesheet type="text/css" href="impression.css" media="print" ?>
  

• La valeur de la règle CSS @import placée dans un élément style ou dans une feuille externe.

  Exemple :

  @import url(general.css) all;
  @import url(ecran.css) screen, projection;
  @import url(mobile.css) handheld;
  @import url(impression.css) print;
  

• La valeur de la règle CSS @media placée dans un élément style ou dans une feuille externe.

  Exemple :

  @media all {...}
  @media screen, projection {...}
  @media handheld {...}
  @media print {...}
  

Comme on le voit dans les exemples ci-dessus, il est possible de spécifier aussi bien un media unique qu'une liste libre de types de media séparés alors par une virgule (l'espace utilisé ici est optionnel).