`var()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.

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 etwas anderem außer Eigenschaftswerten verwendet werden. (Dies führt in der Regel zu ungültiger Syntax oder zu einem Wert, dessen Bedeutung keinen Bezug zur Variable hat.)

Syntax

css

/* 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 Rückfallwert. Wenn 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 Rückfalls ermöglicht, ähnlich wie bei benutzerdefinierten Eigenschaften, Kommata. Zum Beispiel definiert var(--foo, red, blue) einen Rückfallwert 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, dargestellt durch einen Bezeichner, der mit zwei Bindestrichen beginnt. Benutzerdefinierte Eigenschaften sind ausschließlich für die Verwendung durch Autoren und Benutzer vorgesehen; CSS wird ihnen niemals eine Bedeutung über das hinaus geben, was hier dargestellt wird.
<declaration-value>: Der Rückfallwert der benutzerdefinierten Eigenschaft, der verwendet wird, falls die benutzerdefinierte Eigenschaft nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht. Dieser Wert kann jedes Zeichen enthalten, mit Ausnahme einiger Zeichen mit spezieller Bedeutung wie Zeilenumbrüchen, nicht übereinstimmenden schließenden Klammern, d.h. ), ] oder }, oberste Semikolons oder Ausrufezeichen. Der Rückfallwert kann selbst eine benutzerdefinierte Eigenschaft unter Verwendung der var()-Syntax sein. Wenn der Rückfallwert weggelassen wird und die benutzerdefinierte Eigenschaft nicht definiert ist, löst die var()-Funktion sich in einen ungültigen Wert auf.

Hinweis: var(--a,) ist gültig und gibt an, dass, wenn die benutzerdefinierte Eigenschaft --a nicht definiert ist oder einem CSS-weiten Schlüsselwort entspricht, die var() durch nichts ersetzt werden sollte.

Formale Syntax

<var()> = 
  var( <custom-property-name> , <declaration-value>? )

Beispiele

Verwendung einer benutzerdefinierten Eigenschaft auf :root

CSS

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. So wird die Hintergrundfarbe des HTML-Körpers rosa sein.

Verwendung einer benutzerdefinierten Eigenschaft, bevor sie gesetzt ist

CSS

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 sein, obwohl die benutzerdefinierte Eigenschaft später gesetzt wird.

Verwendung einer benutzerdefinierten Eigenschaft, die in einer anderen Datei gesetzt ist

HTML

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

css

/* 1.css */
body {
  background-color: var(--main-bg-color);
}

css

/* 2.css */
:root {
  --main-bg-color: pink;
}

Ergebnis

Die Hintergrundfarbe des HTML-Körpers wird in diesem Fall rosa sein, obwohl die benutzerdefinierte Eigenschaft in einer anderen Datei deklariert wird.

Benutzerdefinierte Eigenschaften mit Rückfalleinstellungen, falls die Eigenschaft nicht gesetzt wurde

HTML

html

<div class="component">
  <h1 class="header">Header</h1>
  <p class="text">Text</p>
</div>

CSS

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 gesetzt ist, wird der Text "Header" blau sein, der Rückfallwert.

Verwendung einer benutzerdefinierten Eigenschaft als Rückfall

CSS

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, welches türkis ist, zurückfallen.

Ungültige Werte

var()-Funktionen können in ungültige Werte 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 behandelt, als hätte sie den Wert unset. Dies liegt daran, dass Variablen nicht "frühzeitig fehlschlagen" können, wie andere Syntaxfehler es können, sodass, wenn der User-Agent erkennt, dass ein Eigenschaftswert ungültig ist, bereits die anderen kaskadierten Werte verworfen wurden.

Zum Beispiel:

HTML

html

<p class="p1">Undefined variable</p>
<p class="p2">Invalid variable</p>
<p class="p3">Invalid literal color</p>

CSS

css

p {
  color: red;
}

.p1 {
  color: var(--invalid-color);
}

.p2 {
  --invalid-color: 20px;
  color: var(--invalid-color);
}

.p3 {
  color: 20px;
}

Ergebnis

Beachten Sie, dass die Absätze mit var() auf das Standard-Schwarz zurückgesetzt werden, während der Absatz mit einem ungültigen literalen Farbwert weiterhin rot ist, da die color: 20px-Deklaration einfach ignoriert wird.