Custom properties (--*): CSS variables

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Some parts of this feature may have varying levels of support.

Eigenschaftsnamen, die mit -- beginnen, wie --example-name, stehen für benutzerdefinierte Eigenschaften, die einen Wert enthalten, der in anderen Deklarationen unter Verwendung der var()-Funktion verwendet werden kann.

Benutzerdefinierte Eigenschaften sind auf das/die Element(e) beschränkt, auf denen sie deklariert sind, und nehmen an der Kaskadierung teil: Der Wert einer solchen benutzerdefinierten Eigenschaft stammt aus der Deklaration, die nach dem Algorithmus der Kaskadierung ausgewählt wurde.

Anfangswertsiehe Text
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben, wobei Variablen ersetzt werden
Animationstypdiskret

Syntax

css
--some-keyword: left;
--some-color: #0000ff;
--some-complex-value: 3px 6px rgb(20 32 54);
<declaration-value>

Dieser Wert entspricht jeder Sequenz von einem oder mehreren Tokens, solange die Sequenz kein unzulässiges Token enthält. Er repräsentiert die Gesamtheit dessen, was eine gültige Deklaration als Wert haben kann.

Hinweis: Namen für benutzerdefinierte Eigenschaften sind Groß-/Kleinschreibung empfindlich — --my-color wird als separate benutzerdefinierte Eigenschaft zu --My-color behandelt.

Beispiel

HTML

html
<p id="firstParagraph">
  This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
  This paragraph should have a yellow background and blue text.
</p>
<div id="container">
  <p id="thirdParagraph">
    This paragraph should have a green background and yellow text.
  </p>
</div>

CSS

css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Ergebnis

Spezifikationen

Specification
CSS Custom Properties for Cascading Variables Module Level 1
# defining-variables

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch