t3n News Entwicklung

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

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

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

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

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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Philipp Blum am 13.02.2016 (18:22 Uhr)

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

    Antworten Teilen
  2. von Tom am 15.02.2016 (11:07 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Chrome
Chrome schützt euch vor Verarsche: Google-Browser warnt jetzt vor Fake-Download-Buttons
Chrome schützt euch vor Verarsche: Google-Browser warnt jetzt vor Fake-Download-Buttons

Google will die Nutzer des Chrome-Browsers besser schützten und warnt sie jetzt vor dem Öffnen von Seiten, auf denen sich Werbeanzeigen befinden, die sich als Download-Button ausgeben. » weiterlesen

30 praktische Erweiterungen für den Chrome-Browser
30 praktische Erweiterungen für den Chrome-Browser

Googles Chrome-Browser hat auch wegen der vielen praktischen Erweiterungen einen so starken Höhenflug in den letzten Jahren erlebt. Wir haben 30 der besten Chrome-Erweiterungen für euch … » weiterlesen

Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit
Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit

Microsoft will über einen Test nachgewiesen haben, dass sein Edge-Browser eine deutlich längere Akkulaufzeit am Laptop ermöglicht als die Konkurrenz. Besonders eklatant ist demnach der Unterschied … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?