Containerabfragen und :has() sind die perfekte Kombination für responsive Designs. Glücklicherweise werden beide Funktionen in Chromium 105 eingeführt. Diese Version enthält zwei lang erwartete Funktionen für responsive Benutzeroberflächen.
Containerabfragen – eine kurze Zusammenfassung
Mit Containerabfragen können Entwickler einen übergeordneten Selector nach Informationen zu Größe und Stil abfragen. So kann ein untergeordnetes Element seine eigene Logik für responsives Styling haben, unabhängig davon, wo es sich auf einer Webseite befindet.
Anstatt sich auf den Darstellungsbereich für Eingaben zum Stil wie dem verfügbaren Platz zu verlassen, können Entwickler jetzt auch die Größe von Elementen auf der Seite abfragen. Das bedeutet, dass eine Komponente ihre eigene Logik für responsives Styling hat. Dadurch ist die Komponente viel robuster, da die Stillogik unabhängig davon an ihr angehängt ist, wo sie auf der Seite erscheint.
Containerabfragen verwenden
Wenn Sie mit Containerabfragen arbeiten möchten, müssen Sie zuerst die Begrenzung auf ein übergeordnetes Element festlegen. Legen Sie dazu ein container-type für den übergeordneten Container fest. Angenommen, Sie haben eine Karte mit einem Bild und Text, die so aussieht:
Wenn Sie eine Containerabfrage erstellen möchten, legen Sie container-type für den Kartencontainer fest:
.card-container {
container-type: inline-size;
}
Wenn Sie container-type auf inline-size festlegen, wird die Größe des übergeordneten Elements in der Ausrichtung „Inline“ abgefragt. In lateinischen Sprachen wie Englisch entspricht dies der Breite der Karte, da der Text inline von links nach rechts fließt.
Jetzt können wir mit diesem Container mithilfe von @container Stile auf alle untergeordneten Elemente anwenden:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Der übergeordnete :has()-Sellektor
Mit der CSS-Pseudoklasse :has() können Entwickler prüfen, ob ein übergeordnetes Element untergeordnete Elemente mit bestimmten Parametern enthält.
p:has(span) steht beispielsweise für einen Paragrafen-Selektor (p), der ein span enthält. Sie können damit den übergeordneten Absatz selbst oder alles darin formatieren. Ein nützliches Beispiel ist figure:has(figcaption), um ein figure-Element mit einer Bildunterschrift zu formatieren. Weitere Informationen zu :has() findest du in diesem Artikel von Jhey Tompkins.
Containerabfragen und :has()
Sie können die Auswahlmöglichkeiten für übergeordnete Elemente von :has() mit den Abfragemöglichkeiten für übergeordnete Elemente von Containerabfragen kombinieren, um wirklich dynamische Intrinsische Stile zu erstellen.
Sehen wir uns das erste Beispiel mit der Raketenkarte an. Was ist, wenn Sie eine Karte ohne Bild haben? Vielleicht möchten Sie den Titel vergrößern und das Rasterlayout auf eine Spalte anpassen, damit es ohne Bild besser aussieht.
In diesem Beispiel hat die Karte mit einem Bild eine Rastervorlage mit zwei Spalten, während die Karte ohne Bild ein Layout mit einer Spalte hat. Außerdem hat die Karte ohne Bild eine größere Überschrift. Verwenden Sie das folgende CSS, um dies mit :has() zu schreiben.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Sie suchen nach einem Element mit der Klasse visual, um den Stil mit zwei Spalten oben anzuwenden. Eine weitere praktische CSS-Funktion ist :not(). Dieser Teil der Spezifikation ist mit :has() identisch, existiert aber schon viel länger und wird von mehr Browsern unterstützt. Sie können sogar :has() und :not() kombinieren, z. B. so:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Im obigen Code schreiben Sie einen Selector, der einen h1 in einer Karte formatiert, die keine visual-Klasse enthält. So können Sie die Schriftgröße sehr genau anpassen.
Zusammenfassung
In der obigen Demo wird eine Kombination aus :has(), :not() und @container gezeigt. Containerabfragen kommen jedoch erst richtig zur Geltung, wenn dasselbe Element an mehreren Stellen verwendet wird. Fügen wir ein wenig Stil hinzu und präsentieren diese Karten in einem Raster nebeneinander.
Jetzt können Sie die Vorteile moderner CSS-Technologien wirklich sehen. Wir können klare Stile mithilfe gezielter Stile schreiben, die Logik auf Logik aufbauen und wirklich robuste Komponenten erstellen. Mit diesen beiden leistungsstarken Funktionen in Chromium 105 und der wachsenden geräteübergreifenden Unterstützung ist es eine spannende Zeit für UI-Entwickler.