CSS: registerProperty() statische Methode
Baseline 2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die CSS.registerProperty()
statische Methode registriert benutzerdefinierte Eigenschaften, was die Typprüfung der Eigenschaften, Standardwerte und Eigenschaften, die ihren Wert erben oder nicht erben, ermöglicht.
Das Registrieren einer benutzerdefinierten Eigenschaft erlaubt es Ihnen, dem Browser mitzuteilen, wie sich die benutzerdefinierte Eigenschaft verhalten soll; welche Typen erlaubt sind, ob die benutzerdefinierte Eigenschaft ihren Wert erbt und was der Standardwert der benutzerdefinierten Eigenschaft ist.
Syntax
CSS.registerProperty(propertyDefinition)
Parameter
propertyDefinition
-
Ein Objekt, das die folgenden Eigenschaften enthält:
name
-
Ein String, der den Namen der definierten Eigenschaft darstellt.
syntax
Optional-
Ein String, der die erwartete Syntax der definierten Eigenschaft darstellt. Standardmäßig auf
"*"
. inherits
-
Ein boolescher Wert, der definiert, ob die definierte Eigenschaft vererbt werden soll (
true
), oder nicht (false
). Standardmäßigfalse
. initialValue
Optional-
Ein String, der den Anfangswert der definierten Eigenschaft darstellt.
Rückgabewert
undefined
.
Ausnahmen
InvalidModificationError
DOMException
-
Der angegebene
name
wurde bereits registriert. SyntaxError
DOMException
-
Der angegebene
name
ist kein gültiger benutzerdefinierter Eigenschaftsname (beginnt mit zwei Bindestrichen, z. B.--foo
). TypeError
-
Die erforderlichen
name
- und/oderinherits
-Wörterbuchmitglieder wurden nicht bereitgestellt.
Beispiele
Folgendes registriert eine benutzerdefinierte Eigenschaft, --my-color
, mit registerProperty()
, als Farbe, gibt ihr einen Standardwert und lässt sie ihren Wert nicht erben:
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
In diesem Beispiel wurde die benutzerdefinierte Eigenschaft --my-color
mit der Syntax <color>
registriert. Wir können diese Eigenschaft nun verwenden, um einen Übergang eines Verlaufs bei Hover oder Fokus zu erzielen. Beachten Sie, dass der Übergang mit der registrierten Eigenschaft funktioniert, aber nicht mit der nicht registrierten Eigenschaft!
.registered {
--my-color: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--my-color));
transition: --my-color 1s ease-in-out;
}
.registered:hover,
.registered:focus {
--my-color: #b4d455;
}
.unregistered {
--unregistered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--unregistered));
transition: --unregistered 1s ease-in-out;
}
.unregistered:hover,
.unregistered:focus {
--unregistered: #b4d455;
}
button {
font-size: 3vw;
}
Wir können diese Stile zu einigen Schaltflächen hinzufügen:
<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>
Spezifikationen
Specification |
---|
CSS Properties and Values API Level 1 # the-registerproperty-function |
Browser-Kompatibilität
BCD tables only load in the browser