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 beliebigen Teils eines Werts 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 allem anderen außer Eigenschaftswerten verwendet werden. (Dies führt normalerweise zu ungültiger Syntax oder zu einem Wert, dessen Bedeutung keinen Zusammenhang mit der Variablen 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 zu ersetzenden benutzerdefinierten Eigenschaft. Ein optionales zweites Argument der Funktion dient als Fallback-Wert. 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 Fallbacks, ähnlich der von benutzerdefinierten Eigenschaften, erlaubt Kommata. Zum Beispiel: var(--foo, red, blue) definiert 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 für Autoren und Benutzer bestimmt; CSS wird ihnen niemals eine andere Bedeutung geben als hier beschrieben.
<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 kann jedes Zeichen enthalten, außer einigen Zeichen mit spezieller Bedeutung wie Zeilenumbrüchen, nicht übereinstimmenden schließenden Klammern, d.h. ), ], oder }, obersten Semikolons oder Ausrufezeichen. Der Fallback-Wert kann selbst eine benutzerdefinierte Eigenschaft unter Verwendung der var()-Syntax sein. Wenn der Fallback-Wert weggelassen wird und die benutzerdefinierte Eigenschaft nicht definiert ist, löst die var()-Funktion 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() ersetzt werden sollte durch nichts.

Formale Syntax

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

Beispiele

Verwendung einer benutzerdefinierten Eigenschaft, die auf :root gesetzt ist

CSS

css

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

Ergebnis

Hier wurde der Wert der Eigenschaft background-color über die benutzerdefinierte Eigenschaft --main-bg-color gesetzt. So wird die Hintergrundfarbe des HTML-Körpers pink sein.

Verwendung einer benutzerdefinierten Eigenschaft, bevor sie gesetzt wird

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 pink sein, auch wenn 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 pink sein, auch wenn die benutzerdefinierte Eigenschaft in einer anderen Datei deklariert ist.

Benutzerdefinierte Eigenschaften mit Fallbacks für die Verwendung, wenn 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 Fallback-Wert.

Verwendung einer benutzerdefinierten Eigenschaft als Fallback

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, fällt die background-color des Körpers auf --backup-bg-color zurück, was 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, ein ungültiger Wert ist.

Wenn dies passiert, wird die Eigenschaft so behandelt, als hätte sie den Wert unset. Dies liegt daran, dass Variablen nicht "frühzeitig fehlschlagen" können wie andere Syntaxfehler, sodass der Benutzeragent, wenn er feststellt, dass ein Eigenschaftswert ungültig ist, die anderen angelagerten Werte bereits verworfen hat.

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, wie die Absätze, die var() verwenden, auf die Standardfarbe Schwarz zurückgesetzt werden, aber der Absatz mit einer ungültigen literalen Farbe bleibt rot, da die Deklaration color: 20px 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 Benutzer-Agenten kontrolliert werden.
Verwendung von CSS benutzerdefinierten Eigenschaften (Variablen)
@property At-Regel
CSS Custom Properties für kaskadierende Variablen Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden