CSS-Eigenschaften- und Werte-API

Das CSS-Eigenschaften- und Werte-API-Modul definiert eine Methode zur Registrierung neuer CSS-Eigenschaften und 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 API-Sammlungen.

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

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

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

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 unten stehende 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 background, der aus einem linear gradient von --stop-color (die 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, übergang --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

Verwendung der CSS-Eigenschaften- und Werte-API: Erklärt, wie benutzerdefinierte Eigenschaften in CSS und JavaScript registriert werden, mit Hinweisen zur Behandlung undefinierter und ungültiger Werte, Rückfallszenarien und Vererbung.
CSS Houdini: Referenzleitfaden zu Houdini-Ressourcen inklusive der CSS-Module, API-Leitfäden und externen Ressourcen.
Houdini APIs: Erklärt, was CSS Houdini ist und welche Vorteile es bietet, 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