var()
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.
Die var()-CSS-Funktion kann verwendet werden, um den Wert einer benutzerdefinierten Eigenschaft (manchmal als "CSS-Variable" bezeichnet) anstelle eines Teils eines Wertes einer anderen Eigenschaft einzufügen.
Probieren Sie es aus
border-color: var(--color-a);
border-color: var(--color-b);
border-color: var(--color-c);
<section class="default-example" id="default-example">
<div id="example-element">
Three color options have been set on the :root use these to change the
border color.
</div>
</section>
:root {
--color-a: pink;
--color-b: green;
--color-c: rebeccapurple;
}
#example-element {
border: 10px solid black;
padding: 10px;
}
Die var()-Funktion kann nicht in Eigenschaftsnamen, Selektoren oder anderen Bereichen außerhalb von Eigenschaftswerten verwendet werden. (Die Verwendung führt gewöhnlich zu ungültiger Syntax oder zu einem Wert, dessen Bedeutung keinen Bezug zur Variablen hat.)
Syntax
/* Basic usage */
var(--custom-prop);
/* With fallback */
var(--custom-prop,); /* empty value as fallback */
var(--custom-prop, initial); /* initial value of the property as fallback */
var(--custom-prop, red);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));
Das erste Argument der Funktion ist der Name der benutzerdefinierten Eigenschaft, die ersetzt werden soll. Ein optionales zweites Argument der Funktion dient als Fallback-Wert. Falls die durch das erste Argument referenzierte benutzerdefinierte Eigenschaft nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht, verwendet die Funktion den zweiten Wert.
Die Syntax des Fallbacks erlaubt wie bei benutzerdefinierten Eigenschaften Kommas. Zum Beispiel definiert var(--foo, red, blue) einen Fallback von red, blue; das heißt, alles zwischen dem ersten Komma und dem Ende der Funktion wird als Fallback-Wert betrachtet.
Werte
<custom-property-name>-
Der Name der benutzerdefinierten Eigenschaft, dargestellt durch einen Bezeichner, der mit zwei Bindestrichen beginnt. Benutzerdefinierte Eigenschaften sind ausschließlich für die Verwendung durch Autoren und Benutzer bestimmt; CSS wird ihnen nie eine Bedeutung über das hier Präsentierte hinaus geben.
<declaration-value>-
Der Fallback-Wert der benutzerdefinierten Eigenschaft, der verwendet wird, falls die benutzerdefinierte Eigenschaft nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht. Dieser Wert darf jedes Zeichen außer einigen mit spezieller Bedeutung wie Zeilenumbrüchen, nicht übereinstimmenden schließenden Klammern, d.h.
),]oder}, höchsten Ebenen Semikolons oder Ausrufezeichen enthalten. Der Fallback-Wert kann selbst eine benutzerdefinierte Eigenschaft unter Verwendung dervar()-Syntax sein. Falls der Fallback-Wert weggelassen wird und die benutzerdefinierte Eigenschaft nicht definiert ist, löst dievar()-Funktion auf einen ungültigen Wert auf.Hinweis:>
var(--a,)ist gültig und gibt an, dass, wenn die benutzerdefinierte Eigenschaft--anicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht,var()durch nichts ersetzt werden sollte.
Formale Syntax
<var()> =
var( <custom-property-name> , <declaration-value>? )
Beispiele
Verwendung einer benutzerdefinierten Eigenschaft, die auf :root festgelegt ist
CSS
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
Ergebnis
Hier wird der Wert der background-color-Eigenschaft über die benutzerdefinierte Eigenschaft --main-bg-color eingestellt. Dadurch wird die Hintergrundfarbe des HTML-Körpers rosa.
Verwendung einer benutzerdefinierten Eigenschaft, bevor sie festgelegt ist
CSS
body {
background-color: var(--main-bg-color);
}
:root {
--main-bg-color: pink;
}
Ergebnis
In diesem Beispiel wird die Hintergrundfarbe des HTML-Körpers rosa, obwohl die benutzerdefinierte Eigenschaft später festgelegt wird.
Verwendung einer benutzerdefinierten Eigenschaft, die in einer anderen Datei festgelegt ist
HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body></body>
</html>
CSS
/* 1.css */
body {
background-color: var(--main-bg-color);
}
/* 2.css */
:root {
--main-bg-color: pink;
}
Ergebnis
In diesem Fall wird die Hintergrundfarbe des HTML-Körpers rosa, obwohl die benutzerdefinierte Eigenschaft in einer anderen Datei deklariert ist.
Benutzerdefinierte Eigenschaften mit Fallbacks für den Fall, dass die Eigenschaft nicht gesetzt wurde
HTML
<div class="component">
<h1 class="header">Header</h1>
<p class="text">Text</p>
</div>
CSS
/* In the component's style: */
.component .header {
/* header-color isn't set, and so remains blue, the fallback value */
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* In the larger application's style: */
.component {
--text-color: #008800;
}
Ergebnis
Da --header-color nicht festgelegt ist, wird der Text "Header" blau, der Fallback-Wert.
Verwendung einer benutzerdefinierten Eigenschaft als Fallback
CSS
:root {
--backup-bg-color: teal;
}
body {
background-color: var(--main-bg-color, var(--backup-bg-color, white));
}
Ergebnis
Da --main-bg-color nicht gesetzt ist, fällt die background-color des Körpers auf --backup-bg-color zurück, die türkis ist.
Ungültige Werte
var()-Funktionen können auf ungültige Werte auflösen, wenn:
- Die benutzerdefinierte Eigenschaft nicht definiert ist und kein Fallback-Wert bereitgestellt wird.
- Die benutzerdefinierte Eigenschaft definiert ist, aber ihr Wert für die Eigenschaft, in der sie verwendet wird, ungültig ist.
Wenn dies geschieht, wird die Eigenschaft behandelt, als hätte sie den Wert unset. Das liegt daran, dass Variablen nicht „frühzeitig fehlschlagen“ können, wie es bei anderen Syntaxfehlern der Fall ist. Wenn der Benutzeragent bemerkt, dass ein Eigenschaftswert ungültig ist, hat er die anderen kaskadierten Werte bereits verworfen.
Zum Beispiel:
HTML
<p class="p1">Undefined variable</p>
<p class="p2">Invalid variable</p>
<p class="p3">Invalid literal color</p>
CSS
p {
color: red;
}
.p1 {
color: var(--invalid-color);
}
.p2 {
--invalid-color: 20px;
color: var(--invalid-color);
}
.p3 {
color: 20px;
}
Ergebnis
Beachten Sie, wie die Absätze, die var() verwenden, auf das Standard-Schwarz zurückgesetzt werden, aber der Absatz mit einer ungültigen literalen Farbe bleibt rot, weil die color: 20px-Deklaration einfach ignoriert wird.
Spezifikationen
| Specification |
|---|
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |
Browser-Kompatibilität
Siehe auch
env(…)– schreibgeschützte Umgebungsvariablen, die vom Benutzeragenten gesteuert werden.- Verwendung von benutzerdefinierten CSS-Eigenschaften (Variablen)
@propertyAt-Regel- CSS-Benutzerdefinierte Eigenschaften für kaskadierende Variablen-Modul