Zusammenfassung

  • Der erste öffentliche Entwurf von CSS Containment Level 3 vom 21. Dezember 2021 stellte Abfragen über Elemente im Dokument neben Media Queries über die Anzeigeumgebung. container-type macht einen Vorfahren zum Abfragecontainer; @container steuert die Gestaltung seiner Nachfahren.
  • Die Arbeitsfassung vom 18. August 2022 präzisierte Größentypen, Containernamen und relative Einheiten. Ihr Beispiel zeigt ein Medienelement, das sich in Hauptspalte und Seitenleiste nach dem jeweiligen Platz richtet.

Die Karte hatte für den Hauptteil ein gutes Outfit. Neben dem Foto stand ein lesbarer Teaser, und sogar der Abstand wirkte großzügig. Dann zog sie in die Seitenleiste. Nun stand das Bild dem Text auf den Füßen. Eine Media Query sah das breite Desktopfenster und empfahl weiterhin die große Garderobe. Der Karte half diese Auskunft ungefähr so sehr wie die Quadratmeterzahl des ganzen Hauses bei der Suche nach einem Regal für die Abstellkammer.

Der erste öffentliche W3C-Entwurf vom 21. Dezember 2021 unterschied deshalb zwei Fragen. Media Queries beziehen sich auf die Umgebung der Darstellung, etwa die Breite des Viewports. Container Queries können Eigenschaften von Elementen innerhalb des Dokuments prüfen, darunter die Größe ihrer Kästen. Eine wiederverwendbare Karte kann gleichzeitig an mehreren Stellen derselben Seite erscheinen. Das Fenster ist für alle gleich, die verfügbaren Spaltenbreiten sind es nicht.

Zunächst bezeichnet der Seitenautor mit container-type einen geeigneten Vorfahren als Abfragecontainer. Regeln unter @container gelten für dessen Nachfahren, wenn die Bedingung am Container erfüllt ist. In der breiten Hauptspalte liegen Bild und Text nebeneinander; im schmalen Rand stehen sie untereinander. Ein einziges Desktopfenster trägt beide Versionen. Die Redaktion bestimmt den Platz der Karte, der Browser prüft die Größe an diesem Platz.

Damit diese Messung funktioniert, braucht sie eine saubere Grenze. Würde die Breite des Containers erst durch seine Kinder bestimmt und das Layout dieser Kinder wiederum durch eine Abfrage jener Breite, könnte sich die Berechnung im Kreis drehen. Eine W3C-Demonstration von 2021 erklärte, weshalb Abfragecontainer definiert und in passenden Fällen von inhaltsabhängiger Größenbestimmung gelöst werden. Die lokale Breite wird so zu einem brauchbaren Eingangswert für die Gestaltung der Nachfahren.

Die Arbeitsfassung vom 18. August 2022 brachte ein anschauliches Beispiel: Dasselbe Medienelement wechselt zwischen vertikaler und horizontaler Anordnung, je nachdem, ob es im Hauptbereich oder in der Seitenleiste steht. container-type: inline-size macht einen Vorfahren für Größenabfragen entlang der Textachse geeignet. Mit einem Containernamen kann @container gezielt den richtigen Vorfahren auswählen. Die bedingte Regel gestaltet dessen Nachfahren anhand ihrer örtlichen Verhältnisse.

Relative Einheiten wie cqw und cqi binden Längen an die Breite beziehungsweise die Inline-Größe eines Abfragecontainers. So kann ein Detail mit der Karte mitreisen, ohne die Maße der gesamten Browserfläche mitzuschleppen. Der CSS-Arbeitskreis des W3C stellte die Aktualisierung als Paket aus Inline-Größen-Containment, Einheiten und Abfrageregel vor.

Auch der Wortschatz wurde noch zugeschnitten. Der Entwurf von 2021 erprobte unter container-type Werte wie block-size und state. Die Fassung von 2022 entfernte die einachsige block-size-Option und änderte Startwerte sowie Kurzschreibweisen. Die W3C-Publikationsgeschichte datiert beide Stationen. Der Gedanke blieb dabei erkennbar: Komponenten brauchen die Maße ihres Behälters, und die Grammatik musste diese örtliche Beziehung zuverlässig beschreiben.

Die Seitenleiste wurde durch all das keinen Millimeter breiter. Sie bekam eine Karte, die ihre Maße ernst nahm. Für eine wiederverwendbare Komponente war das eine ziemlich große Erleichterung in einem kleinen Raum.