Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 4. Februar 2016

CSS Custom Properties: So nutzt du Variablen in Chrome 49

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Chrome unter­stützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zen­tra­les Element ratio­nel­ler Programmierung ohne wei­te­re Zusätze im Browser Wirklichkeit. Der Einsatz ist recht ein­fach.

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Variablen: zentrales Element strukturierter Programmierung

Variablen sind aus der pro­fes­sio­nel­len Programmierung nicht weg zu den­ken. Man stel­le sich vor, man müss­te die Werte, die als Variablen an zen­tra­ler Stelle ver­wal­tet wer­den, tat­säch­lich an jedem Verwendungsort neu defi­nie­ren. Selbst mit pro­fes­sio­nel­len Entwicklungswerkzeugen wür­de das Suchen und Ersetzen im Falle von Änderungsbedarfen reich­lich auf­wän­dig wer­den. Mit CSS war jedoch genau die­ses Vorgehen bis­lang unum­gäng­lich.

Erst mit Chrome 49 unter­stützt Googles Browser Variablen in der Form der CSS Custom Properties auch für die Erstellung von Stylesheets. Und das ist erwar­tungs­ge­mäß sehr prak­tisch. Man wird sich nicht mehr davon tren­nen wol­len, wenn man sich erst­mal dran gewöhnt hat.

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

CSS Custom Properties sind prak­tisch für vie­le Zwecke. Auf Anhieb ver­ständ­lich, und des­halb ver­wen­de ich das Beispiel hier auch, ist die sei­ten­wei­te Änderung von Farbwerten. CSS an sich ist ja schon eine Erleichterung in die­ser Hinsicht. Wenn ich mich an mei­ne ers­ten Designs in den Neunzigern zurück erin­ne­re, wird mir jetzt noch flau. Ohne CSS setz­te ich Farben an jedem HTML-Element neu. Wenn der Kunde das Farbset änder­te, war ich teils tage­lang in Aktion, um hän­disch die gan­zen Werte zu suchen, zu fin­den und zu erset­zen.

Aber auch mit CSS kann eine Änderung kom­ple­xe­rer Farbschemen bei vie­len Definitionen schnell unüber­schau­bar wer­den. Hier hel­fen CSS Variablen mas­siv. Für den visu­el­len Lesertypen bin­de ich ein­fach an die­ser Stelle mal das GIF ein, das Google sel­ber im Chromium-Blog zur Ankündigung der neu­en Features ver­wen­det hat:

css-custom-properties-3

Ein Beispielcode kann etwa so aus­se­hen:

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

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

Erfahrene Entwickler erken­nen sofort das Prinzip. --main-color ist hier die frei defi­nier­te Variable, die Custom Property. Custom Properties begin­nen stets mit zwei Bindestrichen.

Neben fixen Werten kön­nen auch Berechnungen und Bedingungen als benut­zer­de­fi­nier­te Eigenschaften ange­legt wer­den. So kannst du bei­spiels­wei­se in respon­si­ven Designs auf Änderungen der Bildschirmauflösung reagie­ren.

Ich bin begeis­tert. Chrome 49 hat noch mehr neu­es zu bie­ten. Die CSS Variablen sind jedoch klar mein Favorit.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

4 Kommentare

  1. Oh end­lich. Das die­ses Feature beim CSS Entwurf ver­ges­sen wur­de, fand ich schon immer unver­ständ­lich. Durch sass, less und Konsorten ist das aber dann doch über­holt wor­den und eine brei­te Unterstützung wird sicher­lich über vie­le Jahre nur per Hilfsjavascript mög­lich sein…

  2. Wie sieht den die Unterstützungin ande­ren Browser aus? Darüber wird lei­der nicht gespro­chen.

Schreibe einen Kommentar zu jocrat Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.