Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >var()

var()

var(--name) var(--name, Ersatzwert)

Setzt den Wert einer benutzerdefinierten Eigenschaft ein. Das zweite Argument ist ein Ersatzwert für den Fall, dass die Eigenschaft nicht gesetzt ist. Sie können sie im Wert jeder Eigenschaft verwenden, auch als Teil des Werts (border: 1px solid var(--color)) oder in anderen Funktionen.

Werte

  • var(--a) – der Wert der Eigenschaft --a.
  • var(--a, #333) – ein Ersatzwert, wenn --a nicht gesetzt ist.
  • var(--a, var(--b, red)) – der Ersatzwert kann ein weiteres var() sein.
  • var(--font, Arial, sans-serif) – alles nach dem ersten Komma ist der Ersatzwert.

Beispiele

Abstände aus einer einzigen benutzerdefinierten Eigenschaft und eine Ersatzfarbe für eine Komponente, der niemand eine Farbe gesetzt hat:

<div class="panel">
  <span class="label">Keine Farbe gesetzt</span>
  <span class="label" style="--label: #43a047">Mit Grün</span>
</div>

.panel {
  --gap: 6px;
  display: flex;
  gap: calc(var(--gap) * 2);
  padding: var(--gap);
  background: #f5f5f5;
}
.label {
  padding: var(--gap) calc(var(--gap) * 2);
  border-radius: 12px;
  background: var(--label, #0088d1);
  color: #fff;
}

Das Ergebnis: ein graues Feld mit zwei Etiketten im Abstand von 12 px – das erste blau (die Ersatzfarbe), das zweite grün aus der benutzerdefinierten Eigenschaft im Attribut style.

Eine Zahl ohne Einheit in einer benutzerdefinierten Eigenschaft – die Einheit kommt durch Multiplizieren in calc() hinzu; dieselbe Zahl dient auch als Anzahl der Spalten:

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
</div>

.grid {
  --columns: 3;
  --step: 4;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: calc(var(--step) * 1px);
  max-width: 240px;
}
.grid div {
  padding: calc(var(--step) * 2px);
  background: #e3f2fd;
  text-align: center;
}
Ergebnis
1
2
3

Worauf Sie achten sollten

  • var(--x)px funktioniert nicht – es entsteht „10 px“ mit Leerzeichen, keine Länge. Die Einheit ergänzen Sie durch Multiplizieren: calc(var(--x) * 1px).
  • Der Ersatzwert greift nur, wenn die benutzerdefinierte Eigenschaft nicht gesetzt ist. Ist sie gesetzt, ergibt für die Eigenschaft aber keinen Sinn, hilft der Ersatzwert nicht und die Eigenschaft verhält sich wie unset.
  • In @media-Bedingungen, in Selektoren und in Namen von Eigenschaften funktioniert var() nicht. Auch nicht in einem url() ohne Anführungszeichen.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit April 2017, gilt als weithin verfügbar seit Oktober 2019. Ab Version: Chrome 49, Firefox 31, Safari 9.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
Benutzerdefinierte Eigenschaften (--*)
calc()
@property
:root
repeat()