CSS-Eigenschaften- und Werte-API

Das CSS properties and values API-Modul definiert eine Methode zur Registrierung neuer CSS-Eigenschaften, zur Definition des Datentyps der Eigenschaft, ihres Vererbungsverhaltens und optional eines Anfangswertes. Diese API erweitert das Modul CSS Custom Properties für kaskadierende Variablen, das es Autoren ermöglicht, benutzerdefinierte Eigenschaften in CSS mit der Zwei-Strich-Syntax (--) zu definieren. Die CSS properties and values API ist Teil der CSS Houdini API-Sammlung.

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 Metadaten zu benutzerdefinierten Eigenschaften mit CSS durch die @property-At-Regel oder alternativ mittels der JavaScript-Methode CSS.registerProperty hinzugefügt werden können.

Unabhängig davon, ob sie mit CSS oder JavaScript registriert sind, ermöglicht das Setzen von Metadaten zu benutzerdefinierten Eigenschaften einen erwarteten Datentyp, den der Browser je nach Kontext verwenden kann, definiert einen Anfangswert und gibt Ihnen die Kontrolle über die Vererbung.

Die Registrierung benutzerdefinierter Eigenschaften mit der CSS properties and values API ist robuster als die einfachere Deklaration benutzerdefinierter Eigenschaften mit CSS-Kaskadenvariablen, insbesondere wenn es um das Übergangs- und Animationsverhalten von Werten geht. Browser können zwischen benutzerdefinierten Werten dieses Typs interpolieren, während Eigenschaften, die die Zwei-Strich-Syntax (--) verwenden, sich mehr wie eine Zeichenersetzung 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 linearer Verlauf 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 über zwei Sekunden zu aquamarine (linear-gradient(to right, aquamarine, lavenderblush)).

Referenz

At-Rules und Deskriptoren

@property
- syntax-Deskriptor
  - + and # Multiplikatoren
  - | Kombinator
- inherits-Deskriptor
- initial-value-Deskriptor

Schnittstellen und APIs

Leitfäden

Verwendung der CSS properties and values 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 verfügbarer 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