CSS-Eigenschaften-und-Werte-API

Das CSS-Eigenschaften-und-Werte-API-Modul definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, zur Definition des Datentyps der Eigenschaft, ihres Vererbungsschemas und, optional, eines Anfangswerts. Diese API erweitert das Modul CSS-Benutzereigenschaften 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 Gruppe von APIs.

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-Benutzereigenschaften für kaskadierende Variablen definiert. Die CSS-Eigenschaften-und-Werte-API erweitert dieses Modul, indem sie das Hinzufügen von Metadaten zu benutzerdefinierten Eigenschaften in CSS mit der @property At-Regel oder alternativ mit der JavaScript-Methode CSS.registerProperty ermöglicht.

Unabhängig davon, ob mit CSS oder JavaScript registriert, ermöglicht das Setzen von Metadaten auf benutzerdefinierten Eigenschaften, einen erwarteten Datentyp anzugeben, den der Browser je nach Kontext verwenden kann, einen Anfangswert zu definieren und die Vererbung zu steuern.

Die Registrierung benutzerdefinierter Eigenschaften der CSS-Eigenschaften-und-Werte-API ist robuster als die einfachere CSS-Deklaration benutzerdefinierter kaskadierender Variableneigenschaften, insbesondere wenn es um die Übergänge und Animationen von Werten geht, da Browser zwischen benutzerdefinierten Werten dieser Art interpolieren können, während Eigenschaften, die die Zwei-Strich-Syntax (--) verwenden, mehr wie eine String-Ersetzung funktionieren.

Eigenschaften-und-Werte-API in Aktion

Um zu sehen, wie benutzerdefinierte Eigenschaften und Werte über die API verwendet werden können, bewegen Sie den 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>

Der Kasten 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 den Mauszeiger über das Feld bewegen, 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-Eigenschaften-und-Werte-API: Erklärt, wie man benutzerdefinierte Eigenschaften in CSS und JavaScript registriert, 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 seine Vorteile, zusammen mit einer Liste verfügbarer APIs und deren Status.

Spezifikationen

Specification
CSS Properties and Values API Level 1