currentColor und andere CSS-Variablen – und warum sie besonders nützlich sind
Kommentare

Lange Zeit konnten Variablen nur mithilfe von Präprozessoren wie Sass oder LESS in Stylesheets genutzt werden, dabei können sie Webdesignern die Arbeit mit CSS deutlich vereinfachen.

Sie erlauben nämlich einerseits nicht nur das Schreiben von Code, der sich nicht wiederholt, sondern vereinfachen andererseits auch das Managen und Maintainen von umfangreichen Projekten, die viele sich wiederholende Values beinhalten. Sara Soueidan erklärt, was Variablen in CSS so nützlich macht und stellt mit currentColor eine besonders praktische Variable vor.

Warum CSS-Variablen so nützlich sind

Erst letztes Jahr wurden native CSS-Variablen, die den bekannten Präprozessor-Variablen ähneln, eingeführt. Sie werden von allen CSS-Properties als Wert akzeptiert, was gerade bei umfangreichen Projekten viele Vorteile bieten kann. Ein typischer Use Case für Variablen ist beispielsweise das Farbschema einer Website oder Applikation, das sich mit ihnen deutlich leichter managen lässt.

So kann eine Variable an einer Stelle definiert und mit einem Farbwert versehen und sie dann im gesamten Stylesheet als eigener Wert verwendet werden. Soll dann die Farbe geändert werden, muss nur der Farbwert verändert werden; alle weiteren Vorkommen der Variablen werden automatisch mitgeändert.

Ähnlich nützlich ist auch der Keyword-Wert currentColor, der sich ähnlich wie eine Variable verhält. Im Gegensatz zu anderen CSS-Variablen kann er allerdings nur dort verwendet werden, wo auch ein -Wert erwartet wird. Gleichzeitig wird der Wert von currentColor vom Wert des color-Properties bestimmt, das auf einem Element angewandt wird – das heißt, der Wert von currentColor entspricht immer dem aktuellen color-Property-Wert.

currentColor wird darum vor allem verwendet, um Properties eines Elements oder Child-Elementen eines Elements dessen Farbset zu vererben. Es gibt allerdings auch Elemente, die bereits automatisch den Farbwert erben. Dazu gehören zum Beispiel der Text des Elements, die Textkontur, die Elementumrandung oder der Boxschatten des Elements.

Use Case von currentColor

Einige dürften sich jetzt wundern, welchen Nutzen currentColor überhaupt hat, wenn viele Properties bereits ohne das Keyword den Farbwert erben. Eine Einsatzmöglichkeit sind zum Beispiel CSS Gradiants, die keine Farben erben. Mit currentColor kann ein linearer Gradiant, der als Hintergrundbild genutzt wird, so angepasst werden, dass er jede als primary color definierte Farbe übernimmt.

Andere Use Cases umfassen zum Beispiel die Gestaltung von UI-Komponenten. Dabei kann ein Farbwert für die Komponenten definiert und mit currentColor der Hauptfarbwert aller Komponenten beliebig verändert werden. Auch für das einfachere Stylen von SVGs ist currentColor nützlich – insbesondere, wenn Teile eines SVGs mit einem use-Element wiederverwendet werden. Vor allem zum Erstellen mehrerer Icons mit unterschiedlichen Farben ist dies praktisch, weil nur die color– und fill-Werte im CSS geändert werden müssen.

In ihrem Artikel zeigt Sara Soueidan den Einsatz von currentColor anhand einiger Code-Beispiele und Demos noch ausführlicher. Allerdings dürfte auch so deutlich werden, wie nützlich CSS Variablen für Webdesigner sein können – insbesondere auch die Variablen, die nicht nur color-Werte akzeptieren. Gleichzeitig wird mit ihnen der Umgang mit SVG vereinfacht; zudem kann so auch ein kürzeres CSS geschrieben werden – ein Gewinn auf ganzer Linie also.

Aufmacherbild: Color swatches book. Rainbow sample colors catalog. von Shutterstock / Urheberrecht: scyther5

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -