CSS, HTML & Javascript mit {stil}

var() – CSS Variable (Custom Properties)

CSS-Variablen (--name) ermöglichen die zentrale Definition von Werten für Schriftgrößen, Farben und Abmessungen. Variablen werden für Eigenschaften definiert, die auf mehrere Elemente wirken und durch eine einzige Änderung im ganzen Stylesheet überschrieben werden.

CSS Variables oder Custom Properties

CSS var – Custom Properties

Variablen sind ein offizieller Teil der CSS-Spezifikation und heißen dort CSS Custom Properties – »selbstgemachte« oder »eigene« Eigenschaften. CSS-Variablen sind eine CSS-Funktion: Ihre Werte sitzen in runden Klammern direkt hinter dem Schlüsselwort var und beginnen mit zwei Strichen.

:root {
	--unit: 1rem;
	--padding: calc(var(--unit) * 2);
	--me-color: cornflowerblue;
}

.top-menu h1 {
    color: var(--me-color);
            ▲       ▲
            │       │
 Funktion ──┘       └── Argument
}

Alle modernen Browser unterstützen CSS-Variablen (ausgenommen die üblichen Verdächtigen: IE11 und älter).

Variablen für Farbe und Schrift

Eine einheitliche Farbgestaltung für das gesamte Design wird durch Variablen deutlich vereinfacht.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #f8f9fa;
    --text-color: #212529;
}

Schriftarten und -größen profitieren ebenfalls.

:root {
    --font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, Arial, sans-serif;
    --font-size: 1.1rem;
    --heading-size: 2.2rem;
}

Wenn das Design sowohl einen hellen als auch einen dunklen Modus unterstützen soll, werden CSS-Variablen in Kombination mit @media (prefers-color-scheme: dark) oder color-scheme verwendet.

:root {
    --background-color: #ffffff;
    --text-color: #333;
    --primary-color: #007bff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --text-color: #ffffff;
        --primary-color: #4dabf7;
    }
}

Eigene CSS-Variablen

Variablen bescheren uns einen großen Schritt hin zu einem flexiblen Design und eröffnen schnelle und einfache Änderungen wichtiger Größen und Eigenschaften. Sie steigern die Effizienz und optimieren dass CSS.

Die Zahl der Spalten ist anfangs 3 – und soll auf 4 oder 5 oder 6 Spalten erhöht werden. Nur ein CSS-Wert muss geändert werden. Die Variable --space berechnet den verfügbaren Platz der Spalten im Layout, --columnWidth die Breite der Spalten.

.grid {
	--columns: ;
	--gaps: calc(var(--columns) - 1 );
	--space: calc(100% - var(--gaps) * var(--unit));
	--columnWidth: calc(var(--space) / var(--columns));
	display: flex;
	flex-wrap: wrap;
	gap: var(--unit);
}

.cell {
	width: var(--columnWidth);
	height: 50px;
	background-color: var(--me-color);
}

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 Vereinbarungen. 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 SASS und LESS hingegen 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. 
    document.querySelector (".grid").style.setProperty("--columns", cols);

Nachdem der :not()-Selektor in CSS bereits zuverlässig von allen modernen Browsern unterstützt wird und der :has()-Selektor in Safari eingetroffen ist, schwindet der Vorsprung von SASS dahin. Auch verschachtelte oder nested Selektoren sind inzwischen im nativen CSS heimisch.

div#navigation {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			i {
				margin-right: 5px;
			}
		}
	}
}

Wer mit der HTML-Struktur vertraut ist, liest die SASS-Anweisung einfacher als die CSS-Umsetzung.

div#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
div#navigation ul li i {
	margin-right: 5px;
}

Quelle: Why you shouldn't use SASS.

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, firebrick); /* Falls --me-color fehlt, wird Dunkelrot verwendet */
}

Nach dem Variablennamen kann nach einem Komma ein Fallback-Wert stehen, falls die Variable nicht gesetzt ist.

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 kann ein Fallback-Wert 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. 

element {
    color: var(--primary-color, var(--secondary-color, var(--default-color, black)));
}

Zwar akzeptiert var(--variable, fallback) nur einen direkten Fallback, aber der Fallback selbst kann wieder als var() definiert sein.

  • Falls --primary-color fehlt wird --secondary-color wird genutzt.
  • Falls auch --secondary-color fehlt wird --default-color wird genutzt.
  • Falls alle fehlen wird black als endgültiger Standardwert eingesetzt.

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.

<style>
:root { --me-hue: 180; }
.wrap { color: hsl(var(--me-hue), 30%, 40%); }
.bg { background: hsl(var(--me-hue), 50%, 90%); }
</style>

<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>

Keine Custom Properties für Breakpoints

CSS Variablen können nur für die Werte von Eigenschaften eingesetzt werden, aber nicht als Selektoren oder Klassennamen. Auch für Breakpoints kann die CSS var-Funktion nicht verwendet werden (wie schade …).

:root {
  --mobile-medium: 679px;
}

@media (max-width: var(--mobile-medium)) {

}

In Media Queries können Custom Properties nicht verwendet werden. Die CSS Variable im Beispiel gilt für :root, also das html-Element, und wird an andere Elemente vererbt. Aber Media Queries sind keine Elemente und erben nichts von <html> – der Ansatz funktioniert darum nicht ohne CSS Preprocessor.

Mit einem kleinen Umweg bekommen Custom Properties die Breakpoint doch auch ohne CSS-Preproceesor in den Griff:

:root {
	--spacer: 1.5em;
}

section {
	margin-bottom: var(--spacer);
}

@media (min-width: 680px) {
	:root {
		--spacer: 2em;
	}
}

@media (min-width: 1024px) {
	:root {
		--spacer: 4em;
	}
}

CSS mit Javascript abfragen

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

.bg { 
   background: hsl(var(--me-hue), 50%, 90%);
   padding: 1em; 
}

var elem     = document.querySelector(".bg");
var elemProp = window.getComputedStyle(elem, null).getPropertyValue("background").trim();

document.querySelector(".msg").innerHTML = "Computed Style für elem " + elemProp;

How to Get and Set CSS Variable Values with JavaScript

CSS Variable mit Javascript ändern

Auch das funktioniert: Eine CSS Variable mit Javascript ändern. Hier offenbar sich die volle Schönheit der CSS Variablen, denn die Änderung ist einfach und vermeidet die Suche nach allen Beteiligten.

:root {
  --time: 6s;
}

root.style.setProperty('--time', duration + "s");
Suchen auf mediaevent.de