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.

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});

.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}

<div class="box"><p>Linear gradient with transition</p></div>

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

@property
- syntax-Deskriptor
  - + und #-Multiplikatoren
  - |-Kombinator
- inherits-Deskriptor
- initial-value-Deskriptor

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.

Spezifikationen

Specification
CSS Properties and Values API Level 1