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.
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 dem/denen sie deklariert sind, und nehmen an der Kaskade teil: Der Wert einer solchen benutzerdefinierten Eigenschaft ergibt sich aus der Deklaration, die durch den kaskadierenden Algorithmus bestimmt wird.
| Anfangswert | siehe Text |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben, wobei Variablen ersetzt werden |
| Animationstyp | diskret |
Syntax
--some-keyword: left;
--some-color: #123456;
--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:
Benutzerdefinierte Eigenschaftsnamen sind case-sensitive — --my-color wird als eine separate benutzerdefinierte Eigenschaft zu --My-color behandelt.
Beispiel
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
:root {
--first-color: #1166ff;
--second-color: #ffff77;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #229900;
}
#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
Loading…
Siehe auch
- Die
var()-Funktion @property-Regel- Verwendung von CSS-Benutzerdefinierten Eigenschaften (Variablen) Leitfaden
- CSS-Benutzerdefinierte Eigenschaften für kaskadierende Variablen Modul