Media Queries in CSS3

Cette conférence porte sur les Media Queries en CSS3, un outil essentiel pour le Responsive Web Design. Elle s'inscrit dans un cours consacré à la conception web adaptative, expliquant comment appliquer des feuilles de styles en fonction des caractéristiques des périphériques de consultation.

Introduction aux Media Queries CSS3

Les Media Queries sont une spécification de CSS3 qui permet d'adapter dynamiquement le design d'une page web en fonction du périphérique utilisé pour la consulter. Cette technique est au cœur du Responsive Web Design, qui vise à modifier la présentation des contenus selon les contraintes d'affichage, comme la taille de l'écran ou le type de périphérique.

Par exemple, on peut associer des règles CSS spécifiques pour l'impression, afin de modifier la mise en page, mettre en avant certains éléments ou masquer d'autres, comme un menu de navigation inutile sur papier.

La règle @media

La directive @media permet d'intégrer directement dans une feuille de style des règles conditionnelles selon le type de média ou les caractéristiques du périphérique. Par exemple, lors de l'impression, on peut écrire :

@media print {
  #menu, #footer, aside {
    display:none;
  }
  body {
    font-size:120%;
    color:black;
  }
}

Dans cet exemple, certains éléments comme le menu, le pied de page et les sections aside ne s'afficheront pas à l'impression. Par ailleurs, la taille du texte est augmentée de 20 % et la couleur du texte est forcée en noir pour une meilleure lisibilité sur papier.

Types de médias pris en charge

Depuis CSS2, l'attribut media peut prendre plusieurs valeurs correspondant aux types de périphériques :

Media	Signification
all	Tous les types
screen	Écrans
print	Impression
handheld	Périphériques mobiles ou de petite taille
projection	Projecteurs ou présentations avec slides
tv	Téléviseur
tty	Terminal
speech	Synthèses vocales
braille	Plages braille
embossed	Imprimantes braille

Syntaxe des Media Queries CSS3

Une media query est une expression qui retourne une valeur booléenne (vrai ou faux). Elle permet de cibler précisément les conditions d'application des règles CSS. Plusieurs opérateurs logiques sont disponibles :

• and : pour combiner plusieurs conditions (ET logique)
• only : pour cibler uniquement un type de média
• not : pour exclure un type de média

Pour exprimer un OU logique, il suffit d'énumérer plusieurs media queries séparées par des virgules. Si l'une d'elles est vraie, la règle sera appliquée.

Exemples :

@media screen and (min-width: 200px) and (max-width: 640px) {
  .bloc {
    display: block;
    clear: both;
  }
}

@media screen and (max-width: 640px) {
  .bloc {
    display: block;
    clear: both;
  }
}

Dans ces exemples, la première règle s'applique aux écrans dont la largeur est comprise entre 200 et 640 pixels, tandis que la seconde s'applique à tous les écrans d'une largeur maximale de 640 pixels.

Fonctionnalités des Media Queries

Les media queries peuvent cibler différentes caractéristiques du périphérique ou de la zone d'affichage. La plupart des critères acceptent des valeurs numériques, qui peuvent être préfixées par min- ou max- pour définir des bornes minimales ou maximales.

Critère	Signification
color	Support de la couleur (bits par pixel)
device-aspect-ratio	Ratio du périphérique de sortie (exemple : 16/9)
aspect-ratio	Ratio de la zone d'affichage
device-height	Dimension en hauteur du périphérique
device-width	Dimension en largeur du périphérique
scan	Type de balayage des téléviseurs (progressive ou interlace)
grid	Périphérique bitmap ou grille (exemple : LCD)
height	Dimension en hauteur de la zone d'affichage
width	Dimension en largeur de la zone d'affichage
monochrome	Périphérique monochrome ou niveaux de gris (bits par pixel)
orientation	Orientation du périphérique (portrait ou landscape)
resolution	Résolution en dpi (points par pouce) ou dpcm (points par centimètre)

Les dimensions peuvent être exprimées en pixels (px) ou en em, les ratios sous forme de fractions (entier/entier), et la résolution en dpi ou dpcm.

Points clés

• Les Media Queries CSS3 permettent d'adapter le style d'une page web selon le périphérique de consultation.
• La règle @media intègre des conditions dans les feuilles de style, ciblant des types de médias ou des caractéristiques spécifiques.
• Les types de médias incluent écran, impression, mobile, télévision, synthèse vocale, etc.
• Les opérateurs logiques and, only, not permettent de combiner ou d'exclure des conditions.
• Les critères ciblables comprennent la largeur, la hauteur, le ratio, la résolution, la couleur, l'orientation, entre autres.
• Les valeurs numériques peuvent être encadrées par min- et max- pour définir des plages.