CSS - Media Queries

Les media queries en CSS sont un outil puissant permettant d'appliquer des styles CSS conditionnels en fonction de certaines caractéristiques du dispositif de l'utilisateur, telles que la largeur et la hauteur de l'écran, la résolution ou encore le type de dispositif (comme un écran d'ordinateur ou un téléphone mobile).

Responsive Web Design : Les media queries permettent aux développeurs de créer des designs adaptatifs (responsive). Cela signifie que le site web peut s'ajuster automatiquement pour offrir une expérience optimisée sur divers dispositifs, tels que les ordinateurs de bureau, les tablettes et les smartphones.
Mobile First et Desktop First : Les media queries permettent de suivre des approches d'amélioration progressive et de dégradation gracieuse. En d'autres termes, il est possible d'ajouter ou de supprimer des fonctionnalités selon les capacités du dispositif, offrant ainsi une meilleure expérience utilisateur tout en assurant une fonctionnalité de base sur tous les dispositifs.
Types de médias et caractéristiques : Les media queries peuvent cibler différents types de médias (comme screen pour les écrans et print pour les imprimantes) et peuvent tester diverses caractéristiques de l'appareil (telles que width, height, orientation, et resolution).

➡️ W3C - Media Queries

Source image

Syntaxe

La syntaxe d'une media query en CSS utilise le mot-clé @media et se compose de plusieurs parties optionnelles qui permettent de définir des styles conditionnels pour des dispositifs ou des situations spécifiques.

Elle est structurée de la manière suivante :

Modificateur de media query (optionnel) : Un mot-clé tel que not ou only peut être utilisé pour affiner les conditions de la query. Par exemple, only limite l'application des styles à des cas précis, tandis que not exclut certains dispositifs.
Type de média (optionnel) : Spécifie le type de dispositif auquel s'applique la media query. Les valeurs possibles sont screen (pour les écrans), print (pour l'impression) et all (pour tous les types de dispositifs).
Caractéristiques de média (zero ou plus) : Définissent les conditions spécifiques en fonction des propriétés du dispositif, telles que la width, la height, l'orientation, ou la resolution.

Source image

Dans l'exemple ci-dessous, les styles CSS à l'intérieur des accolades seront appliqués uniquement si la largeur de la fenêtre du navigateur est de 600 pixels ou plus.

@media (width >= 600px) {
  …
}

Media type

Le "Media Type" dans les CSS media queries fait référence à la catégorie générale d'appareil pour lequel des styles CSS spécifiques doivent être appliqués. Cela permet aux développeurs de définir des styles qui sont ciblés non seulement en fonction de la taille de l'écran ou d'autres caractéristiques, mais aussi en fonction du type d'appareil lui-même.

all : Ce type est utilisé pour s'appliquer à tous les appareils, quelle que soit leur nature. Les styles définis avec all seront utilisés sauf s'ils sont remplacés par des styles plus spécifiques dans d'autres media queries.
screen : Ce type est le plus couramment utilisé pour les styles destinés aux écrans d'ordinateurs, de tablettes et de smartphones. Il permet de cibler spécifiquement les appareils dotés d'écrans.
print : Ce type est utilisé pour cibler l'impression de pages. Par exemple, vous pourriez vouloir supprimer certains éléments, changer les polices ou ajuster les couleurs pour l'impression. Les styles définis avec print s'appliquent uniquement lorsque la page est imprimée ou lorsqu'une prévisualisation d'impression est affichée.

Exemple

@media print {
  header,
  footer {
    display: none;
  }
}

Media condition

Les media conditions sont des expressions permettant de combiner plusieurs media features et de leur appliquer une logique conditionnelle. Elles définissent quand les styles CSS spécifiés doivent s'appliquer en fonction de la combinaison de ces caractéristiques.

Les media conditions peuvent utiliser des opérateurs logiques tels que not, and, et or pour construire des expressions complexes.

Un exemple simple de media condition est @media (width >= 600px) and (orientation: landscape). Ici, la condition combine deux media features (width et orientation) avec l'opérateur and. Les styles définis à l'intérieur de cette media query s'appliquent uniquement si la largeur de l'écran est supérieure ou égale à 600 pixels et que l'appareil est en orientation paysage.

@media (width >= 600px) and (orientation: landscape) {
  …
}

Media feature

Les media features sont des aspects spécifiques ou des caractéristiques de l'appareil d'affichage qui peuvent être testés dans une media query. Elles permettent de cibler des styles CSS en fonction des capacités physiques ou environnementales de l'appareil de l'utilisateur.

Parmi les media features courantes, on trouve :

width et height : La largeur et la hauteur de la fenêtre d'affichage (viewport).
aspect-ratio : Le rapport de largeur à hauteur de l'écran.
orientation : L'orientation de l'appareil, telle que portrait (verticale) ou landscape (horizontale).
resolution : La résolution de l'écran en dpi (points par pouce) ou dppx (points par pixel).

Ces media features peuvent être utilisées individuellement ou combinées pour adapter les styles aux spécifications de l'appareil de l'utilisateur.

media feature

Source image

