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

Découvrez comment cette nouvelle syntaxe peut simplifier les requêtes multimédias.

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 de niveau 4 des requêtes multimédias inclut une syntaxe améliorée pour ces requêtes de plage.

Les exemples suivants montrent comment simplifier vos requêtes.

Une requête multimédia type qui teste une largeur de fenêtre d'affichage minimale se présente 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.
}

Et 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 fonctionnalité 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 réécrit la nouvelle syntaxe en ancienne dans vos feuilles de style.