Containerabfragen und „:has()“ sind eine Übereinstimmung im responsiven Himmel. Zum Glück gibt es diese beiden Funktionen gemeinsam in Chromium 105. Dies ist eine große Version mit zwei häufig angefragten Funktionen für responsive Oberflächen.
Containerabfragen im Überblick
Mit Containerabfragen können Entwickler einen übergeordneten Selektor nach seinen Größen- und Stilinformationen abfragen. Dadurch kann ein untergeordnetes Element Inhaber der Logik für responsive Stile sein, unabhängig davon, wo es sich auf einer Webseite befindet.
Entwickler können nun auch die Größe von In-Page-Elementen abfragen, anstatt sich auf den Darstellungsbereich zu verlassen, um Stile wie den verfügbaren Platz einzugeben. Diese Funktion bedeutet, dass die Logik einer responsiven Komponente einer Komponente gehört. Dadurch wird die Komponente wesentlich robuster, da die Stillogik ihr zugewiesen wird, unabhängig davon, wo sie auf der Seite erscheint.
Containerabfragen verwenden
Wenn Sie Containerabfragen verwenden möchten, müssen Sie zuerst die Begrenzung für ein übergeordnetes Element festlegen. Legen Sie dazu eine container-type für den übergeordneten Container fest. Möglicherweise haben Sie eine Karte mit einem Bild und Textinhalten, die wie folgt aussehen:
Um eine Containerabfrage zu erstellen, legen Sie container-type für den Kartencontainer fest:
.card-container {
container-type: inline-size;
}
Wenn Sie für container-type den Wert inline-size festlegen, wird die Größe der Inline-Richtung des übergeordneten Elements abgefragt. Für lateinische Sprachen wie Englisch ist dies die Breite der Karte, da der Text inline von links nach rechts fließt.
Jetzt können wir diesen Container verwenden, um mithilfe von @container Stile auf alle untergeordneten Elemente anzuwenden:
.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.
Beispielsweise steht p:has(span) für einen Absatzselektor (p), der eine span enthält. Damit können Sie den Stil des übergeordneten Absatzes oder alle Elemente darin ändern. Ein nützliches Beispiel ist figure:has(figcaption), um ein figure-Element zu gestalten, das eine Bildunterschrift enthält. Weitere Informationen zu :has() finden Sie in diesem Artikel von Jhey Tompkins.
Containerabfragen und :has()
Sie können die übergeordneten Auswahlfähigkeiten von :has() mit den übergeordneten Abfragefähigkeiten von Containerabfragen kombinieren, um einige 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 einzelne Spalte anpassen, damit es ohne das Bild bewusster aussieht.
In diesem Beispiel hat die Karte mit einem Bild eine zweispaltige Rastervorlage, während die Karte ohne Bild ein einspaltiges Layout 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 obigen zweispaltigen Stil anzuwenden. Eine weitere praktische CSS-Funktion ist :not(). Dies gehört zur selben Spezifikation wie :has(), gibt es aber schon sehr viel länger und bietet eine bessere Browserunterstützung. Sie können sogar :has() und :not() kombinieren. Beispiel:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Im Code oben schreiben Sie einen Selektor, der ein h1 innerhalb einer Karte formatiert, die keine visual-Klasse enthält. So können Sie die Schriftgröße sehr klar anpassen.
Zusammenfassung
Die obige Demo zeigt eine Kombination aus :has(), :not() und @container. Containerabfragen glänzen jedoch besonders, wenn Sie dasselbe Element an mehreren Stellen verwenden können. Lassen Sie uns nun einen Stil hinzufügen und diese Karten in einem Raster nebeneinander präsentieren.
Jetzt können Sie die Möglichkeiten moderner CSS wirklich sehen. Wir sind in der Lage, klare Stile mit gezielten Stilen zu schreiben, die auf Logik 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!