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
- CSS Properties and Values API-Modul
@property
-RegelCSS.registerProperty()
-Methode
Spezifikationen
Specification |
---|
CSS Custom Properties for Cascading Variables Module Level 1 |
Siehe auch
- CSS-Kaskadierung und Vererbung-Modul
- CSS
env()
-Funktion - CSS
calc()
-Funktion getPropertyValue()
-Methode