CSS-Eigenschaften- und Werte-API

Das CSS-Eigenschaften- und Werte-API-Modul definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, zur Festlegung des Datentyps der Eigenschaft, des Verhaltens bei Vererbung und optional eines Anfangswerts. Diese API erweitert das CSS-Custom-Properties für kaskadierende Variablen-Modul, das es Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mit zwei Bindestrich-Syntax (--) zu definieren. Die CSS-Eigenschaften- und Werte-API ist Teil des CSS Houdini API-Dachmoduls.

Benutzerdefinierte Eigenschaften ermöglichen es, Werte über ein Projekt hinweg wiederzuverwenden, um komplexe oder sich wiederholende Stylesheets zu vereinfachen. Grundlegende benutzerdefinierte Eigenschaften werden im Modul CSS-Custom-Properties für kaskadierende Variablen definiert. Die CSS-Eigenschaften- und Werte-API erweitert dieses Modul, indem Metadaten zu benutzerdefinierten Eigenschaften in CSS mit der @property at-Regel oder alternativ mit der CSS.registerProperty Methode von JavaScript hinzugefügt werden.

Unabhängig davon, ob sie mit CSS oder JavaScript registriert werden, ermöglicht das Setzen von Metadaten auf benutzerdefinierten Eigenschaften die erwartete Verwendung eines Datentyps, den der Browser je nach Kontext nutzen kann, definiert einen Anfangswert und ermöglicht die Kontrolle der Vererbung.

Die Registrierung benutzerdefinierter Eigenschaften mittels der CSS-Eigenschaften- und Werte-API ist robuster als die grundlegendere CSS-kaskadierende-Variable-Erklärung, vor allem wenn es darum geht, Werte zu animieren oder zu transitionieren, da Browser zwischen benutzerdefinierten Werten dieses Typs interpolieren können, während Eigenschaften, die zwei Bindestrich-Syntax (--) verwenden, sich eher wie eine String-Ersetzung 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, wird --stop-color über zwei Sekunden hinweg nach aquamarine übergeblendet (linear-gradient(to right, aquamarine, lavenderblush)).

Referenz

At-Rules

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

Schnittstellen und APIs

Leitfäden

Verwendung der CSS-Eigenschaften- und Werte-API: Erklärt, wie man benutzerdefinierte Eigenschaften in CSS und JavaScript registriert, mit Hinweisen zur Handhabung undefinierter und ungültiger Werte, Fallbacks und Vererbung.
CSS Houdini: Referenzleitfaden zu Houdini-Ressourcen einschließlich der CSS-Module, API-Leitfäden und externen Ressourcen.
Houdini APIs: Erläutert, was CSS Houdini ist und welche Vorteile es bietet, zusammen mit einer Liste der verfügbaren APIs und deren Status.

Spezifikationen

Specification
CSS Properties and Values API Level 1