Résumé

  • Le premier projet public CSS Containment Level 3 du W3C, daté du 21 décembre 2021, distinguait les requêtes sur la fenêtre ou l’appareil de celles qui portent sur un élément de la page. container-type désigne le conteneur; @container conditionne les styles de ses descendants.
  • Le projet du 18 août 2022 précisa les requêtes de taille, les noms de conteneur et les unités relatives. Son exemple place un même objet dans une zone principale et une barre latérale, avec une disposition adaptée à chaque largeur.

La carte avait trouvé sa pose : photographie à gauche, titre et description à droite. Elle occupait avec aisance la colonne principale. Puis on lui a demandé de faire le même numéro dans une barre latérale étroite. Tout s’est serré; l’image disputait la place aux mots. Une requête de média regardait la grande fenêtre du navigateur et annonçait que l’espace ne manquait pas. Elle décrivait correctement le bâtiment, mais se trompait de chambre.

Le premier projet public du W3C, publié le 21 décembre 2021, formalisa cette différence. Les requêtes de média portent sur l’environnement d’affichage, notamment la fenêtre. Les requêtes de conteneur examinent des éléments de la page, parmi lesquels la taille de leur boîte. Un composant réutilisé peut changer de place sans que l’écran change. Il lui faut donc une mesure prise à l’endroit où il vit.

Le mécanisme donne ce rôle à un ancêtre éligible. L’auteur de la page établit un conteneur de requête avec container-type; les règles placées sous @container s’appliquent à ses descendants quand la condition est remplie. Dans un espace généreux, l’image et les mots se rangent côte à côte. Dans une petite colonne, ils se superposent. Deux exemplaires de la carte sur le même écran peuvent ainsi adopter deux dispositions. Le site choisit leur emplacement, CSS mesure chaque adresse.

Il y a une raison à cette frontière. Si la largeur d’une boîte dépendait directement de la forme que ses enfants choisissent en fonction de cette même largeur, la mesure se mordrait la queue. Une démonstration du W3C présentée en 2021 expliquait la nécessité de définir les conteneurs et de neutraliser, lorsque c’est nécessaire, la taille déterminée par leur contenu. Le navigateur obtient ainsi une dimension locale sur laquelle les descendants peuvent fonder leur présentation.

Le projet de travail du 18 août 2022 montra précisément une zone principale et une barre latérale. Un même « objet média » y passe d’une disposition verticale à une disposition horizontale suivant la taille du conteneur. container-type: inline-size permet de demander la dimension dans l’axe de lecture; un nom de conteneur permet de viser le bon ancêtre. Ce choix évite de demander sa taille à une autre boîte par accident. La règle habille les descendants de la carte selon le cadre qui les accueille.

Les unités relatives, comme cqw ou cqi, prolongent l’idée. Elles expriment une longueur en fonction de la largeur ou de la dimension en ligne du conteneur interrogé. Un détail graphique peut suivre la boîte lorsque le composant déménage. Le billet du groupe CSS du W3C présenta cette mise à jour comme un ensemble : confinement sur l’axe en ligne, unités et règle conditionnelle.

Entre 2021 et 2022, les termes ont aussi été retouchés. Le premier projet explorait notamment des types block-size et state; le second retira l’option block-size à axe unique et affina les valeurs de départ. L’historique officiel situe ces deux étapes en décembre 2021 et août 2022. La règle s’est précisée au fil du travail, comme un patron que l’on ajuste avant de découper le tissu.

La carte n’avait jamais demandé une fenêtre plus petite. Elle demandait qu’on remarque sa petite colonne. Les requêtes de conteneur ont rendu cette nuance disponible dans CSS, et la barre latérale a enfin reçu une carte à sa taille.