CSS var()-Funktion
Beispiel
Definieren Sie ein Attribut namens "--main-bg-color", dann verwenden Sie die Funktion var(), um dieses Attribut aufzurufen:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Selbst ausprobieren »
Definition und Verwendung
Die Funktion var() wird verwendet, um Werte benutzerdefinierter Eigenschaften einzufügen. Diese Methode ist nützlich, wenn ein Eigenschaftswert an mehreren Stellen verwendet wird.
Unterstützte Version: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Versionsnummer an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-Syntax
var(custom-property-name, value)
| Wert | Beschreibung |
|---|---|
| custom-property-name | Erforderlich. Der Name der benutzerdefinierten Eigenschaft, der mit -- beginnen muss. |
| value | Optional. Ein Fallback-Wert, der verwendet wird, wenn die Eigenschaft nicht existiert. |
Weitere Beispiele
Beispiel
Verwenden Sie die Funktion var(), um mehrere benutzerdefinierte Werte aufzurufen:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Selbst ausprobieren »
Weitere Erweiterungen