CSS Variablen (Custom Properties)

CSS Variables oder Custom Properties gelten zentral für mehrere CSS-Eigenschaften

CSS Variablen (Custom Properties) ändern CSS-Werte wie Farben und Größen für mehrere Elemente im gesamten CSS. Variablen vereinfachen Änderungen im Design.

Webdesigner, die CSS-Präprozessoren benutzt haben, kennen CSS-Variablen bereits. Variablen werden für Eigenschaften definiert, die auf mehrere Elemente wirken und durch eine einzige Änderung im ganzen Stylesheet überschrieben werden.

Variablen sind jetzt ein offizieller Teil der CSS-Spezifikation und heißen dort CSS Custom Properties – »selbstgemachte« oder »eigene« Eigenschaften.

Die modernen Browsern (ab Firefox 31+, Chrome 49+, Safara 9.1+, Opera 36+, Edge 15) unterstützen »natürliche« CSS-Variablen bereits, ausgenommen die üblichen Verdächtigen (IE11 und älter). Immerhin ist CSS Variables im Status "Supported" gelandet.

CSS-Variablen vs Präprozessor-Variablen

Gegenüber den CSS-Präprozessoren SASS und LESS wirken CSS Custom Properties schlicht und einfach gestrickt. Aber sie verringern Wiederholungen in langen CSS-Dateien durch globale Vereinbarung. Sie bewähren sich beim Festlegen von Farben und Farbnuancen und zusammen mit CSS calc für die Berechnung von Breite und Höhe.

  • Die Browser werten Variablen oder Custom Properties direkt im CSS aus. Das CSS der Präprozessoren muss erst in Standard-CSS übersetzt werden.
  • Javascript kann auf CSS-Variablen direkt zugreifen und sie on the fly ändern. Da das CSS der Präprozessoren zuerst übersetzt werden muss, hat Javascript nur das finale CSS im Griff.

Variablen deklarieren und abrufen

Variablen werden in einem CSS-Selektor definiert, der den Gültigkeitsbereich (Scope) festlegt. body, :root und * deklarieren z.B. einen globalen Gültigkeitsbereich. also das gesamte CSS.

Der Name der CSS Variablen beginnt mit zwei Bindestrichen (--) und ist case sensitiv, also empfindlich gegenüber Groß- und Kleinschreibung. "--me-color" und "--me-Color" sind also unterschiedliche Eigenschaften bzw. Variablen. Der Präfix "me" dient nur der Lesbarkeit.

:root {
  --me-color: hsl(350,50%,50%);
}

deklariert eine globale Variable --me-color mit dem Wert hsl(350,50%,50%). Die Funktion var() verweist auf die Variable.

.top-menu h1 {
  color: var(--me-color);
}

Zwischen var und der öffnenden runden Klammer darf kein Leerzeichen sitzen!

Und selbst das Festlegen eines einfaches Wertes funktioniert mit CSS-Variablen (für die Liebhaber von HSL-Farben).

* {
	--me-hue: 180;
}

.excerpt { background: hsla(var(--me-hue), 50%, 50%, 0.2); }

Die var()-Funktion

Die var()-Funktion holt den Wert einer Variablen. Zwischen den runden Klammern können Fallback-Werte geschrieben werden (falls die Variable nicht erreicht wird). Fallback-Werte sind eine von Kommas getrennte Liste, die von der Funktion zu einem Wert zusammengesetzt wird.

var(--my-fonts, "Helvetica Neue", "Helvetica", "Arial", "sans-serif");

In einer Variablen können auch Kurzschriften gespeichert werden. Die Werte für CSS margin und border werden von Haus auch nicht durch Kommas getrennt, sondern durch Leerzeichen.

.bg {
  --margin: 1em auto;
  --frame: 0px 1px 5px 1px;
}

.mystyle { border: var (--frame), 4px 8px; } 

Cascading

CSS Variablen oder Custom Properties befolgen die Regeln der CSS-Kaskade und Vererbung.

Dieses p liegt unter div.wrap erbt seine Farbe von .wrap

Dieses p liegt unter .excerpt > .wrap.
.excerpt vererbt dem p die Hintergrundfarbe,
aber die Farbe kommt weiter von .wrap.

CSS
<style>
:root { --me-hue: 180; }
.wrap { color: hsl(var(--me-hue), 30%, 40%); }
.bg { background: hsl(var(--me-hue), 50%, 90%); }
</style>
HTML
<div class="wrap">
   <p>Dieses p liegt unter div.wrap erbt seine Farbe von .wrap</p>
   <div class="excerpt">
      <p>Dieses p liegt unter .excerpt > .wrap. 
         excerpt vererbt dem p die Hintergrundfarbe.</p>
   </div>
</div>

CSS mit Javascript abfragen

Die Javascript-Funktion window.getComputedStyle() gibt die endgültige CSS-Eigenschaft eines Elements zurück – auch bei Eigenschaften, die auf CSS Variablen beruhen.

CSS
.bg { 
   background: hsl(var(--me-hue), 50%, 90%);
   padding: 1em; 
}
Javascript
var elem     = document.querySelector(".bg");
var elemProp = window.getComputedStyle(elem, null).getPropertyValue("background").trim();

document.querySelector(".msg").innerHTML = "Computed Style für elem " + elemProp;
{x} Variable Custom Property