Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Kein Umweg über Sass und Less: Chrome 49 bringt Unterstützung für CSS-Variablen mit

    Kein Umweg über Sass und Less: Chrome 49 bringt Unterstützung für CSS-Variablen mit

Google Chrome. (Foto: Evan Lorne / Shutterstock.com)

Die kommende Version von Chrome wird endlich auch Custom Properties unterstützen. Damit stehen euch dann auch im Google-Browser CSS-Variablen zur Verfügung.

CSS-Variablen: Chrome 49 unterstützt Custom Properties

Üblicherweise nutzen Websites ein festgelegtes Farbschema, auf das dann an verschiedenen Stellen immer wieder zurückgegriffen wird. Die einzelnen Farbwerte im CSS-Code einer Seite ständig zu wiederholen ist leider nicht nur arbeitsaufwändig, sondern kann auch schnell zu Fehlern führen. Die Lösung dafür kommt in der Regel in Form von CSS-Präprozessoren wie Sass oder Less. Sie erlauben den Einsatz von Variablen, allerdings muss der eigentliche CSS-Code nach jeder Änderung neu kompiliert werden.

Mit Custom Properties besteht aber die Möglichkeit, Variablen direkt im CSS-Code zu verwenden. Bislang wurden die aber nur in Firefox ab Version 43 und Safari 9.1 auf dem Desktop beziehungsweise 9.3 im Fall der iOS-Version unterstützt. Die kommende Chrome-Version 49 soll Custom Properties jetzt aber endlich ebenfalls standardmäßig unterstützen. In der aktuellen Version 48 musste die Unterstützung noch explizit unter chrome://flags aktiviert werden.

CSS-Variablen: So funktionieren Custom Properties

Einem Custom Property können Entwickler einen beliebigen Wert zuweisen. Über die var()-Funktion kann dieser Wert dann auf ein anderes Property angewendet werden. Custom Properties beginnen immer mit zwei Querstrichen. Hier ein kurzes Beispiel:

CSS-Variablen: Custom Properties im Einsatz. (Screenshot: Google)
CSS-Variablen: Custom Properties im Einsatz. (Screenshot: Google)

Da weder der Internet Explorer, Edge, Chrome für Android oder Opera derzeit Custom Properties unterstützen, bleibt ihr Nutzen leider nach wie vor stark eingeschränkt. Wer sich trotzdem dafür interessiert, der findet auf der Entwicklerseite von Google und der von Mozilla eine Einführung in die Custom Properties.

Ebenfalls interessant in diesem Kontext ist unser Artikel „10 CSS-Properties, die mehr können, als ihr ahnt“.

via thenextweb.com

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

2 Reaktionen
Tom
Tom

Wenn jetzt modernizr die custom properties nun für die anderen Browser irgendwie kompatibel machen würde, würd ich´s ab sofort benutzen...

Antworten
Philipp Blum

Eines der wirklich coolen CSS Dinge, die unbedingt kommen muessen.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen