Nouvelle syntaxe pour les requêtes média d'une plage

Découvrez comment cette nouvelle syntaxe peut simplifier les requêtes média.

Rachel Andrew

Les requêtes multimédias ont permis le responsive design, et les fonctionnalités de plage permettant de tester la taille minimale et maximale de la fenêtre d'affichage sont utilisées par environ 80 % des sites qui utilisent des requêtes multimédias. La spécification Media Requêtes de niveau 4 inclut une syntaxe améliorée pour ces requêtes de plage.

Navigateurs pris en charge

Source

Les exemples suivants montrent comment simplifier vos requêtes.

Un test de requête média type pour une largeur minimale de fenêtre d'affichage serait écrit comme suit:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

La nouvelle syntaxe permet d'utiliser un opérateur de comparaison:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Test de la largeur maximale:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Enfin, la version utilisant la syntaxe de niveau 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Cette syntaxe peut simplifier les requêtes, en particulier lors de tests entre deux largeurs. Dans l'exemple suivant, la requête multimédia teste une fenêtre d'affichage d'une largeur minimale de 400 px et d'une largeur maximale de 600 px.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Cette requête peut être réécrite dans la nouvelle syntaxe comme suit :

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

La caractéristique que vous testez, dans ce cas width, se situe entre les deux valeurs.

En plus de rendre les requêtes multimédias moins longues, la nouvelle syntaxe présente l'avantage d'être précise. Les requêtes min- et max- incluent les valeurs spécifiées. Par exemple, min-width: 400px teste une largeur de 400 px ou plus. La nouvelle syntaxe vous permet d'être plus explicite sur ce que vous voulez dire et d'éviter les requêtes en conflit.

Pour utiliser la nouvelle syntaxe de plage tout en tenant compte des navigateurs qui ne l'ont pas encore implémentée, un plug-in PostCSS permet de réécrire la nouvelle syntaxe dans vos feuilles de style afin qu'elle corresponde à l'ancienne.