CSS/Funktionen/var()

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

h1 {

 color: var(--akzentfarbe, #f00);

}

Die CSS-Funktion var() enthält neben dem Variablennamen noch einen durch Komma getrennten festen Wert. Falls die Variable nicht vorhanden sein sollte, wird dieser verwendet. Ältere Browser, die var() nicht verstehen, ignorieren auch diese Angabe.

Beachten Sie:

• Custom properties sind case-sensitive, d. h. Sie müssen auf genaue Beachtung von Gleich- und Großschreibung achten.
• Variablen können nur Werte, aber keine Eigenschaften annehmen.
• Beim Funktionsaufruf darf sich innerhalb der Klammer kein Leerzeichen befinden.

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.

Hauptartikel: SVG/Tutorials/Gruppierungen#Styling des use-Elements