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 Eigenschaften, des Verhaltens bei Vererbung und optional eines Anfangswerts. Dieses API erweitert das Modul CSS-Benutzereigenschaften für kaskadierende Variablen, das Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mithilfe der Zwei-Strich-Syntax (--) zu definieren. Die CSS Eigenschaften- und Werte-API ist Teil der CSS Houdini Sammlung von APIs.

Benutzerdefinierte Eigenschaften ermöglichen die Wiederverwendung von Werten in einem Projekt, um komplexe oder repetitive 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 und ermöglicht es, Metadaten zu benutzerdefinierten Eigenschaften mithilfe von CSS mit der @property-At-Regel hinzuzufügen oder alternativ die CSS.registerProperty-Methode von JavaScript zu verwenden.

Egal, ob sie mit CSS oder JavaScript registriert werden, das Setzen von Metadaten auf benutzerdefinierten Eigenschaften ermöglicht 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 Eigenschaften- und Werte-API ist robuster als die grundlegende Erklärung von benutzerdefinierten CSS-Kaskadenvariablen, besonders wenn es um das Übergang von und die Animation von Werten geht, da Browser zwischen benutzerdefinierten Werten dieser Art interpolieren können, während Eigenschaften, die die Zwei-Strich-Syntax (--) verwenden, sich mehr wie Stringersetzungen 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 untenstehende 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 Gradient von --stop-color (der benutzerdefinierten 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, wechselt --stop-color in 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

Registrierung von benutzerdefinierten CSS-Eigenschaften: Behandelt, wie CSS-Benutzereigenschaften mit der @property-At-Regel registriert werden und erklärt die Vorteile davon.
Verwendung der CSS Eigenschaften- und Werte-API: Erklärt, wie man benutzerdefinierte Eigenschaften in CSS und JavaScript registriert, mit Hinweisen 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 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