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. Diese Funktion bedeutet, dass die Logik einer responsiven Komponente einer Komponente gehört. Dadurch ist die Komponente viel robuster, da die Stillogik unabhängig davon, wo sie auf der Seite erscheint, an sie angehängt ist.
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 Selektor ":has()"
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 zu gestalten, das eine Bildunterschrift enthält. 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.
Kommen wir nun zum ersten Beispiel mit der Raketenkarte. Was wäre, wenn Sie eine Karte ohne Bild hätten? 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. Wenn Sie dies mit :has() schreiben möchten, verwenden Sie den folgenden CSS-Code.
.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. Lassen Sie uns nun einen Stil hinzufügen und diese Karten in einem Raster nebeneinander präsentieren.
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, die in Chromium 105 eingeführt werden und die browserübergreifende Unterstützung immer beliebter wird, ist dies eine spannende Zeit für UI-Entwickler.