CSS Variablen: Custom Properties mit --name definieren und mit var() nutzen

Eine Custom Property definieren: --name

Eine Custom Property ist eine Eigenschaft, deren Name mit -- beginnt. Sie wird in einer normalen Regel deklariert, meist auf :root, damit sie im ganzen Dokument gilt, und mit var(--name) überall gelesen, wo ein Wert stehen kann. Der Name ist case-sensitive: --Akzent und --akzent sind verschieden.

:root {
  --akzent: #7A2FB0;
  --abstand: 1.5rem;
}
a        { color: var(--akzent); }
.kasten  { padding: var(--abstand); border-left: 3px solid var(--akzent); }

var() mit Fallback

var() nimmt einen zweiten Parameter: den Wert, der gilt, wenn die Variable nicht definiert ist. var(--rand, 1px solid gray) fällt auf einen grauen Rahmen zurück. Ist die Variable definiert, aber ihr Wert für die Eigenschaft ungültig – etwa eine Länge in color –, greift nicht der Fallback, sondern der vererbte oder der Ausgangswert der Eigenschaft.

Vererbung und Kaskade: Variablen sind Eigenschaften

Custom Properties werden vererbt und nehmen an der Kaskade teil wie jede andere Eigenschaft. Daraus folgt ihr größter Nutzen: Eine Variable lässt sich in einem Teilbaum überschreiben, und alles darunter folgt. .dunkel { --akzent: #EAD2FF; } färbt jeden Link innerhalb dieses Bereichs um, ohne dass eine Regel für Links geändert wird. Dasselbe funktioniert in einer Media Query: Die Variablen ändern sich, die Regeln bleiben.

@media (prefers-color-scheme: dark) {
  :root { --akzent: #CF95FF; --papier: #16161C; }
}

Unterschied zu Sass-Variablen und zu den alten CSS-Konstanten

Präprozessor-Variablen werden beim Übersetzen durch ihren Wert ersetzt; im Browser gibt es sie nicht mehr. Deshalb können sie nicht auf eine Klasse, eine Media Query oder eine Nutzereinstellung reagieren. Custom Properties leben im Browser, lassen sich per JavaScript lesen und setzen (style.setProperty('--akzent', '…')) und ändern das Rendering sofort. Der Artikel CSS-Konstanten dokumentiert, wie dasselbe Ziel vor den Custom Properties mit einem serverseitigen Präprozessor erreicht wurde.

Wo eine Variable nicht eingesetzt werden kann

Eine Custom Property steht für einen Wert, nicht für ein Stück Quelltext, und daraus ergeben sich klare Grenzen. Sie kann keinen Eigenschaftsnamen und keinen Selektor ersetzen; sie kann nicht in der Bedingung einer Media Query stehen; und sie kann nicht Teil eines Namens sein, weil der Ersetzungsvorgang keine Zeichenketten aneinanderfügt. Wer aus einer Zahl und einer Einheit einen Wert bauen will, multipliziert deshalb: calc(var(--n) * 1px).

Und wenn ein eingesetzter Wert an seiner Stelle unsinnig ist, gilt eine besondere Regel: Die Deklaration wird nicht wie sonst verworfen, sodass die vorhergehende gälte, sondern die Eigenschaft nimmt den geerbten oder den Ausgangswert an – sie ist zum Zeitpunkt der Berechnung ungültig. Ein Tippfehler in einer Variablen kann eine Farbe deshalb nicht auf den vorherigen Wert zurückfallen lassen, sondern macht sie schwarz. Der zweite Parameter von var() ist genau dagegen gedacht.

Variablen zur Laufzeit umschalten

Weil eine Custom Property eine gewöhnliche Eigenschaft ist, unterliegt sie der Kaskade und der Vererbung – und lässt sich damit über einen Selektor umschalten. Ein Attribut am Wurzelelement, eine Klasse an einem Baustein oder der Zustand eines Kontrollkästchens genügt, um einen ganzen Satz Werte auszutauschen, ohne eine einzige der eigentlichen Deklarationen zu wiederholen. Genau darauf beruhen die meisten Umschalter zwischen heller und dunkler Darstellung.

Aus einem Skript heraus geht dasselbe über die Stilangabe eines Elements: Ein gesetzter Wert an einem Element wirkt auf dieses und alle Nachfahren. Das ist die sparsamste Art, ein Skript mit dem Stylesheet zu verbinden – das Skript setzt eine Zahl, das Stylesheet entscheidet, was daraus wird. Übergänge und Animationen greifen dabei nicht auf die Variable selbst, sondern auf die Eigenschaft, die sie einsetzt: Eine Variable ist von Haus aus eine Zeichenkette und wird sprunghaft ersetzt, während die Farbe oder die Länge, in der sie landet, sanft wechseln kann.

Der Name ist Teil des Werts

Custom Properties unterscheiden sich in einem Punkt grundlegend von allen anderen Eigenschaften: Ihr Name ist Groß- und Kleinschreibung gegenüber empfindlich. --Farbe und --farbe sind zwei verschiedene Eigenschaften, während COLOR und color dieselbe sind. Der Grund liegt darin, dass der Browser den Namen nicht kennt und ihn deshalb Zeichen für Zeichen vergleichen muss.

Ebenso wenig prüft er den Wert. Alles zwischen dem Doppelpunkt und dem Semikolon wird als Zeichenkette gespeichert, einschließlich Leerzeichen am Anfang. Ein Tippfehler fällt daher nicht beim Definieren auf, sondern erst beim Einsetzen – und dort mit der oben beschriebenen Wirkung. Wer eine Variable dennoch prüfen lassen will, meldet sie mit ihrem Typ an: Eine eigene At-Regel legt fest, welche Werte erlaubt sind, ob sie vererbt und welchen Ausgangswert sie hat. Erst damit lässt sich eine Variable auch weich animieren statt sprunghaft zu ersetzen.

Rechnen mit Variablen: calc()

Variablen lassen sich in calc() verrechnen: padding: calc(var(--abstand) / 2). Einheitenlose Zahlen in einer Variable werden mit calc(var(--n) * 1px) zu Längen. So bleibt eine Größenskala an einer Stelle definiert und wird an vielen abgeleitet.

Häufige Fragen