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, des 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 Zwei-Bindestrich-Syntax (--) zu definieren. Die CSS-Eigenschaften und -Werte API ist Teil des CSS Houdini Rahmens von APIs.

Benutzerdefinierte Eigenschaften ermöglichen es Ihnen, Werte in einem Projekt wiederzuverwenden, um komplexe oder sich wiederholende Stylesheets zu vereinfachen. Grundlegende benutzerdefinierte Eigenschaften sind im Modul CSS-Custom Properties für kaskadierende Variablen definiert. Die CSS-Eigenschaften und -Werte API erweitert dieses Modul, indem es ermöglicht, Metadaten zu benutzerdefinierten Eigenschaften mit CSS über die @property-At-Regel oder alternativ über die JavaScript-Methode CSS.registerProperty hinzuzufügen.

Egal, ob mit CSS oder JavaScript registriert, das Angeben von Metadaten für benutzerdefinierte Eigenschaften sorgt für einen erwarteten Datentyp, den der Browser je nach Kontext verwenden kann, definiert einen Anfangswert und ermöglicht die Kontrolle der Vererbung.

Die Registrierung von benutzerdefinierten Eigenschaften mit der CSS-Eigenschaften und -Werte API ist robuster als die einfachere CSS-Kaskadenvariablen-Deklaration benutzerdefinierter Eigenschaften, insbesondere wenn es um das Überleiten und Animieren von Werten geht, da Browser zwischen benutzerdefinierten Werten dieses Typs interpolieren können, während Eigenschaften, die die Zwei-Bindestrich-Syntax (--) verwenden, mehr wie eine Zeichenkettensubstitution wirken.

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 Verlauf von --stop-color (der benutzerdefinierten Eigenschaft) zu lavenderblush besteht. Der Wert von --stop-color ist zunächst auf cornflowerblue gesetzt, aber wenn Sie über das Feld fahren, wechselt --stop-color über zwei Sekunden zu aquamarine (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 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 ihrer 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