CSS properties and values API

Das Modul CSS properties and values API definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, zur Definition des Datentyps der Eigenschaft, des Vererbungssverhaltens und optional eines Anfangswertes. Diese API baut auf dem Modul CSS custom properties for cascading variables auf, das es Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mithilfe der Zwei-Bindestrich-Syntax (--) zu definieren. Die CSS properties and values API ist Teil der CSS Houdini API-Gruppe.

Benutzerdefinierte Eigenschaften ermöglichen es, Werte in einem Projekt wiederzuverwenden, um komplexe oder wiederkehrende Stylesheets zu vereinfachen. Grundlegende benutzerdefinierte Eigenschaften werden im Modul CSS custom properties for cascading variables definiert. Die CSS properties and values API erweitert dieses Modul und ermöglicht es, Metadaten zu benutzerdefinierten Eigenschaften mit CSS mittels der @property At-Regel oder alternativ mit der JavaScript-Methode CSS.registerProperty hinzuzufügen.

Ob mit CSS oder JavaScript registriert, das Setzen von Metadaten auf benutzerdefinierte Eigenschaften bietet einen erwarteten Datentyp, den der Browser je nach Kontext verwenden kann, definiert einen Anfangswert und ermöglicht die Kontrolle der Vererbung.

Die Registrierung benutzerdefinierter Eigenschaften mit der CSS properties and values API ist robuster als die einfachere Deklaration benutzerdefinierter Eigenschaften in CSS-Cascading-Variablen, insbesondere wenn es um die Übergänge und Animationen von Werten geht, da Browser zwischen benutzerdefinierten Werten dieses Typs interpolieren können, während Eigenschaften, die die Zwei-Bindestrich-Syntax (--) verwenden, sich eher wie eine Zeichenersetzung verhalten.

Properties and values API in Aktion

Um zu sehen, wie benutzerdefinierte Eigenschaften und Werte mittels API verwendet werden können, fahren Sie mit dem Mauszeiger über das folgende Feld.

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 benutzerdefinierten Eigenschaft) zu lavenderblush besteht. Der Wert von --stop-color ist zunächst auf cornflowerblue gesetzt, aber wenn Sie mit dem Mauszeiger über das Feld fahren, wechselt --stop-color innerhalb von zwei Sekunden zu aquamarine (linear-gradient(to right, aquamarine, lavenderblush)).

Referenz

At-Regeln

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

Schnittstellen und APIs

Leitfäden

Verwendung der CSS properties and values 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.
Houdini APIs: Erklärt, was CSS Houdini ist und seine Vorteile, zusammen mit einer Liste der verfügbaren APIs und deren Status.

Spezifikationen

Specification
CSS Properties and Values API Level 1