CSS benutzerdefinierte Eigenschaften für kaskadierende Variablen

Das Modul CSS benutzerdefinierte Eigenschaften für kaskadierende Variablen fügt Unterstützung für kaskadierende Variablen in CSS-Eigenschaften hinzu und ermöglicht es Ihnen, benutzerdefinierte Eigenschaften zu erstellen, um diese Variablen zu definieren, sowie Mechanismen bereitzustellen, um benutzerdefinierte Eigenschaften als Werte für andere CSS-Eigenschaften zu verwenden.

Wenn Sie mit CSS arbeiten, verwenden Sie oft projektbezogene Werte wieder, wie z. B. Breiten, die gut mit Ihrem Layout funktionieren, oder eine Reihe von Farben für Ihr Farbschema. Eine Möglichkeit, Wiederholungen in Stylesheets zu verwalten, besteht darin, einen Wert einmal zu definieren und ihn an vielen Stellen wiederzuverwenden. Benutzerdefinierte Eigenschaften ermöglichen es Ihnen, benutzerdefinierte Variablen zu erstellen und zu definieren, die wiederverwendet werden können. Dies vereinfacht komplexe oder sich wiederholende Regeln und macht sie leichter lesbar und wartbar. Zum Beispiel sind --dark-grey-text und --dark-background leichter zu verstehen als hexadezimale Farben wie #323831, und der Kontext, wie Sie sie verwenden, ist auch offensichtlicher.

Benutzerdefinierte Eigenschaften in Aktion

Um zu sehen, wie benutzerdefinierte Eigenschaften verwendet werden können, bewegen Sie den Eingaberegler von links nach rechts.

In diesen Farbmustern wird die background-color mit der hsl()-<color>-Funktion als hsl(var(--hue) 50% 50%) festgelegt. Jedes Farbmuster erhöht den <hue>-Wert um 10 Grad, wie calc(var(--hue) + 10), calc(var(--hue) + 20) usw. Wenn der Wert des Schiebereglers von 0 auf 360 geändert wird, wird der Wert der --hue-benutzerdefinierten Eigenschaft mit calc() aktualisiert, und die Hintergrundfarbe jeder Box im Raster wird ebenfalls aktualisiert.

Referenz

Eigenschaften

Funktionen

Leitfäden

Verwendung von CSS benutzerdefinierten Eigenschaften (Variablen)

Erklärt, wie benutzerdefinierte Eigenschaften in CSS und JavaScript verwendet werden, mit Tipps zum Umgang mit undefinierten und ungültigen Werten, Fallbacks und Vererbung.

Ungültige benutzerdefinierte Eigenschaften

Erklärt, wie Browser mit Eigenschaftswerten umgehen, wenn der Wert einer benutzerdefinierten Eigenschaft ein ungültiger Datentyp für diese Eigenschaft ist.

Verwandte Konzepte

Spezifikationen

Specification
CSS Custom Properties for Cascading Variables Module Level 1

Siehe auch