Nouveautés CSS 3 : c’est quoi les Media Queries ?

Les medias queries sont une nouveauté CSS 3 qui permet de définir des styles en fonction du média sur lequel est affiché la page web. Avec les medias queries on peut limiter l’action d’un style en fonction d’informations précises comme par exemple les propriétés width, height, et color du navigateur.

Dans un article précédent, nous vous avions parlé de la beta 4 de Firefox 3.5 et de son lot d’innovations dans un article intitulé “Nouveauté Mozilla Firefox 3.5 : raccourci nouvel onglet“.
Parmi ces améliorations nous revenons ici comme promis sur le support des Media Queries une des nouveautés CSS 3.

Exemple @media min-width

Un exemple d’application très utile des media queries serait de pouvoir définir des styles en fonction de la taille du navigateur. On peut imaginer par exemple un site qui afficherait un texte dans une structure en colonne dont le nombre dépendrait de la taille du navigateur.

Avec les media queries, il est très facile de fixer un style pour les navigateurs ayant une largeur minimum. Voici l’exemple de code pour une largeur de 1200px:

/* style appliqué uniquement aux navigateurs ayant une largeur supérieure à 1200px */
@media screen and (min-width: 1200px)
{
    div#content {width: 1200px;}
}


Les fonctionnalités Media Queries

Les medias queries permettent donc de tester des propriétés media du navigateur avant l’application des styles. Voici la liste des propriétés déjà testables qui seront supportées dans la prochaine version de Firefox :

• color : indique le nombre de bits par composante de couleur sur le périphérique de sortie (nombre de bits pour les couleurs).
• color-index : indique le nombre d’entrées dans la table de couleurs indexées pour le périphérique de sortie.
• device-aspect-ratio : format d’image du périphérique de sortie. Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux cela permet, par exemple, de tester si l’on est en 16:9 ou 19:10.
• device-height : hauteur du périphérique de sortie.
• device-width : largeur du périphérique de sortie.
• grid : détermine si le périphérique de sortie est un périphérique en grille ou bitmap.
• height : décrit la hauteur de la surface de rendu du périphérique de sortie.
• monochrome : nombre de bits par pixels sur un périphérique monochrome (échelle de gris).
• resolution : résolution (densité de pixels) du périphérique de sortie soit en points par pouce (dpi) ou en points par centimètre (dpcm).
• scan : décrit le processus de balayage des périphériques de sortie de type télévision.
• width : largeur de la surface de rendu du périphérique de sortie.

Notez enfin que la beta de Safari 4 supporte également ces Media Queries !

Alors, à vos tests, nous attendons vos premières impressions sur Kiwano !

[Mise à jour du 26 juin 2009]
Retrouvez le contenu des nouveautés sélecteurs CSS 3 et Medias Queries présentés par Kiwano sur le site professionnel graphiste à Marseille letstudio dans un dépliant PDF sur les nouveautés CSS 3 très réussi.