Live bearbeitbare Demos zu nativem CSS-Nesting, dem :has()-Selektor, Container Queries, Subgrid, @layer, :is(), color-mix() und text-wrap: balance, mit einer Baseline-Support-Tabelle.
Reines CSS erledigt heute Aufgaben, für die man früher Sass oder JavaScript brauchte. Natives Nesting gruppiert zusammengehörige Regeln, :has() gestaltet ein Elternelement abhängig von seinen Kindern, Container Queries passen eine Komponente an ihre eigene Breite an, und Subgrid richtet verschachtelte Elemente am äußeren Grid aus. Alle vier wurden 2023 Baseline, aktuelle Browser unterstützen sie also.
Die wichtigsten Features auf einen Blick
Feature
Ersetzt
Baseline seit
Nesting
Nesting im Sass-Stil in einem Präprozessor
:has()
JavaScript, das eine Klasse am Elternelement umschaltet
Container Size Queries
Viewport-Media-Queries innerhalb von Komponenten
Subgrid
Fest codierte Höhen, um Kartenzeilen auszurichten
Zu jedem Feature unten gibt es eine Demo, die du bearbeiten kannst, und die Karte mit Container Query reagiert auf einen Schieberegler. So siehst du, wie sie ihr Layout wechselt, ohne dein Fenster zu verkleinern. Die Support-Tabelle nennt das Jahr, in dem jedes Feature Baseline wurde, also in den aktuellen Versionen von Chrome, Edge, Firefox und Safari funktioniert.
Zieh den Breitenregler in der Container-Query-Demo und sieh zu, wie die Karte von gestapelt zu nebeneinander wechselt.
Bearbeite ein Beispiel links. Das abgeschottete Ergebnis rechts wird beim Tippen neu gezeichnet.
Prüfe die Support-Tabelle, bevor du auslieferst. Baseline bedeutet alle vier großen Engines, nicht ältere Versionen.
Kopiere das Snippet, das du brauchst. Keines davon braucht einen Build-Schritt oder eine Bibliothek.
Halte das Nesting flach. Zwei Ebenen reichen meist, und tiefes Nesting erzeugt lange Selektoren mit hoher Spezifität, genau wie früher in Sass.
Container Queries brauchen einen Container: Setze zuerst container-type: inline-size auf das Elternelement, sonst trifft die @container-Regel nichts.
Umschließe :has()-Regeln mit @supports selector(:has(*)), wenn ältere Browser für dein Publikum wichtig sind, damit sie sauber zurückfallen.
Nutze :where() für Bibliotheks- oder Reset-Styles. Es fügt null Spezifität hinzu, sodass jeder es mit einer einzigen Klasse überschreiben kann.
Häufige Fragen
Brauche ich Sass noch für Nesting?
Nicht nur für Nesting. Natives Nesting deckt das übliche Muster von Regeln in Regeln plus den &-Selektor ab. Sass bietet weiterhin Mixins, Schleifen und Funktionen, auch wenn Custom Properties und color-mix() vieles übernommen haben, wofür man es genutzt hat.
Was ist der Unterschied zwischen Container Queries und Media Queries?
Eine Media Query fragt den Viewport ab, meist die Fensterbreite. Eine Container Query fragt ein gewähltes Vorfahrenelement ab. So kann eine einzige Kartenkomponente in einer schmalen Seitenleiste ein kompaktes Layout zeigen und in der Hauptspalte derselben Seite ein breites.
Ist :has() langsam?
Die Browser-Engines haben es vor der Auslieferung optimiert, und normale Nutzung ist unproblematisch. Sehr breite Selektoren wie body:has(*) auf riesigen Seiten erzwingen mehr Abgleicharbeit. Verankere :has() deshalb nach Möglichkeit an einer bestimmten Komponentenklasse.
Was bedeutet Baseline?
Baseline ist eine Kennzeichnung aus der Web-Plattform-Community, die ein Feature als funktionsfähig in den aktuellen Versionen von Chrome, Edge, Firefox und Safari markiert. Newly available ist das Datum, an dem der letzte dieser Browser es ausgeliefert hat. Widely available folgt etwa dreißig Monate später.
Wann sollte ich Subgrid statt eines verschachtelten Grids nutzen?
Nutze Subgrid, wenn Kinder eines Grid-Elements an den äußeren Grid-Spuren ausgerichtet sein müssen, etwa Titel, Text und Buttons über eine Reihe von Karten hinweg. Ein einfaches verschachteltes Grid hat eigene, unabhängige Spuren, daher geraten Inhalte unterschiedlicher Länge aus der Reihe.
Wie der &-Selektor beim Nesting funktioniert
Innerhalb eines verschachtelten Blocks steht & für den äußeren Selektor. &:hover hängt die Pseudoklasse an das Elternelement selbst, & + & trifft ein Geschwisterelement derselben Art, und .theme-dark & setzt das Elternelement in einen anderen Kontext.
Ein verschachtelter Selektor ohne & wird als Nachfahre behandelt, .card { p { } } bedeutet also .card p. Browser ab Release 2023 akzeptieren am Anfang einer verschachtelten Regel auch einen reinen Elementnamen wie p.
Cascade Layers in der Praxis
@layer reset, base, components, utilities; legt vorab eine Reihenfolge fest. Ein späterer Layer schlägt einen früheren unabhängig von der Spezifität, was die meisten Kämpfe zwischen einer Komponentenbibliothek und deinen eigenen Überschreibungen beendet.
Styles außerhalb jedes Layers schlagen alle Styles in Layern. Das ist praktisch, wenn du ein altes Stylesheet in ein Setup mit Layern überführst: Lass die Altregeln zunächst ohne Layer und verschiebe sie dann einzeln.
Was du zuerst übernehmen solltest
Wenn deine Nutzer aktuelle Browser verwenden, sind Nesting und :is() kostenlose Gewinne, die dein Stylesheet nur kürzer machen. Container Queries zahlen sich aus, sobald du wiederverwendbare Komponenten hast, die in unterschiedlichen Breiten vorkommen. Subgrid zählt vor allem bei Kartenrastern und Formularen mit Labels.
Natives CSS-Nesting
Eine Karte, gestaltet mit verschachtelten Regeln
Hover, Titel und die dunkle Variante stehen alle innerhalb von .card. & bezieht sich auf .card selbst.
Der :has()-Elternselektor
Ein Feld hervorheben, wenn seine Checkbox angehakt ist
In diesem Frame läuft kein Skript. Das Label gestaltet sich selbst, weil es ein angehaktes input enthält.
Ein Kartenlayout nur ändern, wenn es ein Bild enthält
Karten ohne Bild behalten das einspaltige Layout; Karten mit Bild bekommen zwei Spalten.
Container Queries
Das CSS hinter der Schieberegler-Demo
container-type macht .shelf messbar; die @container-Regel schaltet die Karte dann auf eine Zeile um, sobald das Regal mindestens 420px breit ist.
Subgrid
Kartenzeilen, die unabhängig von der Textlänge bündig sind
Jede Karte erstreckt sich über drei Zeilen des äußeren Grids und nutzt Subgrid für ihre eigenen Zeilen, sodass alle Titel, Texte und Buttons auf einer Linie liegen.
@layer, :is(), :where(), color-mix() und text-wrap
Cascade Layers bestimmen den Gewinner über die Reihenfolge
Der ID-Selektor liegt in einem früheren Layer, daher gewinnt trotzdem die einfache Klasse im späteren Layer.
:is() und :where() kürzen Selektorlisten
:is() übernimmt die Spezifität seines stärksten Arguments, :where() zählt immer als null.
color-mix() für Abtönungen und Hover-Schattierungen
Das Mischen mit Weiß oder Schwarz im oklab-Farbraum ergibt gleichmäßige Abstufungen aus einer einzigen Markenfarbe.
text-wrap: balance für Überschriften
Die zweite Überschrift verteilt ihre Wörter gleichmäßig auf die Zeilen, statt ein einzelnes Wort allein zu lassen. Browser beschränken das Ausbalancieren auf kurze Blöcke mit wenigen Zeilen.
Browser-Support (Baseline)
Baseline-Status (aktuelle Versionen von Chrome, Edge, Firefox und Safari), im Oktober 2026 mit MDN abgeglichen
Container Style Queries sind getrennt und noch nicht Baseline; prüfe caniuse
color-mix()
Subgrid
CSS-Nesting
Reine Elementselektoren am Anfang einer verschachtelten Regel brauchen Releases ab 2023
:has()
text-wrap: balance
Ältere Browser ignorieren es und brechen normal um
Container-Query-Demo
Die Karte unten reagiert auf die Breite ihres grauen Containers, nicht auf dein Fenster. Überschreite 420px und sie wechselt zu einem zweispaltigen Layout.