CSS-Eigenschaften und Werte API

Das CSS Properties and Values API-Modul definiert eine Methode zum Registrieren neuer CSS-Eigenschaften, zur Definition des Datentyps der Eigenschaft, ihres Vererbungsverhaltens und optional eines Anfangswerts. Diese API erweitert das Modul CSS Custom Properties für kaskadierende Variablen, das es Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mit der Syntax mit zwei Bindestrichen (--) zu definieren. Die CSS Properties and Values API ist Teil des CSS Houdini-Pakets von APIs.

Benutzerdefinierte Eigenschaften ermöglichen die Wiederverwendung von Werten in einem Projekt, um komplexe oder sich wiederholende Stylesheets zu vereinfachen. Grundlegende benutzerdefinierte Eigenschaften werden im Modul CSS Custom Properties für kaskadierende Variablen definiert. Die CSS Properties and Values API erweitert dieses Modul, indem sie das Hinzufügen von Metadaten zu benutzerdefinierten Eigenschaften in CSS mit der @property-Regel ermöglicht oder alternativ die Verwendung der CSS.registerProperty-Methode in JavaScript.

Ob in CSS oder JavaScript registriert: 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 Kontrolle der Vererbung.

Die Registrierung benutzerdefinierter Eigenschaften mittels der CSS Properties and Values API ist robuster als die grundlegendere CSS-Kaskadenvariable-Erklärung benutzerdefinierter Eigenschaften, insbesondere wenn es um das Übergang und die Animation von Werten geht. Browser können zwischen benutzerdefinierten Werten dieses Typs interpolieren, während Eigenschaften, die die Syntax mit zwei Bindestrichen (--) verwenden, sich eher wie ein String-Ersatz verhalten.

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 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 benutzerdefinierten 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 zu aquamarine über zwei Sekunden (linear-gradient(to right, aquamarine, lavenderblush)).

Referenz

At-Regeln und Deskriptoren

@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 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: 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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden