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 auch "CSS-Variable" genannt) anstelle eines beliebigen Teils eines Wertes einer anderen Eigenschaft einzufügen.
Probieren Sie es aus
Die var()
-Funktion kann nicht in Eigenschaftsnamen, Selektoren oder etwas anderem als Eigenschaftswerten verwendet werden. (Dies führt normalerweise zu ungültiger Syntax oder einem Wert, dessen Bedeutung keinen Bezug zur Variablen hat.)
Syntax
/* Simple 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, #FF0000);
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 Rückfallwert. Wenn die benutzerdefinierte Eigenschaft, die durch das erste Argument referenziert wird, nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht, verwendet die Funktion den zweiten Wert.
Die Syntax des Rückfalls, ähnlich wie die von benutzerdefinierten Eigenschaften, erlaubt Kommas. Zum Beispiel definiert var(--foo, red, blue)
einen Rückfall von red, blue
; das heißt, alles zwischen dem ersten Komma und dem Ende der Funktion wird als Rückfallwert betrachtet.
Werte
<custom-property-name>
-
Der Name einer benutzerdefinierten Eigenschaft, die durch einen Bezeichner dargestellt wird, der mit zwei Bindestrichen beginnt. Benutzerdefinierte Eigenschaften sind ausschließlich zur Verwendung durch Autoren und Benutzer gedacht; CSS wird ihnen niemals eine andere Bedeutung geben als die hier dargestellte.
<declaration-value>
-
Der Rückfallwert der benutzerdefinierten Eigenschaft, der verwendet wird, wenn die benutzerdefinierte Eigenschaft nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht. Dieser Wert kann jedes Zeichen enthalten, außer einigen Zeichen mit spezieller Bedeutung wie Zeilenumbrüchen, nicht übereinstimmenden schließenden Klammern, d.h.,
)
,]
oder}
, Semikolons auf oberster Ebene oder Ausrufezeichen. Der Rückfallwert kann selbst eine benutzerdefinierte Eigenschaft sein, die dievar()
-Syntax verwendet. Wenn der Rückfallwert weggelassen wird und die benutzerdefinierte Eigenschaft nicht definiert ist, löst sich dievar()
-Funktion zu einem ungültigen Wert auf.Note:
var(--a,)
ist gültig und gibt an, dass, wenn die benutzerdefinierte Eigenschaft--a
nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht, dievar()
durch nichts ersetzt werden sollte.
Formale Syntax
<var()> =
var( <custom-property-name> , <declaration-value>? )
Beispiele
Verwendung einer benutzerdefinierten Eigenschaft auf :root
CSS
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
Ergebnis
Hier wurde der Wert der background-color
-Eigenschaft über die benutzerdefinierte Eigenschaft --main-bg-color
festgelegt. Somit wird die Hintergrundfarbe des HTML-Bodys rosa sein.
Verwendung einer benutzerdefinierten Eigenschaft, bevor sie gesetzt wird
CSS
body {
background-color: var(--main-bg-color);
}
:root {
--main-bg-color: pink;
}
Ergebnis
In diesem Beispiel wird die Hintergrundfarbe des HTML-Bodys rosa, obwohl die benutzerdefinierte Eigenschaft später gesetzt wird.
Verwendung einer benutzerdefinierten Eigenschaft, die in einer anderen Datei gesetzt 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
Die Hintergrundfarbe des HTML-Bodys wird in diesem Fall rosa sein, obwohl die benutzerdefinierte Eigenschaft in einer anderen Datei deklariert ist.
Benutzerdefinierte Eigenschaften mit Rückfallen zur Verwendung, wenn die Eigenschaft nicht gesetzt ist
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: #080;
}
Ergebnis
Da --header-color
nicht gesetzt ist, wird der Text "Header" blau, der Rückfallwert.
Verwendung einer benutzerdefinierten Eigenschaft als Rückfall
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, wird die background-color
des Körpers auf --backup-bg-color
zurückfallen, was teal ist.
Ungültige Werte
var()
-Funktionen können zu ungültigen Werten aufgelöst werden, wenn:
- Die benutzerdefinierte Eigenschaft nicht definiert ist und kein Rückfallwert bereitgestellt wird.
- Die benutzerdefinierte Eigenschaft definiert ist, aber ihr Wert ein ungültiger Wert für die Eigenschaft ist, in der sie verwendet wird.
Wenn dies passiert, wird die Eigenschaft so behandelt, als hätte sie den Wert unset
. Dies liegt daran, dass Variablen nicht "frühzeitig scheitern" können wie andere Syntaxfehler, so dass der Benutzeragent, wenn er erkennt, dass ein Eigenschaftswert ungültig ist, die anderen kaskadierenden Werte bereits verworfen hat.
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 einem ungültigen literalen Farbwert bleibt rot, weil die Deklaration color: 20px
einfach ignoriert wird.
Spezifikationen
Specification |
---|
CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
env(…)
– schreibgeschützte Umgebungsvariablen, die vom Benutzeragenten gesteuert werden.- Verwendung von CSS-Benutzerdefinierten Eigenschaften (Variablen)
@property
- At-Regel- CSS-Benutzerdefinierte Eigenschaften für kaskadierende Variablen-Modul