En CSS2

CSS2 permet déjà de définir des règles de style en fonction du type de média. Dix types de périphériques sont définies: all pour les règles applicables à tous, aural pour les synthétiseurs vocaux, braille pour les lecteurs tactiles en braille, embossed pour les imprimantes brailles, handheld pour les périphériques mobiles, print pour l'impression, projection pour les vidéo-projecteurs, screen pour les écrans d'ordinateurs, tty pour les consoles et tv pour les écrans de télévision. La spécification définit de plus des caractéristiques propres à chaque famille (media group): affichage page par page ou en continue, média visuel, aural ou tactile, affichage des caractères selon une grille fixe ou librement, possibilité ou non d'interaction. Et chaque propriété CSS peut définir les media groups auxquelles elle s'applique. Par exemple cue n'a de sens que pour les médias vocaux.

La définission de règles par média peut se faire de 3 façons:

  • au niveau de l'instruction d'insertion d'une feuille dans le code HTML:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
  • lors de l'import d'une feuille en CSS:
@import url("print.css") print;
  • ou à l'intérieur de la feuille:
@media print {
   * {
      color: black;
   }
}

En CSS3

CSS3 va plus loin via la notion de media query, qui permettent de choisir plus précisément des règles en fonction de caractéristiques du périphérique, par exemple sa taille.

Une requête se compose du nom d'un type de périphérique et d'un ensemble d'expression définissant des conditions qu'il doit remplir. Elle peut contenir plusieurs expressions, séparées par and si elles sont cumulatives, ou une virgule si elles sont alternatives. Par exemple:

@media screen and (color), projection and (color) { ... }

appliquera la règle aux écrans couleurs ou aux vidéo-projecteurs couleurs. Les expression peuvent également utiliser les mots-clés not ou only.

Actuellement, les tests peuvent porter sur les propriétés suivantes:

  • width, min-width, max-width : la largeur de la zone d'affichage
  • height, min-height, max-height: la hauteur de la zone d'affichage
  • device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height : heu là je ne saisis pas trop la différence
  • device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio: le format du périphérique, exprimé par 2 entiers séparés par une barre oblique. Par exemple: 16/9
  • color, min-color, max-color: nombre de bits utilisés pour représenter une couleur. color tout court désignera tous les périphériques couleurs.
  • color-index, min-color-index, max-color-index: nombre de couleurs affichables
  • monochrome, min-monochrome, max-monochrome:
  • resolution, min-resolution, max-resolution: la résolution, par exemple min-resolution: 300dpi
  • scan: pour le télés
  • grid:

Tout cela va permettre d'adapter au mieux l'affichage des sites en fonction de la configuration de l'utilisateur, par exemple en développant des feuilles adaptées aux différents périphériques mobiles.

Exemple stupide

Juste pour vérifier que ça marche. Asseyez d'utiliser la feuille de style suivante dans une version récente de Minefield:

@media all and (max-width: 400px){
   BODY{
      background-color: red;
   }
}
@media all and (min-width: 400px) and (max-width: 800px){
   BODY{
      background-color: green;
   }
}
@media all and (min-width: 800px){
   BODY{
      background-color: blue;
   }
}

En modifiant la largeur de la fenêtre, la couleur du fond devrait changer. C'est magique ? non c'est Shiretoko :-)[1]

Notes

[1] ah, mon petit doigt me souffle à l'oreille que ça fonctionne également dans Opéra et Webkit. Quant à Redmond : None of the following CSS 3 media query attributes are planned for implementation in Internet Explorer 8