Les requêtes de conteneur commencent à arriver dans des navigateurs stables pendant que le polyfill fait l'objet d'une mise à jour importante

Una Kravets

Gerald Monaco

Les requêtes de conteneur sont disponibles !

Bonne nouvelle : l'une des fonctionnalités les plus demandées par les développeurs commence à apparaître dans les navigateurs Web. Depuis Chromium 105 et Safari 16, vous pouvez désormais créer des requêtes de conteneurs basées sur la taille et utiliser les valeurs d'unité de requête du conteneur dans ces navigateurs. Pour faciliter l'utilisation des requêtes de conteneur basées sur la taille et des unités cq, l'équipe Aurora de Chrome a travaillé dur pour mettre à jour le polyfill de requête de conteneur afin qu'il soit compatible avec davantage de navigateurs et de cas d'utilisation. Vous pouvez ainsi utiliser cette fonctionnalité en toute confiance dès aujourd'hui.

Que sont les requêtes de conteneur ?

Les requêtes de conteneur sont une fonctionnalité CSS qui vous permet d'écrire une logique de style qui cible les caractéristiques d'un élément parent pour styliser ses enfants. Vous pouvez créer un véritable design responsif basé sur les composants en interrogeant la taille d'un parent. Il s'agit d'informations beaucoup plus précises et utiles que des requêtes média, qui ne fournissent que des informations sur la taille de la fenêtre d'affichage.

Les requêtes de conteneur vous permettent d'écrire des composants réutilisables qui peuvent apparaître différemment en fonction de leur emplacement sur la page. Ils sont ainsi beaucoup plus résilients et réactifs sur les pages et les modèles.

Utiliser des requêtes de conteneur

Disons que vous avez du code HTML :

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Pour utiliser une requête de conteneur, vous devez d'abord définir le confinement au niveau de l'élément parent dont vous souhaitez effectuer le suivi. Pour ce faire, définissez la propriété container-type ou utilisez l'abréviation container pour définir le type et le nom du conteneur en même temps.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Vous pouvez maintenant utiliser la règle @container pour définir des styles en fonction du parent le plus proche. Pour une conception comme celle de l'image ci-dessus, où une carte peut passer d'une colonne à deux colonnes, écrivez quelque chose comme :

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Pour rendre le conteneur de l'élément parent plus clair et explicite, attribuez-lui un nom:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Ensuite, réécrivez le code précédent comme suit:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Unités de requête du conteneur

Pour rendre les requêtes de conteneur encore plus utiles, vous pouvez également utiliser des valeurs unitaires basées sur le conteneur. Le tableau suivant indique les valeurs d'unité de conteneur possibles et la façon dont elles correspondent à la taille d'un conteneur :

La typographie réactive est un exemple d'utilisation des unités basées sur un conteneur. Les unités basées sur la fenêtre d'affichage (telles que vh, vb, vw et vi) peuvent être utilisées pour dimensionner n'importe quel élément à l'écran.

.card h2 {
  font-size: 15cqi;
}

Ce code définit la taille de police sur 15 % de la taille intégrée du conteneur. Cela signifie qu'elle augmente à mesure que la taille intégrée (largeur) augmente, ou qu'elle diminue à mesure qu'elle diminue. Pour aller plus loin, utilisez la fonction clamp() pour définir une limite de taille minimale et maximale pour votre typographie, et ajustez-la de manière responsive en fonction de la taille du conteneur :

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Désormais, l'en-tête ne sera jamais supérieur à 3rem ni inférieur à .5rem, mais il prendra 15% de la taille intégrée du conteneur à n'importe quel endroit intermédiaire.

Cette démonstration va encore plus loin en modifiant la plage de tailles des fiches larges, car elles s'affichent dans une vue à deux colonnes.

Polyfill de requête de conteneur

Les requêtes de conteneur constituent une fonctionnalité particulièrement puissante. C'est pourquoi nous souhaitons que vous puissiez les intégrer à vos projets en toute sérénité, en sachant que la compatibilité avec les navigateurs joue un rôle essentiel. C'est pourquoi nous avons travaillé à améliorer le polyfill de requête de conteneur. Ce polyfill est généralement compatible avec les éléments suivants:

• Firefox 69 ou version ultérieure
• Chrome 79 ou version ultérieure
• Edge 79 ou version ultérieure
• Safari 13.4 ou version ultérieure

Il fait moins de 9 ko compressé et utilise ResizeObserver avec MutationObserver pour prendre en charge la syntaxe de requête @container complète actuellement disponible dans les navigateurs stables :

• Requêtes distinctes (width: 300px et min-width: 300px).
• Requêtes de plage (200px < width < 400px et width < 400px)
• Unités de longueur relative du conteneur (cqw, cqh, cqi, cqb, cqmin et cqmax) dans les propriétés et les clés-images.

Utiliser le polyfill de requête de conteneur

Pour utiliser le polyfill, ajoutez cette balise de script à l'en-tête de votre document :

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Vous pouvez également utiliser un service pour diffuser le polyfill de manière conditionnelle en fonction de User-Agent, ou l'auto-héberger sur votre propre origine.

Pour une expérience utilisateur optimale, nous vous recommandons de n'utiliser le polyfill que pour le contenu en dessous de la ligne de flottaison et d'utiliser des requêtes @supports pour le remplacer temporairement par un indicateur de chargement jusqu'à ce que le polyfill soit prêt à l'afficher:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Sur les réseaux et les appareils suffisamment rapides, ou sur les appareils qui prennent en charge nativement les requêtes de conteneur, cet indicateur de chargement ne s'affiche jamais.

Nouvelles fonctionnalités Polyfill

Le polyfill mis à jour est compatible avec les éléments suivants :

• Règles @container imbriquées.
• Vous pouvez imbriquer des règles @container dans des requêtes @supports et @media, et inversement.
• Les éléments CSS conditionnels tels que @supports (container-type: inline-size) seront transmis après le chargement du polyfill.
• Compatibilité complète avec la syntaxe CSS (il n'y a plus de problème à placer des commentaires là où ils sont valides d'un point de vue syntaxique).
• Modes d'écriture verticale (via writing-mode).
• Les unités relatives au conteneur (cqw, cqh, etc.) sont acceptées dans les conditions de requête, les déclarations de propriétés et les clés-images d'animation. rem et em sont acceptés dans les conditions de requête.
• Syntaxe des requêtes de conteneurs développée :
  • Syntaxe de plage (par exemple, (200px < width < 400px)).
  • Requêtes d'égalité (par exemple, (width = 200px))
• Les éléments pseudo tels que ::before et ::after.
• Vous pouvez utiliser une solution facultative pour prendre en charge les navigateurs sans :is(...)/:where(...).
• Les requêtes de fonctionnalités orientation et aspect-ratio.
• Filtrer correctement les requêtes en fonction de caractéristiques (par exemple, interroger height sur container: inline-size n'est pas autorisé avec un mode d'écriture horizontal).
• Une mutation DOM (par exemple, suppression des éléments <style> et <link> au moment de l'exécution)

Limitations et avertissements liés au remplissage

Si vous utilisez le polyfill de la requête de conteneur, vous devez faire attention à quelques fonctionnalités:

• Le Shadow DOM n'est pas encore pris en charge.
• Les unités relatives du conteneur (par exemple, cqw et cqh) ne sont pas acceptées dans les conditions de requête @media.
  • Safari: les unités relatives du conteneur ne sont pas compatibles avec les images clés d'animation antérieures à la version 15.4.
• calc(), min(), max() ou d'autres fonctions mathématiques ne sont pas encore compatibles avec les conditions de requête.
• Ce polyfill ne fonctionne qu'avec des CSS intégrés et de même origine. Les feuilles de style inter-origines et les feuilles de style dans les iFrames (sauf si un polyfill est chargé manuellement) ne sont pas compatibles.
• La structuration layout et style nécessite la compatibilité du navigateur sous-jacent :
  • Safari 15.4 ou version ultérieure
  • Firefox n'est pas compatible avec la structuration des styles pour le moment, mais nous y travaillons.

Avertissements

• Pour éviter d'affecter le FID et le CLS, le polyfill ne garantit pas le moment où la première mise en page aura lieu, même si elle est chargée de manière synchrone, sauf qu'il tentera d'éviter de retarder de manière déraisonnable la LCP. En d'autres termes, vous ne devez jamais vous fier à cette fonctionnalité pour la première peinture.
• Génère ResizeObserver Loop Errors. Le polyfill d'origine fait également cela, mais il convient de le préciser. Cela se produit parce que la taille de bloc d'un container-type: inline-size change probablement après l'évaluation d'une requête, mais ResizeObserver n'a aucun moyen de lui indiquer que nous ne nous soucions pas des modifications de taille de bloc.
• Ce polyfill a été testé par rapport aux tests de la plate-forme Web et a atteint 70% de réussite, car certaines fonctionnalités telles que les API JavaScript ne sont pas émulées. Le taux de réussite est donc intentionnellement plus proche de 70%.
• La solution :where() est requise pour les 2,23% des utilisateurs de navigateurs antérieurs à:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78