Um das Design einer Webseite zu ändern müssen unzählige Werte aufeinander abgestimmt werden. Um nicht jedes mal sämtliche Werte ändern zu müssen und das ganze Stylesheet zu durchsuchen würde es sich doch anbieten mit Variablen zu arbeiten. Genau dieses neue Feature wird jetzt Realität.

Nachdem ich das Layout für meine Seite hatte, konnte ich mich für kein Farbschema entscheiden. Ich habe mir verschiedene Stylesheets angelegt, die ich beliebig wechseln konnte. Doch mit CSS Variablen ist das viel einfacher: Man kann die Variablen an einem zentralen Ort definieren und dort ganz einfach die Werte anpassen. So reicht ein Stylesheet für jede beliebige Farbkombination und man braucht nur noch die Variablen anzupassen.

Der Gültigkeitsbereich von Variablen kann genau wie alle anderen Werte mit Selektoren eingegrenzt werden. Um Variablen global nutzen zu können, eignet sich die Pseudoklasse :root.

Als Name kann eine beliebige Zeichenfolge verwendet werden, mit der Präfix --. Um den Wert einer Variable auszulesen wir var() verwendet. Auch ein Fallback-Wert kann für alle Fälle definiert werden. Dieser muss mit einem , getrennt werden. Alle weiteren Kommas zählen zum Wer dazu. Bei var(--invalid, 3px, 2px); würde also der Wert 3px, 2px gelten.

:root {
  --farbe: rgb(0, 255, 0);
}
body {
  background-color: var(--farbe, green);
}

Das ganze geht natürlich auch komplexer. Die Möglichkeiten sind nahezu grenzenlos, vor allem wenn man bedenkt, dass sich all das noch mit JavaScript verknüpfen lässt.

:root {
  --r: 0;
  --g: calc(200 + 55);
  --b: 0;
}
* {
  --rgb: rgb(var(--r), var(--g), var(--b));
}
body {
  background-color: var(--rgb, green);
  min-height: var(--g)px;
}

Ein grossen Nachteil hat dieses Feature aber: Die Browserunterstützung ist sehr dürftig und somit muss zu Kompatibilitätszwecken trotzdem noch ein Stylesheet mit fixen Werten erstellt werden.