La nouvelle syntaxe CSS Media Query Range

Nous comptons sur Requêtes de média CSS pour sélectionner et styliser des éléments en fonction d'une condition ciblée. Cette condition peut être de toutes sortes de choses, mais se divise généralement en deux camps : (1) le type de média utilisé et (2) une fonctionnalité spécifique du navigateur, de l'appareil ou même de l'environnement de l'utilisateur.

Supposons donc que nous souhaitions appliquer un certain style CSS à un document imprimé :

@media print {
  .element {
    /* Style away! */
  }
}

Le fait que nous puissions appliquer des styles à une certaine largeur de fenêtre a fait des CSS Media Queries un ingrédient essentiel de la conception Web réactive depuis Ethan Marcotte a inventé le terme. Si la largeur de la fenêtre d'affichage du navigateur est d'une certaine taille, appliquez un ensemble de règles de style, ce qui nous permet de concevoir des éléments qui répondent à la taille du navigateur.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Notez le and là-dedans ? C'est un opérateur qui nous permet de combiner des déclarations. Dans cet exemple, nous avons combiné une condition selon laquelle le type de média est un screen et que c'est min-width fonction est définie sur 30em (ou au-dessus). Nous pouvons faire la même chose pour cibler une gamme de tailles de fenêtres :

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Désormais, ces styles s'appliquent à une plage explicite de largeurs de fenêtres plutôt qu'à une seule largeur !

Mais la spécification Media Queries Level 4 a introduit une nouvelle syntaxe pour cibler une plage de largeurs de fenêtres à l'aide d'opérateurs de comparaison mathématiques courants - des choses comme <, >et = - qui ont plus de sens syntaxiquement tout en écrivant moins de code.

Découvrons comment cela fonctionne.

Nouveaux opérateurs de comparaison

Ce dernier exemple est une bonne illustration de la façon dont nous avons en quelque sorte des plages « truquées » en combinant des conditions à l'aide de la and opérateur. Le grand changement dans la spécification Media Queries Level 4 est que nous avons de nouveaux opérateurs qui comparent les valeurs plutôt que de les combiner :

• < évalue si une valeur est moins que une autre valeur
• > évalue si une valeur est plus grand que une autre valeur
• = évalue si une valeur est égal à une autre valeur
• <= évalue si une valeur est inférieur ou égal à to une autre valeur
• >= évalue si une valeur est supérieur ou égal à to une autre valeur

Voici comment nous aurions pu écrire une requête multimédia qui applique des styles si le navigateur est 600px large ou plus :

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Voici à quoi cela ressemble d'écrire la même chose en utilisant un opérateur de comparaison :

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Ciblage d'une gamme de largeurs de fenêtres

Souvent, lorsque nous écrivons des Media Queries CSS, nous créons ce qu'on appelle un point d'arrêt — une condition où la conception « casse » et un ensemble de styles est appliqué pour la réparer. Un design peut avoir un tas de points d'arrêt ! Et ils sont généralement basés sur le fait que la fenêtre d'affichage se situe entre deux largeurs : là où le point d'arrêt commence et où le point d'arrêt se termine.

Voici comment nous avons procédé en utilisant le and opérateur pour combiner les deux valeurs de point d'arrêt :

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Vous commencez à avoir une bonne idée de combien il est plus court et plus facile d'écrire une requête multimédia lorsque nous abandonnons le booléen and opérateur en faveur de la nouvelle syntaxe de comparaison de plage :

@media (400px <= width <= 1000px) {
  /* etc. */
}

Beaucoup plus facile, non ? Et il est clair exactement ce que fait cette requête média.

Navigateurs pris en charge

Cette syntaxe de requête multimédia améliorée en est encore à ses débuts au moment d'écrire ces lignes et n'est pas aussi largement prise en charge pour le moment que l'approche qui combine min-width ainsi que max-width. On s'en rapproche pourtant ! Safari est le seul obstacle majeur à ce stade, mais il y a un ticket ouvert pour ça que vous pouvez suivre.

Regardons un exemple

Voici une mise en page bien adaptée aux écrans plus grands, comme un bureau :

Cette disposition a des styles de base communs à tous les points d'arrêt. Mais au fur et à mesure que l'écran se rétrécit, nous commençons à appliquer des styles qui sont appliqués de manière conditionnelle à différents points d'arrêt plus petits qui conviennent parfaitement aux tablettes jusqu'aux téléphones mobiles :

