CSS-Eigenschaften und Werte API

Das Modul der CSS-Eigenschaften und Werte API definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, definiert den Datentyp der Eigenschaft, das Vererbungsverhalten und optional einen Anfangswert. Diese API erweitert das Modul CSS Custom Properties für kaskadierende Variablen, das es Entwicklern erlaubt, eigene Eigenschaften in CSS mithilfe der Zwei-Strich-Syntax (--) zu definieren. Die CSS-Eigenschaften und Werte API ist Teil der CSS Houdini API-Gruppe.

Eigene Eigenschaften ermöglichen es, Werte innerhalb eines Projekts wiederzuverwenden, um komplexe oder sich wiederholende Stylesheets zu vereinfachen. Grundlegende eigene Eigenschaften sind im Modul CSS Custom Properties für kaskadierende Variablen definiert. Die CSS-Eigenschaften und Werte API erweitert dieses Modul, indem sie das Hinzufügen von Metadaten zu eigenen Eigenschaften mit CSS mithilfe der @property At-Regel oder alternativ mit der JavaScript-Methode CSS.registerProperty ermöglicht.

Unabhängig davon, ob sie mit CSS oder JavaScript registriert werden, ermöglicht das Setzen von Metadaten auf eigene Eigenschaften einen erwarteten Datentyp, den der Browser je nach Kontext verwenden kann, definiert einen Anfangswert und ermöglicht es, die Vererbung zu kontrollieren.

Die Registrierung von eigenen Eigenschaften mit der CSS-Eigenschaften und Werte API ist robuster als die einfachere Deklaration von CSS-kaskadierenden Variablen, insbesondere beim Übergang und Animieren von Werten, da Browser zwischen benutzerdefinierten Werten dieser Art interpolieren können, während Eigenschaften, die die Zwei-Strich-Syntax (--) verwenden, eher wie eine Zeichenersetzung funktionieren.

Eigenschaften und Werte API in Aktion

Um zu sehen, wie eigene Eigenschaften und Werte über die API verwendet werden können, bewegen Sie den Mauszeiger ü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 (die eigene Eigenschaft) zu lavenderblush besteht. Der Wert von --stop-color ist zunächst auf cornflowerblue gesetzt, aber wenn Sie den Mauszeiger über das Feld bewegen, übergang --stop-color über zwei Sekunden zu aquamarine (linear-gradient(to right, aquamarine, lavenderblush)).

Referenz

At-Regeln

@property
- Syntax Deskriptor
  - + und # Multiplikatoren
  - | Kombinator
- vererbt Deskriptor
- Anfangswert Deskriptor

Schnittstellen und APIs

Leitfäden

Verwendung der CSS-Eigenschaften und Werte API: Erklärt, wie man eigene Eigenschaften in CSS und JavaScript registriert, mit Hinweisen zum Umgang mit undefinierten und ungültigen Werten, Fallbacks und Vererbung.
Houdini APIs: Erklärt, 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