CSS, HTML und Javascript mit {stil}

CSS Variables

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

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.

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

Variablen werden in einem CSS-Selektor definiert, der den Scope – den Gültigkeitsbereich – festlegt. body, :root und * deklarieren einen globalen Gültigkeitsbereich.

CSS Variablen werden von den modernen Browsern (ab Firefox 31+, Chrome 49+, Safara 9.1+, Opera 36+, Edge 15) unterstützt, ausgenommen die üblichen Verdächtigen (IE11 und älter). Immerhin ist CSS Variables im Status "Supported" gelandet.

Gegenüber den CSS-Präprozessoren SASS und LESS sind CSS Custom Properties eckig und kantig geraten. 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.

CSS Variablen deklarieren und abrufen

Der Name der 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