CSS-Eigenschaften und -Werte API
Das Modul der CSS-Eigenschaften und -Werte API definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, zur Definition des Datentyps der Eigenschaft, des Vererbungsverhaltens und optional eines Anfangswertes. Diese API erweitert das Modul CSS-Custom Properties für kaskadierende Variablen, das es Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mit der Zwei-Strich-Syntax (--
) zu definieren. Die CSS-Eigenschaften und -Werte API ist Teil der CSS Houdini API-Gruppe.
Benutzerdefinierte Eigenschaften ermöglichen es, Werte in einem Projekt wiederzuverwenden, um komplexe oder sich wiederholende Stylesheets zu vereinfachen. Grundlegende benutzerdefinierte Eigenschaften sind im Modul CSS-Custom Properties für kaskadierende Variablen definiert. Die CSS-Eigenschaften und -Werte API erweitert dieses Modul, indem Metadaten zu benutzerdefinierten Eigenschaften mit CSS mithilfe des @property
-At-Regel oder alternativ mit der JavaScript-Methode CSS.registerProperty
hinzugefügt werden.
Egal, ob sie mit CSS oder JavaScript registriert werden: Das Festlegen von Metadaten auf benutzerdefinierten Eigenschaften bietet einen erwarteten Datentyp, den der Browser je nach Kontext verwenden kann, definiert einen Anfangswert und ermöglicht die Steuerung der Vererbung.
Die Registrierung benutzerdefinierter Eigenschaften mit der CSS-Eigenschaften und -Werte API ist robuster als die einfachere Erklärung benutzerdefinierter kaskadierender Variableneigenschaften, insbesondere wenn es um das Übergangs- und Animationsverhalten geht, da Browser zwischen benutzerdefinierten Werten dieses Typs interpolieren können, während Eigenschaften, die die Zwei-Strich-Syntax (--
) verwenden, sich eher wie ein String-Austausch verhalten.
Eigenschaften und Werte API in Aktion
Um zu sehen, wie benutzerdefinierte Eigenschaften und Werte über die API verwendet werden können, fahren Sie mit der Maus über das Feld unten.
Das Feld hat einen Hintergrund, der aus einem linearen Verlauf von --stop-color
(der benutzerdefinierte Eigenschaft) zu lavenderblush
besteht. Der Wert von --stop-color
ist zunächst auf cornflowerblue
gesetzt, aber wenn Sie mit der Maus über das Feld fahren, übergangt --stop-color
über zwei Sekunden nach aquamarine
(linear-gradient(to right, aquamarine, lavenderblush)
).
Referenz
At-Rules
Schnittstellen und APIs
Leitfäden
- Verwendung der CSS-Eigenschaften und -Werte API
Erklärt, wie benutzerdefinierte Eigenschaften in CSS und JavaScript registriert werden, mit Tipps zum Umgang mit undefinierten und ungültigen Werten, Fallbacks und Vererbung.
- CSS Houdini
Referenzleitfaden zu Houdini-Ressourcen einschließlich der CSS-Module, API-Leitfäden und externen Ressourcen.
- Houdini APIs
Erklärt, was CSS Houdini ist und welche Vorteile es bietet, zusammen mit einer Liste der verfügbaren APIs und ihrem Status.
Verwandte Konzepte
Spezifikationen
Specification |
---|
CSS Properties and Values API Level 1 |