Webstandard & Webdesign - CSS, HTML

 

CSS mit Variablen - Webdesign wird modularer dank neuem CSS4 Modul

Während CSS 2.1 noch als ein großes Gesamtpaket veröffentlicht wurde, wurde CSS3 in verschiedene Module untergliedert, womit die Weiterentwicklung und die spätere Veröffentlichung wesentlich schneller vonstatten. Selbige Herangehensweise gibt es auch bei CSS4. Bereits im letzten Jahr wurden hier einige neue Ansätze, wie neue Selektoren und Variablen vorgestellt. Und genau in diesem CSS Modul für Variablen gibt es nun endlich etwas Bewegung seitens des W3C, aber auch der Unternehmen die diese Entwicklung mit Variablen mit CSS vorantreiben. Seit Mitte Juni gibt es hierfür vom W3C einen sogenannten Editors Draft, in dem einige Eigenschaften und Vorgehensweisen zu diesem Modul für CSS Variablen zusammengefasst sind. Tab Atkins Jr., seines Zeichens Entwickler des Google Browser Chrome und Mitarbeiter der CSS Working Group die an dieser Spezifikation für das W3C arbeitet, schreibt in seinem Blog das sich eben diese CSS Working Group darauf verständigt, CSS Eigenschaften mit Variablen wie bereits hier vor einem Jahr vorgestellt, mit var-foo zu kennzeichnen, um dann mit var(foo) auf diese Eigenschaft zugreifen zu können

CSS4 Variablen - Vorteil oder Nachteil?

Ziel ist es den Webdesignern, Webworker oder wie Jens Grochtdreis sagen würde Oberflächenmasseuren, die Arbeit zu erleichtern. Denn viele dieser CSS Eigenschaften und Werte mehrfach verwendet, wodurch der zeitliche Aufwand für Änderungen sehr zeitintensiv ist. Ein modularer Umgang und leichtere Pflegbarkeit von CSS Eigenschaften und den dazugehörigen Werten, könnte hier einiges bewirken. Das hier eine Notwendigkeit vorliegt, die nun auch das W3C zunehmend erkennt, ist nicht verwunderlich, denn neue Methoden wie SASS, Compass & Co sind sicherlich nicht aus reiner Langeweile entstanden, sondern weil sie fü,r bestimmte Entwickler und bestimmten Umständen notwendig wurden. Die Beliebtheit und die immer größer werdende "Anhängerschaft" dieser neuen Ansätze, sind dem W3C und den Browser-Herstellern sicherlich nicht verborgen geblieben, kein Wunder also das sich langsam etwas tut, auch wenn es bis zu einer endgültigen "finalen Version" dieses Moduls noch etwas Zeit vergehen wird.

CSS4 Variablen - Die Syntax

Der Unterschied dieser Methoden zudem Ansatz des W3C und seinen Mitstreitern, ist der das für das Definieren von Variablen in CSS keine weiteren Dateien notwendig werden. Die Diskussion darüber ob Stylesheet-Dateien somit noch komplexer werden, kann hier gern aufgegriffen werden. Ich persönlich finde den Ansatz gut und würde nicht behaupten das eine CSS-Datei dadurch unübersichtlicher wird. Ob man eine Variable "var-foo" oder eine Eigenschaft "background-color" oder einen Wert "white" anlegt, macht von der Übersicht her keinen Unterschied. Um dies noch einmal verständlich zu machen, anbei ein kleines und hoffentlich verständliches Beispiel für den Einsatz von Variablen in CSS:

CSS & Variablen
:root {
    var-main-color:  #FFF;
}
header, aside, footer {
    background-color:  var(main-color);
}

In diesem wird mit Hilfe des Selektors :root (CSS3) die Wurzel des HTML-Dokumentes, das -Element, angesprochen und die Hintergrundfarbe Weiß zugewiesen. Mittels der Funktion var() kann man nun die Bereiche der Webseite anlegen denen diese Hintergrundfarbe zugewiesen werden kann. In diesem Fall sind dies <header>, <aside> und <footer>. Diskutiert wurde im übrigen auch die Variante $main-color, favorisiert wird momentan allerdings die hier im Beispiel verwendete Syntax var(main-color).

Eure Meinung zu Variablen in CSS?!

Wie steht ihr zu diesen Entwicklungen in Bezug auf die Verwendung von Variablen in CSS? Wen dieses Thema interessieren sollte, kann dies hier gern kundtun. Denn bei entsprechendem Interesse könnte das Thema "CSS & Variablen" inhaltlich in eine neue Auflage meines Buches zu gegebener Zeit mit einfließen.