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 média ont activé le responsive design, et les fonctionnalités de gamme permettant de tester les tailles minimale et maximale de la fenêtre d'affichage sont utilisées par environ 80% des sites qui utilisent des requêtes média. La spécification Media Requêtes niveau 4 inclut une syntaxe améliorée pour ces requêtes de plage.

Navigateurs pris en charge

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

Les exemples suivants montrent comment cette méthode peut 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 d'une 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 a le potentiel de simplifier les requêtes, en particulier lors des tests entre deux largeurs. Dans l'exemple suivant, la requête média teste une fenêtre d'affichage avec une largeur minimale de 400 pixels et une largeur maximale de 600 pixels.

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

Cela peut être réécrit 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 trouve entre les deux valeurs.

En plus de rendre les requêtes média moins détaillées, 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 pixels ou plus. La nouvelle syntaxe vous permet d'être plus explicite sur ce que vous voulez dire et d'éviter les conflits de requêtes.

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.