Variablen in CSS: Werkzeuge und Lösungsansätze
Die Einführung von Variablen in CSS scheint eine vernünftige Idee zu sein. Schließlich wäre es nicht verkehrt, nur einmal eine Farbe oder eine Schrift zu definieren und diese weitgehend im ganzen Stylesheet zu nutzen. Einige Experten halten dagegen, die Stylesheet werden komplexer, die CSS-Dateien werden größer und unübersichtlicher. Doch, während sich CSS-Experten streiten, ob die Einführung von Variablen in CSS eine vernünftige Sache sei, arbeiten Designer und Entwickler heftig daran, das Design von Cascading Stylesheets mittels Variablen zu erleichtern und zu beschleunigen. Die Vorteile liegen auf der Hand.
Eigentlich ist die Idee weder neu noch revolutionär. Die Nachfragen, Variablen in CSS einzuführen, gibt es seit Jahren, ebenso verschiedene Techniken, mit denen dies "künstlich" realisiert werden kann (auf der "Pre-Processing"-Ebene). Grundsätzlich kann jetzt schon jeder mit PHP, ASP, Ruby, Perl et cetera einen eigenen Preprocessor schreiben, der die Aufgabe übernimmt. Das Problem ist dabei nur, dass das Stylesheet unübersichtlicher wird, weil es nun nicht mehr abgekoppelt ist und zuerst durch einen Preprocessor "laufen" soll. Dadurch kann die Wartung des Stylesheets komplexer und unübersichtlicher werden. Somit ist die Entscheidung, ob man CSS Variables einsetzt oder nicht eine individuelle Frage, die jeder Designer für sich beantworten muss. Machbar und leicht zu realisieren ist dies auf jeden Fall.
Eins vorweg: CSS Variables sollten nicht mit JavaScript implementiert werden, denn sonst wird die Seite in Browsern, die keine JavaScript-Unterstützung mitbringen, unlesbar dargestellt. Wenn überhaupt, sollten CSS Variables mit serverseitigen Skriptsprachen realisiert werden. Das ist also eine schlechte Lösung.
Wir haben uns umgeschaut und einige interessante Ansätze zur Implementierung von CSS Variables mit serverseitigen Sprachen gesammelt. Haben wir etwas vergessen? Bitte teilt es uns in Kommentaren mit!
CSS Variables With Moonfall
Moonfall erzeugt einen Abstraktionslayer für die Designer von Stylesheets. Die CSS-Datei kann mittels der Programmiersprache Lua (das für "World of Warcraft" benutzt wird) Variablen enthalten; das Preprocessing findet mittels eines CGI-Skripts oder der Kommandozeile statt. Interessante Alternative zu üblichen Techniken.
HSS
HSS ist eine Kommandozeilen-Anwendung, die HSS-Dateien (in denen unter Anderem CSS-Variablen, Block-Variablen und Nested Blocks definiert werden können) kompilieren kann – lokal, auf dem Rechner des Entwicklers.
CleverCSS
CSS-Variablen mit Python. Bonus: auch "Rechenoperationen" wie etwa Addition von Farbei und Schriftgrößen lässt sich mit CleverCSS bequem realisieren.
Variables in your CSS via PHP
Chris J. Davis beschreibt eine Technik, mit der man Objekt-Orientierung in PHP nutzen kann, um etwa color-, font-family- oder gar margin und padding-Attribute dynamisch festzulegen. Siehe auch Embedding PHP in CSS, CSS Variables Using PHP, Variables in CSS via PHP, Faster Development with CSS Constants und CSS Constants.
CSS Handler
CSS Handler ist ein HttpHandler, der CSS-Dateien mit Variablen, relativen Dateipfaden und @import-Direktiven arbeiten kann und auch die CSS-Dateien "on the fly" komprimieren kann. Mehr Informationen dazu.
Sass
Sass ist eine Metasprache, mit der Stylesheets eleganter und einfacher geschrieben werden können. Ein CSS-Layout könnte etwa in wenigen Zeilen Code realisiert werden (siehe Screenshot unten). Eine ausführliche Einführung in Sass finden Sie im Beitrag Dynamic CSS.
CSS Cacheer
Ein robustes Werkzeug, mit dem Entwickler nicht nur Variablen, sondern auch serverseitige Imports, Konstanten und verschachtelte Selektoren-Definitionen festlegen können. Siehe auch CSSExtra Plugin.
Compass
Compass baut auf Sass auf (siehe oben) und stellt ein CSS Meta-Framework zur Verfügung, das direkt in Ruby-Applikationen benutzt werden kann und über die Kommandozeile funktioniert. Das Werkzeug stellt zudem Bausteine für die Erzeugung von Layouts auf der Grundlage von Blueprint, YUI und 960.gs-Frameworks bereit. Siehe auch Don't use css or table layout, use Sass and Compass.
CSS Variables With Rack Middleware
Phil Burrows beschreibt eine simple Technik, mit der CSS Variables in Rails mittels Rack Middleware implementiert werden. Ein .rb-Skript dafür wird mitgeliefert.
CSScaffold
Ein Plugin für den Editor Coda, mit dem CSS-Code mittels Variablen und Shortcodes eleganter und schneller geschrieben werden kann. Video dazu.
CSS Variables TextMate Bundle
Ein CSS Variables-Plugin für die Quellcode-Editoren TextMate und E-TextEditor.
Techniken, Beiträge und Tutorials
How to Add Variables to Your CSS Files
Dieses Schritt-für-Schritt-Tutorial erläutert, wie CSS Variables ganz einfach mit PHP realisiert werden können. Die Generierung von Stylesheet wird Apache auf ein PHP-Skript deligieren; dieses öffnet das Stylesheet, liest es Zeile für Zeile und ersetzt benutzerdefinierte Variablen durch vorgegebene Werte. Anschließend nutzt Apache das Output, um dem Browser eine perfekte "ausgewertete" Stylesheet-Datei vorzugaukeln. Wahrscheinlich eine Overkill-Lösung, die zu komplex ist. Geht aber dennoch.
Dynamic CSS A.K.A. CSS Variables
Eine weitere simple Technik, mit der CSS Variablen mittels PHP implementiert werden können.
CSS Constants
Eine Übersicht von verschiedenen Techniken, mit denen CSS Variables eingeführt werden können. Natürlich können CSS Variables auch mit SSI realisiert werden. Von Christian Heilmann.
Dynamic CSS in WordPress
Wie erreicht man in WordPress, dass jede Rubrik ein eigenes Hintergrundbild hat? Auch das geht mit dynamisch erzeugtem PHP/CSS-Code.
CSS Variables Proposal
Ein CSS Variables-Proposal von Entwicklern der WebKit Rendering Engine. Anfang 2008 sind CSS Variables in WebKit nightlies aufgetreten, ein paar Monate später hatten WebKit-Entwickler die Idee wieder aufgegeben. Die test builds existieren aber immer noch.
Was könnte man noch mit CSS Variables machen?
CSS Variables stellen nicht nur das alleinige Konzept dar, mit dem das Design von Cascading Stylesheets erleichtert und verbessert werden könnte. Eine Möglichkeit wäre es etwa, Variablen zu nutzen, um darauf basieren Rechenoperationen (wie etwa bei CleverCSS durchführen zu können. Dies würde etwa die Berechnung von Containterbreiten deutlich vereinfachen. In seinem Beitrag Future CSS Variables and Calculations setzt sich Peter Gasston mit dem Thema auseinander. Der Quellcode könnte etwa so aussehen:
@define { box_padding: 100px; }
div {
padding: $box_padding;
width: calc(100% - $box_padding);
}
Einen anderen Vorschlag hat Jens Meiert: die Zuweisung von Stilen sollte mittels Gleichsetzung der Selektoren erfolgen. Etwa
.old = .new;
oder
@foo = .old, .new;
Mehr dazu finden Sie in Jens Beitrag Selector Variables.
Was meinen Sie?
Was meinen Sie? Ist es vernünftig, CSS Variables einzusetzen? Gehören CSS Variables in die Web Standards? Und welche weitere Features vermisst Ihr in CSS? (tm)
Über Vitaly Friedman
Verwandte Artikel
(No Ratings Yet)
