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 est désormais disponible dans les navigateurs Web. Depuis Chromium 105 et Safari 16, vous pouvez désormais créer des requêtes de conteneur basées sur la taille et utiliser des valeurs d'unité de requête de conteneur dans ces navigateurs. Pour faciliter encore plus l'utilisation des requêtes de conteneurs basées sur la taille et des unités cq, l'équipe Aurora de Chrome a travaillé d'arrache-pied pour mettre à jour le polyfill de requête de conteneur afin qu'il soit compatible avec plus de navigateurs et de cas d'utilisation. Ainsi, vous pouvez dès à présent utiliser cette fonctionnalité performante en toute confiance.

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 éléments géographiques d'un élément parent afin d'appliquer un style à ses enfants. Vous pouvez créer un responsive design véritablement basé sur des 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.

Avec les requêtes de conteneur, vous pouvez écrire des composants réutilisables qui peuvent apparaître différemment en fonction de leur emplacement sur la page. Elles sont ainsi beaucoup plus résilientes et réactives pour l'ensemble des pages et des modèles.

Utiliser des requêtes de conteneur

Supposons que vous ayez 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 une structuration 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 le raccourci 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 l’image ci-dessus, où une fiche 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 être plus clair et plus explicite, attribuez un nom au conteneur de l'élément parent:

.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 que les requêtes de conteneur soient encore plus utiles, vous pouvez également utiliser des valeurs d'unités basées sur le conteneur. Le tableau suivant présente les valeurs d'unité de conteneur possibles et leur correspondance avec la taille d'un conteneur:

La typographie responsive est un exemple d'utilisation des unités basées sur des conteneurs. 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;
}

Avec ce code, la taille de la police devient 15% de celle de la version intégrée du conteneur, ce qui signifie qu'elle s'agrandit à mesure que la taille de la police intégrée (largeur) augmente, ou diminue à mesure qu'elle diminue. Pour aller encore plus loin, utilisez la fonction clamp() afin de définir des limites de taille minimale et maximale pour votre typographie, et redimensionnez-la 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 entre les deux.

Cette démonstration va encore plus loin en mettant à jour les fiches les plus larges pour qu'elles s'affichent dans une plage de tailles plus restreinte, car elles apparaissent dans une vue à deux colonnes.

Le polyfill de la requête de conteneur

Les requêtes de conteneur étant une fonctionnalité particulièrement performante, nous souhaitons que vous puissiez l'intégrer facilement à vos projets. Sachez que la compatibilité avec les navigateurs est une composante essentielle de cet outil. C'est pourquoi nous nous efforçons d'améliorer le polyfill de requête de conteneur. Ce polyfill est compatible avec les éléments suivants:

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

Il est inférieur à 9 Ko une fois compressé et utilise ResizeObserver avec MutationObserver pour assurer la compatibilité avec la syntaxe de requête @container complète actuellement disponible dans les navigateurs stables:

• Requêtes discrètes (width: 300px et min-width: 300px).
• Requêtes de plage (200px < width < 400px et width < 400px).
• Conteneuriser les unités de longueur relative (cqw, cqh, cqi, cqb, cqmin etcqmax) dans les propriétés et les images clés

Utiliser le polyfill de requête de conteneur

Pour utiliser le polyfill, ajoutez ce tag 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 à votre propre origine.

Pour une expérience utilisateur optimale, nous vous recommandons de n'utiliser dans un premier temps le polyfill que pour le contenu situé 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;
  }
}

Cet indicateur de chargement ne s'affiche jamais sur les réseaux et appareils suffisamment rapides, ou sur les appareils compatibles de façon native avec les requêtes de conteneurs.

Nouvelles fonctionnalités de Polyfill

Le polyfill mis à jour prend en charge:

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

Limites et avertissements liés aux polyfills

Si vous utilisez le polyfill de requête de conteneur, vous devez faire attention à certaines caractéristiques manquantes:

• 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 les CSS inline et de même origine. Les feuilles de style multi-origines et les feuilles de style des iFrames (sauf si un polyfill est chargé manuellement) ne sont pas acceptées.
• Le confinement de layout et de style nécessite la compatibilité avec un navigateur sous-jacent :
  • Safari 15.4 ou version ultérieure
  • Firefox ne prend pas en charge le confinement de style pour le moment, mais il y travaille.

Warnings

• 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 s'il est chargé de manière synchrone, sauf qu'il tentera d'éviter un retard excessif du LCP. En d'autres termes, vous ne devez jamais compter dessus pour la première peinture.
• Génère ResizeObserver Loop Errors. Le polyfill d'origine le fait aussi, mais cela vaut la peine d'être signalé. En effet, la taille de bloc d'un container-type: inline-size est susceptible de changer après l'évaluation d'une requête, mais ResizeObserver n'a aucun moyen de lui indiquer que nous ne nous soucions pas des changements de taille de bloc.
• Ce polyfill a été testé lors des tests de plate-forme Web et a atteint 70% de réussite, car certaines fonctionnalités telles que les API JavaScript ne sont pas polyremplies. Le taux de réussite est donc intentionnellement plus proche de 70%.
• La solution :where() est requise pour les 2,23% d'utilisateurs de navigateurs antérieurs à :
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78