var()
Die var() CSS Funktion kann verwendet werden, um den Wert einer benutzerdefinierten Eigenschaft (manchmal "CSS-Variable" genannt) anstelle eines Teils eines Wertes einer anderen Eigenschaft einzusetzen.
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 #000;
padding: 10px;
}
Die var() Funktion kann nicht in Eigenschaftsnamen, Selektoren oder anderem verwendet werden, außer in Eigenschaftswerten. (Das führt normalerweise zu ungültiger Syntax oder einem Wert, dessen Bedeutung keinen Bezug zur Variable 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, #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 Fallback-Wert. 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 Fallbacks erlaubt, ebenso wie bei benutzerdefinierten Eigenschaften, Kommata. 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 einer benutzerdefinierten Eigenschaft, dargestellt durch einen Bezeichner, der mit zwei Bindestrichen beginnt. Benutzerdefinierte Eigenschaften sind ausschließlich zur Nutzung durch Autoren und Benutzer gedacht; CSS wird ihnen niemals eine Bedeutung geben, die über das hier Präsentierte hinausgeht.
<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 enthalten, außer einigen Zeichen mit spezieller Bedeutung wie Zeilenumbrüchen, nicht passenden schließenden Klammern, also
),], oder}, Semikolons auf oberster Ebene oder Ausrufezeichen. Der Fallback-Wert kann selbst eine benutzerdefinierte Eigenschaft unter Verwendung dervar()Syntax sein. Wenn der Fallback-Wert 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--anicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht, dievar()durch nichts ersetzt werden soll.
Formale Syntax
<var()> =
var( <custom-property-name> , <declaration-value>? )
Beispiele
Verwendung einer benutzerdefinierten Eigenschaft, die auf :root gesetzt ist
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 gesetzt. Daher wird die Hintergrundfarbe des HTML-Body pink sein.
Verwendung einer benutzerdefinierten Eigenschaft, bevor sie gesetzt ist
CSS
body {
background-color: var(--main-bg-color);
}
:root {
--main-bg-color: pink;
}
Ergebnis
In diesem Beispiel wird die Hintergrundfarbe des HTML-Body pink sein, 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-Body wird pink sein, auch wenn die benutzerdefinierte Eigenschaft in einer anderen Datei deklariert ist.
Benutzerdefinierte Eigenschaften mit Fallbacks zur Verwendung, wenn 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: #080;
}
Ergebnis
Da --header-color nicht gesetzt ist, wird der Text "Header" blau sein, dem Fallback-Wert entsprechend.
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 Bodys auf --backup-bg-color zurück, was teal ist.
Ungültige Werte
var() Funktionen können zu ungültigen Werten führen, wenn:
- Die benutzerdefinierte Eigenschaft nicht definiert ist und kein Fallback-Wert angegeben ist.
- Die benutzerdefinierte Eigenschaft definiert ist, aber ihr Wert ist ein ungültiger Wert für die Eigenschaft, in der sie verwendet wird.
Wenn dies geschieht, wird die Eigenschaft so behandelt, als hätte sie den Wert unset. Das liegt daran, dass Variablen nicht "frühzeitig fehlschlagen" können wie andere Syntaxfehler, so dass die Benutzeragent, wenn er erkennt, dass ein Eigenschaftswert ungültig ist, die anderen kaskadierten 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, während der Absatz mit einem ungültigen literalen Farbwert immer noch rot ist, da die color: 20px Deklaration einfach ignoriert wird.
Spezifikationen
Browser-Kompatibilität
Siehe auch
env(…)– schreibgeschützte Umgebungsvariablen, die vom Benutzeragent gesteuert werden.- Verwendung von benutzerdefinierten CSS-Eigenschaften (Variablen)
@propertyAt-Regel- CSS benutzerdefinierte Eigenschaften für kaskadierende Variablen Modul