CSS Custom Properties: So nutzt du CSS-Variablen

Chrome unterstützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zentrales Element rationeller Programmierung ohne weitere Zusätze im Browser Wirklichkeit. Der Einsatz ist recht einfach.

Variablen: zentrales Element strukturierter Programmierung

Variablen sind aus der professionellen Programmierung nicht weg zu denken. Man stelle sich vor, man müsste die Werte, die als Variablen an zentraler Stelle verwaltet werden, tatsächlich an jedem Verwendungsort neu definieren. Selbst mit professionellen Entwicklungswerkzeugen würde das Suchen und Ersetzen im Falle von Änderungsbedarfen reichlich aufwändig werden. Mit CSS war jedoch genau dieses Vorgehen bislang unumgänglich.

Erst mit Chrome 49 unterstützt Googles Browser Variablen in der Form der CSS Custom Properties auch für die Erstellung von Stylesheets. Und das ist erwartungsgemäß sehr praktisch. Man wird sich nicht mehr davon trennen wollen, wenn man sich erstmal dran gewöhnt hat.

CSS Custom Properties: Das (und mehr) kannst du mit CSS Variablen machen

CSS Custom Properties sind praktisch für viele Zwecke. Auf Anhieb verständlich, und deshalb verwende ich das Beispiel hier auch, ist die seitenweite Änderung von Farbwerten. CSS an sich ist ja schon eine Erleichterung in dieser Hinsicht. Wenn ich mich an meine ersten Designs in den Neunzigern zurück erinnere, wird mir jetzt noch flau. Ohne CSS setzte ich Farben an jedem HTML-Element neu. Wenn der Kunde das Farbset änderte, war ich teils tagelang in Aktion, um händisch die ganzen Werte zu suchen, zu finden und zu ersetzen.

Aber auch mit CSS kann eine Änderung komplexerer Farbschemen bei vielen Definitionen schnell unüberschaubar werden. Hier helfen CSS Variablen massiv. Für den visuellen Lesertypen binde ich einfach an dieser Stelle mal das GIF ein, das Google selber im Chromium-Blog zur Ankündigung der neuen Features verwendet hat:

Ein Beispielcode kann etwa so aussehen:

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}

Erfahrene Entwickler erkennen sofort das Prinzip. --main-color ist hier die frei definierte Variable, die Custom Property. Custom Properties beginnen stets mit zwei Bindestrichen.

Neben fixen Werten können auch Berechnungen und Bedingungen als benutzerdefinierte Eigenschaften angelegt werden. So kannst du beispielsweise in responsiven Designs auf Änderungen der Bildschirmauflösung reagieren.

Ich bin begeistert. Chrome 49 hat noch mehr neues zu bieten. Die CSS Variablen sind jedoch klar mein Favorit.