CSS/Funktionen/var()

Der Begriff var ist mehrdeutig.

• Für das gleichnamige HTML-Element siehe HTML/Elemente/var.
• Für var siehe JavaScript/Variable

Die var()-Funktion ermöglicht es, benutzerdefinierte Eigenschaften (am --… erkennbar) beliebig oft wieder aufzurufen.

Parameter	benutzerdefinierte Eigenschaft optionaler fester Wert als Fallback
anwendbar auf
Browsersupport	caniuse: css-variables

Beispiel

:root {
  --akzentfarbe: #f00; /* red */
 }
 h1 {
  color: var(--akzentfarbe);
 }

.hinweis {
  border-left: medium solid var(--akzentfarbe);
}

Im root-Selektor wird eine custom property --akzentfarbe festgelegt.
Sowohl die Überschrift h1 als auch Elemente mit der Klasse hinweis verwenden nun diese Eigenschaft, die über die var()-Funktion aufgerufen wird. So kann die Akzentfarbe bei einem späteren Makeover zentral geändert werden.

Beachten Sie: Custom properties

• sind case-sensitive, d. h. Sie müssen äußerst sorgfältig auf Klein- und Großschreibung achten.
• können nur an Stelle von Werten und nicht für Eigenschaftsnamen verwendet werden.
• sind keine Variablen. Man kann sie definieren, sie werden entsprechend den Regeln für Spezifität und Kaskade vererbt und ein geerbtes custom property kann wie eine normale CSS Eigenschaften wieder überschrieben werden.
• dürfen im Namen jedes Zeichen enthalten. Aber: Die Zeichen im ASCII-Bereich (Code 0-127) mit Ausnahme von a-z, A-Z, 0-9, Minus und Unterstrich müssen als CSS Escapesequenz maskiert werden.

Weblinks

• W3C: Using Cascading Variables: the var() notation
• MDN: var()

Siehe auch

• CSS/Custom properties (CSS-Variablen)
• SVG-Uhr, die die Zeit mit CSS-Variablen setzt

CSS-Formatierung des Shadow DOM

Das SVG-use-Element kann aus beliebig vielen Teil-Elementen bestehen, die im Shadow DOM vorhanden sind, aber nicht durch CSS formatiert werden können. Mit Custom properties können auch einzelne Bestandteile des use-Elements formatiert werden.

→ Styling des use-Elements]