Containerabfragen und „:has()“ sind eine reaktionsschnelle Übereinstimmung. Zum Glück sind beide Funktionen in Chromium 105 verfügbar. Dies ist eine große Version mit zwei häufig gewünschten Funktionen für responsive Oberflächen!
Containerabfragen: eine kurze Zusammenfassung
Mit Containerabfragen können Entwickler einen übergeordneten Selektor nach Größe und Stilinformationen abfragen. Dadurch kann ein untergeordnetes Element seine Logik für responsives Gestalten unabhängig davon, wo sich diese Elemente auf einer Webseite befinden, besitzen.
Entwickler können sich jetzt nicht mehr auf den Darstellungsbereich für Stileingaben, z. B. den verfügbaren Platz, verlassen, sondern können jetzt auch die Größe von In-Page-Elementen abfragen. Das bedeutet, dass eine Komponente Inhaber der Logik für responsives Gestalten ist. Dadurch wird die Komponente wesentlich stabiler, da die Stillogik an sie angehängt ist, 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 einen container-type für den übergeordneten Container fest. Angenommen, Sie haben eine Karte mit einem Bild und Text, die so aussieht:
Um eine Containerabfrage zu erstellen, legen Sie container-type für den Kartencontainer fest:
.card-container {
container-type: inline-size;
}
Wenn Sie container-type auf inline-size setzen, wird die Größe der Inline-Richtung des übergeordneten Elements abgefragt. Bei lateinamerikanischen 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 Designs mithilfe von @container auf alle untergeordneten Elemente anzuwenden:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Die übergeordnete Auswahl „: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 ein span enthält. Damit können Sie den übergeordneten Absatz oder andere Elemente im Absatz 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 übergeordneten Auswahlmöglichkeiten von :has() mit den Abfragekräften der übergeordneten Abfrage von Containerabfragen kombinieren, um einige wirklich dynamische, intrinsische Stile zu erstellen.
Schauen wir uns das erste Beispiel mit der Raketenkarte an. Was wäre, wenn Sie eine Karte ohne Bild hätten? Vielleicht möchten Sie die Größe des Titels erhöhen und das Rasterlayout auf eine einzelne Spalte anpassen, damit es ohne das Bild sinnvoller wirkt.
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. Verwenden Sie folgenden CSS-Code, 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 obigen zweispaltigen Stil anzuwenden. Eine weitere praktische CSS-Funktion ist :not(). Dies ist Teil derselben Spezifikation wie :has(), gibt es aber schon viel länger und bietet eine bessere Browserunterstützung. Sie können :has() und :not() auch so kombinieren:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Im Code oben schreiben Sie einen Selektor, der ein h1 innerhalb einer Karte senkt, die keine visual-Klasse enthält. So lässt sich die Schriftgröße sehr gut anpassen.
Zusammenfassung
Die obige Demo zeigt eine Kombination aus :has(), :not() und @container. Containerabfragen kommen jedoch vor allem dann zur Geltung, wenn dasselbe Element an mehreren Stellen verwendet wird. Lassen Sie uns einen Stil verleihen und diese Karten nebeneinander in einem Raster präsentieren.
Jetzt können Sie die Stärken moderner CSS voll ausschöpfen. Wir können klare Stile mit gezielten Stilen schreiben, die auf Logik aufbauen und wirklich robuste Komponenten erstellen. Diese beiden leistungsstarken Funktionen, die jetzt in Chromium 105 eingeführt werden und immer mehr browserübergreifend Unterstützung bieten, machen die Arbeit als UI-Entwickler besonders spannend.