Lundi
16/08/10

CSS3 : Adapter une page html à l'aide des Media Queries

Il y a presque 4 ans, j'indiquais à la face du Monde à la première édition de Paris-Web, l'apparition d'une propriété CSS3 révolutionnaire qui allait permettre d'adapter finement l'apparence des pages web en fonction (entre autre) de la résolution de l'écran du visiteur : les Medias Queries.

Les années ont passé, la taille des écrans s'est diversifiée et surtout l'utilisation des smartphones est en pleine expansion.

Le problème de faire des pages web "adaptables" en fonction de la résolution est donc de plus en plus prégnante.

Les Media Queries permettent donc de cibler :

Pour aujourd'hui, je vais m'intéresser uniquement à la taille de la fenêtre du navigateur. C'est d'une simplicité et d'une efficacité diabolique sur tous les navigateurs récents (... sauf 1)

L'exercice du jour consiste donc à changer la couleur de fond (du blanc au noir) lorsque la taille de la fenêtre descend en dessous de 800 pixels de large. Tin tin tin, roulement de tambours :

Code CSS

body {
background-color:white;	
color:black;
}
 
@media only screen and (max-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Consternant de simplicité, non ?

Quelques petites précisions cependant :

  1. only n'est pas obligatoire, il permet de masquer le style aux navigateurs les plus anciens ;
  2. screen est bien sûr pour un écran, mais on peut cibler bien d'autres terminaux ;
  3. Attention à ne pas oublier les accolades !
  4. On peut aussi déclarer ceci dans une feuille de style supplémentaire, mais la multiplicité des feuilles de style n'est pas recommandée côté performances ;
  5. Ah, oui... dernier détail : évidement Internet Explorer est à la traîne, va falloir attendre la version 9 pour que ça marche triste

Tester le résultat

Les commentaires des billets de l'année 2010 sont fermés.

| Avant | Archives | Haut de page |