CSS/Funktionen/var()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 auf genaue Beachtung von Gleich- 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

Siehe auch

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.