range form

Source image

➡️ MDN - Media features List

Exemple

@media (orientation: portrait) {
  /* Styles spécifiques pour les appareils en orientation portrait */
}

@media (hover) {
  /* Styles pour les dispositifs qui supportent le survol, comme avec une souris */
}

@media (width >= 500px) and (width <= 800px) {
    /* Styles pour les écrans dont la largeur est comprise entre 500 et 800 pixels */
}

Breakpoints

Les breakpoints, ou points de rupture en français, sont des concepts clés dans la conception web adaptative (responsive design). Ils représentent les moments où le contenu ou la mise en page d'un site web doit changer pour s'adapter à différentes tailles d'écran.

Un breakpoint est une certaine largeur (ou parfois hauteur) d'écran à laquelle le style du site web change. Cela peut impliquer des ajustements dans la taille du texte, la disposition des éléments, la visibilité de certains composants, etc.

Les breakpoints sont généralement choisis en fonction des tailles d'écran courantes des appareils, mais ils doivent surtout être basés sur le contenu du site web. L'objectif est d'assurer une expérience utilisateur optimale quelle que soit la taille de l'écran.

Note

Plutôt que de définir les breakpoints uniquement en fonction des tailles d'appareils spécifiques, une approche plus efficace consiste à les placer là où le contenu du site commence à paraître mal disposé ou difficile à lire.

Résolutions courantes

Source image

Tip

Ecran d'ordinateur : largeur > 1200px

Ecran de tablette ou petit écran d'ordinateur (12" - 14") : largeur entre 768px et 1200px

Ecran de smartphone paysage : largeur entre 480px et 768px

Ecran de smartphone portrait : largeur < 480px

➡️ Viewport Size for Devices

Exemple

Source image

/* Mobile styles */
@media (width <= 480px) {
  body {
    /* red */
    background-color: #f09a9d;
  }
}

/* Tablet styles */
@media (width >= 481px) and (width <= 1200px) {
  body {
    /* yellow */
    background-color: #f5cf8e;
  }
}

/* Desktop styles */
@media (width >= 1201px) {
  body {
    /* blue */
    background-color: #b2d6ff;
  }
}

Pixel CSS

Historiquement, un pixel CSS était considéré comme l'équivalent d'un seul pixel sur un écran d'ordinateur. Cependant, avec l'avènement des écrans à haute résolution (comme les écrans Retina ou HDPI), cette définition a évolué. Désormais, un pixel CSS est une unité abstraite utilisée pour assurer une présentation cohérente sur des appareils ayant différentes densités de pixels.

Source image

Résolution matérielle et résolution logicielle

Résolution matérielle : Il s'agit de la résolution native de l'écran, déterminée par le nombre physique de pixels. Par exemple, un écran Full HD a une résolution matérielle de 1920x1080 pixels, ce qui signifie qu'il comporte 1920 pixels horizontalement et 1080 pixels verticalement.

Résolution CSS ou Résolution Logicielle : C'est la manière dont le contenu est affiché sur l'écran. Avec l'introduction des écrans haute densité, la résolution CSS ne correspond pas directement à la résolution matérielle. Par exemple, un élément conçu pour être de 100x100 pixels CSS pourrait occuper 200x200 pixels réels sur un écran Retina, car ces écrans utilisent plus de pixels physiques pour dessiner chaque "pixel" CSS afin d'augmenter la clarté et la netteté de l'image.

Source image

Image

Sur un écran à haute densité, une image conçue pour une résolution standard peut apparaître floue ou de qualité inférieure. Pour remédier à cela, il est conseillé d'utiliser des images à résolution plus élevée. Par exemple, pour une zone d'affichage prévue de 100x100 pixels, vous pourriez fournir une image de 200x200 pixels pour qu'elle paraisse nette sur un écran à haute densité.

Source image

Exemple 1 - Image à résolution plus élevée

Image originale : 200px / 200px
Affichage en pixel CSS : 50px / 50px
A gauche : écran HDPI (DPR : 2)
A droite : écran standard (DPR : 1)
Zoom : x4
Taille : 16 ko

DPR (device pixel ratio) = rapport entre la résolution en pixels physiques et la résolution en pixels CSS

Exemple 2 - Image à résolution standard

Image originale : 50px / 50px
Affichage en pixel CSS : 50px / 50px
A gauche : écran HDPI
A droite : écran standard
Zoom : x4
Taille : 4 ko

Image vectorielle

Pour minimiser les problèmes liés à la résolution d'image, il est recommandé d'utiliser des images vectorielles ou de convertir vos images bitmap classiques en format vectoriel lorsque cela est possible. Les images vectorielles, contrairement aux images bitmap, ne dépendent pas des pixels et conservent donc leur qualité à n'importe quelle échelle. Cela les rend idéales pour une utilisation sur des écrans de résolutions variées, assurant une netteté et une clarté constantes, quelle que soit la taille d'affichage.

Image originale : SVG
Affichage en pixel CSS : 50px / 50px
A gauche : écran HDPI
A droite : écran standard
Zoom : x4
Taille : 3 ko