Angenommen, Sie haben einige erste Stile für Ihre Website erstellt und dabei festgestellt, dass Sie einige Werte in Ihrem CSS wiederholen. Sie verwenden dodgerblue als Primärfarbe und fügen sie Schaltflächenrahmen, Linktext und Header-Hintergründen hinzu. Außerdem verwenden Sie ein Designtool, um einige Varianten dieses Blaus für andere Teile der Website auszuwählen. Sie erhalten dann einen Styleguide und die primäre Farbe ist jetzt oklch(70% 0.15 270).
Mit benutzerdefinierten Eigenschaften oder CSS-Variablen können Sie Werte in Ihrem CSS organisieren und wiederverwenden, sodass Ihre Formatierungen flexibler und leichter zu verstehen sind.
Properties erstellen
Am einfachsten erstellen Sie eine Property, indem Sie einen Wert für eine neue Property mit einem von Ihnen definierten Namen festlegen.
.card {
--base-size: 1em;
}
Alle Attributnamen müssen mit zwei Bindestrichen beginnen. So wird verhindert, dass Sie versuchen, einen vorhandenen CSS-Property-Namen für einen benutzerdefinierten Wert zu verwenden. In der CSS-Spezifikation wird niemals eine Eigenschaft hinzugefügt, die mit zwei Bindestrichen beginnt.
Auf diese Property kann dann mit der Funktion var() zugegriffen werden. In diesem Beispiel wird die Schriftgröße innerhalb eines .card-title auf das Doppelte des --base-size-Werts festgelegt.
.card .card-title {
font-size: calc(2 * var(--base-size));
}
Benutzerdefinierte Eigenschaft verwenden
Wie Sie gesehen haben, können Sie den Wert einer benutzerdefinierten Property mit der Funktion var() verwenden. Sie können die var()-Funktion in Werten, aber nicht in Media-Anfragen verwenden. Sie sind besonders nützlich als Argumente für andere CSS-Funktionen.
Fallbacks
Was passiert, wenn Sie versuchen, eine benutzerdefinierte Property zu verwenden, für die kein Wert festgelegt ist? Die Funktion var() verwendet einen zweiten Wert, der als Fallback-Wert verwendet wird. Der Fallback-Wert kann sogar eine andere benutzerdefinierte Property mit einer verschachtelten var() sein.
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
Ungültige Werte
Wenn eine benutzerdefinierte Eigenschaft in einen ungültigen Wert aufgelöst wird, z. B. den Wert 1em für die Eigenschaft background-color, werden andere gültige Deklarationen für diese Eigenschaft für dieses Element nicht verwendet. Das liegt daran, dass der Browser erst nach dem Verwerfen anderer Deklarationen bei der Berechnung eines Werts feststellen kann, ob ein Wert ungültig ist. Stattdessen wird ein übernommener oder Anfangswert verwendet.
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
Im vorherigen Beispiel hat das .invalid-Element keinen blauen Hintergrund. Da background-color nicht übernommen wird, ist der Wert stattdessen transparent, also der Anfangswert.
Überschreiben und Übernahme
In den meisten Fällen ist das Standardverhalten von benutzerdefinierten Attributen, bei dem Werte übernommen werden, die beste Option. Wenn Sie einen neuen Wert für eine Eigenschaft festlegen, wird dieser Wert für das Element und alle seine untergeordneten Elemente verwendet, bis er durch einen anderen Wert überschrieben wird.
Benutzerdefinierte Eigenschaften werden durch die Kaskade bestimmt und können daher auch durch einen spezifischeren Selektor überschrieben werden.
Mehr Kontrolle mit @property
Eine benutzerdefinierte Property, die durch Festlegen eines Werts erstellt wird, kann einen beliebigen Typ haben und wird vererbt. Wenn Sie mehr Kontrolle über eine benutzerdefinierte Eigenschaft haben möchten, können Sie die Regel @property verwenden.
Die zuvor erstellte --base-size-Property entspricht dieser @property-Deklaration.
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
Mit dem Wert syntax werden die Typen von CSS-Werten festgelegt, die für die Eigenschaft gültig sind. Wenn Sie für diese Eigenschaft einen anderen Typ festlegen, ist sie ungültig und es wird auf den ursprünglichen Wert oder einen geerbten Wert zurückgegriffen, der weiter oben in der Kaskade festgelegt ist.
Wenn Sie eine benutzerdefinierte Eigenschaft mit @property erstellen, können Sie die Übernahme mit inherit: false deaktivieren. Wenn Sie den Wert einer benutzerdefinierten Eigenschaft überschreiben, während die Vererbung deaktiviert ist, wird er für das ausgewählte Element, aber nicht für seine untergeordneten Elemente geändert. Das ist oft nützlich, wenn mehrere Selektoren auf dasselbe Element ausgerichtet sind.
Mit initial-value wird der Wert der Eigenschaft festgelegt, sofern er nicht später geändert wird. Sofern die Syntax nicht * ist (d. h. ein beliebiger CSS-Typ), muss für @property ein initial-value festgelegt werden. So wird sichergestellt, dass die Property immer einen Wert mit der angegebenen Syntax hat und niemals undefiniert ist.
Benutzerdefinierte Attribute mit JavaScript aktualisieren
Der Wert einer benutzerdefinierten Eigenschaft für ein Element kann mit JavaScript aktualisiert werden. So können Sie die Formatierungen Ihrer Website dynamisch aktualisieren.
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
In diesem Beispiel wird das Style-Tag für das #my-button-Element aktualisiert. Wenn Sie es in den Entwicklertools untersuchen, sehen Sie Folgendes:
<button id="my-button" style="--color: orange">Click me</button>
Im vorherigen Beispiel sehen Sie, wie Sie benutzerdefinierte Eigenschaften festlegen können, indem Sie auf Daten zugreifen, die in benutzerdefinierten HTML-Attributen gespeichert sind. Jede Schaltfläche hat ein data-color-Attribut mit dem Wert einer bestimmten Farbe. Die benutzerdefinierte Eigenschaft --background, die für das body-Element festgelegt ist, wird auf den Wert von data-color für die angeklickte Schaltfläche zurückgesetzt.
Sie können auch getComputedStyle(element).getPropertyValue("--variable") verwenden, um den Wert eines Attributs für ein bestimmtes Element abzurufen. Das kann nützlich sein, wenn Ihre Logik auf einen kaskadierten Wert reagieren muss.