Pour voir ce qui se passe, voici comment la mise en page répond entre les deux points d'arrêt plus petits. La liste de navigation cachée s'affiche ainsi que title dans l' main est augmenté dans font-size.

Ce changement est déclenché lorsque les changements de la fenêtre d'affichage passent de la correspondance des conditions d'un média à une autre :

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Nous avons combiné quelques-uns des concepts que nous avons couverts ! Nous ciblons les appareils avec un screen type de média, en évaluant si la largeur de la fenêtre d'affichage est supérieure ou égale à une valeur spécifique à l'aide de la nouvelle syntaxe de plage de fonctionnalités multimédia et en combinant les deux conditions avec la and opérateur.

OK, donc c'est parfait pour les appareils mobiles ci-dessous 768px et pour les autres appareils égaux ou supérieurs à 768px. Mais qu'en est-il de cette disposition de bureau… comment y arriver ?

En ce qui concerne la mise en page :

• La main devient une grille à 12 colonnes.
• Un bouton s'affiche sur l'image.
• La taille de la .title la police de l'élément augmente et chevauche l'image.

En supposant que nous ayons fait nos devoirs et déterminé exactement où ces changements doivent avoir lieu, nous pouvons appliquer ces styles lorsque la fenêtre correspond à la width condition pour ce point d'arrêt. Nous allons dire que le point d'arrêt est à 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Amusez-vous avec :

Pourquoi la nouvelle syntaxe est plus facile à comprendre

L'essentiel : il est plus facile de distinguer un opérateur de comparaison (par exemple width >= 320px) que de faire la différence entre min-width ainsi que max-width utilisant l' and opérateur. En supprimant la nuance entre min- ainsi que max-, nous avons un seul width paramètre avec lequel travailler et les opérateurs nous disent le reste.

Au-delà des différences visuelles de ces syntaxes, elles font aussi des choses légèrement différentes. Utilisant min- ainsi que max- équivaut à utiliser des opérateurs de comparaison mathématiques :

• max-width est équivalent à la <= opérateur (par ex. (max-width: 320px) est la même que (width <= 320px)).
• min-width est équivalent à la >= opérateur (par ex. (min-width: 320px) est la même que (width >= 320px)).

Notez que ni l'un ni l'autre n'est l'équivalent de > or < des opérateurs.

Tirons un exemple directement de la spécification Media Queries Level 4 où nous définissons différents styles en fonction d'un point d'arrêt à 320px dans la largeur de la fenêtre en utilisant min-width ainsi que max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Les deux requêtes multimédias correspondent à une condition lorsque la largeur de la fenêtre est égale à 320px. Ce n'est pas exactement ce que nous voulons. Nous voulons non plus l'une de ces conditions plutôt que les deux à la fois. Pour éviter ces changements implicites, nous pourrions ajouter un pixel à la requête en fonction de min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Bien que cela garantisse que les deux ensembles de styles ne s'appliquent pas simultanément lorsque la largeur de la fenêtre est 320px, toute largeur de fenêtre comprise entre 320px ainsi que 321px se traduira par une zone super petite où aucun des styles de l'une ou l'autre des requêtes n'est appliqué - une situation étrange de "flash de contenu sans style".

Une solution consiste à augmenter la deuxième valeur de l'échelle de comparaison (chiffres après la virgule) à 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Mais cela devient idiot et trop compliqué. C'est pourquoi la nouvelle syntaxe de plage de fonctionnalités multimédias est une approche plus appropriée :

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Emballage en place

Ouf, nous avons couvert beaucoup de terrain sur la nouvelle syntaxe pour cibler les plages de largeur de la fenêtre d'affichage dans CSS Media Queries. Maintenant que la spécification Media Queries Level 4 a introduit la syntaxe et qu'elle a été adoptée dans les navigateurs Firefox et Chromium, nous sommes sur le point de pouvoir utiliser les nouveaux opérateurs de comparaison et de les combiner avec d'autres fonctionnalités multimédias de la gamme. width, comme height ainsi que aspect-ratio

Et ce n'est qu'une des nouvelles fonctionnalités introduites par la spécification de niveau 4, aux côtés d'un un tas de requêtes que nous pouvons faire en fonction des préférences de l'utilisateur. Cela ne s'arrête pas là ! Vérifiez Guide complet des requêtes média CSS pour un aperçu de ce qui pourrait être inclus dans Media Queries niveau 5.