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 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.

CSS Custom Properties: So nutzt du Variablen in Chrome 49

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:

css-custom-properties-3

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.

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. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Oh endlich. Das dieses Feature beim CSS Entwurf vergessen wurde, fand ich schon immer unverständlich. Durch sass, less und Konsorten ist das aber dann doch überholt worden und eine breite Unterstützung wird sicherlich über viele Jahre nur per Hilfsjavascript möglich sein…

  2. Wie sieht den die Unterstützungin anderen Browser aus? Darüber wird leider nicht gesprochen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück