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.

Screenshot

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.

Screenshot

CleverCSS
CSS-Variablen mit Python. Bonus: auch „Rechenoperationen“ wie etwa Addition von Farbei und Schriftgrößen lässt sich mit CleverCSS bequem realisieren.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

Dynamic CSS A.K.A. CSS Variables
Eine weitere simple Technik, mit der CSS Variablen mittels PHP implementiert werden können.

Screenshot

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? ™

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.

Sortiert nach:   neueste | älteste | beste Bewertung
Wishu
Gast
7 Jahre 3 Monate her

Ganz netter Anfang, doch scheint es so, als würde man mit dieser Linksammlung unten dran nur den Beitrag voll bekommen wollen, weil man keine Lust hatte zu testen, was gut ist.

deweso
Gast
7 Jahre 3 Monate her
Methoden, die on-the-fly korrekten CSS Code erzeugen kann man vielseitig erstellen. Die Frage ist wie oft kommt der Besucher wieder und wie oft verändert sich wirklich etwas. Lohnt sich die (wenn auch meist leichte) Performance Einbuße die CSS zur Laufzeit zu erzeugen. Caching kann dann hier zu einem ersten Problem werden. Generell sollte sich die CSS Datei ja nicht so viel ändern, damit diese auch in Ruhe aus dem Cache geladen werden könnte. Was CSS-Expressions angeht gibt es hier noch einen wichtigen Hinweis bei Yslow von Yahoo: http://developer.yahoo.com/performance/rules.html#css_expressions Ich denke das eine Art Framework zum erstellen seiner eigenen CSS-Datei Sinn… Read more »
Thomas Weise
Gast
7 Jahre 3 Monate her

So sehr ich es mir auch wünschen würde, oben in der css-Datei mal schnell ein paar Farben usw. definieren zu können… Diese ganzen „Workarounds“ sind mir am Ende auch wieder zu umständlich.
Also bleibt „search & replace“ weiterhin mein Freund bei css-Dateien ;-)

rené
Gast
rené
7 Jahre 3 Monate her
@Wishu Statt in jedem Beitrag rumzumotzen und sich als Hater zu outen, kommentiere doch mal den Beitrag „Tutorial-Autoren gesucht“. Mal sehen, was Du so bringst. Wie gut Du testest und nachrechnest, sieht man an deinem Blog zum Thema „Gratis Visitenkarten“. Was in letzter Zeit gegen Dr. Web gemotzt wird, ist wirklich nicht mehr normal. Hauptsache man kann einen Link zu seinem ach so „wertvollen“ Blog setzen. Wenn ich mir dann die Inhalte dieser Blogs anschaue, streuben sich mir meistens die Haare, von dene ich nicht viele habe. Ich finde selbst die pure Aufzählung von Links sehr nützlich, gerade bei CSS… Read more »
Mudder
Gast
7 Jahre 3 Monate her

Ich finde die Linkliste auch gut. Wobei ich ehrlich gesagt nichts damit Anfangen kann. ;)
Für mich käme wenn nur die PHP-Variante in Frage, doch solange Variablen nicht fester Bestandteil der CSS-Struktur sind werde ich sowas auch nicht einsetzen. Wenn man Stylesheets korrekt aufbaut und ggfl. auch in mehrere Dateien verteilt, kann man leicht verschiedene Designs realisieren.

David Hellmann
Gast
7 Jahre 3 Monate her

@ renè

unterschreib! wie recht du hast. es wird auch noch gemeckert wenn man „kostenlose“ infos bekommt. tststs

Zum Thema

Ich finde auch das diese Workarounds nicht so das gelbe vom ei sind. Klar wäre es schön ein paar variablen fest zu legen aber im Grunde geht es ja auch ohne. Entweder es kommt direkt in CSS oder eben nicht.

trackback

[…] einen Beitrag bei Dr. Web inspiriert, möchte ich hier mal eine etwas sinnvollere Lösung bieten als dort erwähnt wird. Dort […]

Fabian
Gast
7 Jahre 3 Monate her

Sehr interessanter Artikel, also ich bin mal dankbar für die vielen Links. Auch wenn ich, soweit möglich, darauf verzichten werde. Da CSS selbst nicht solche Variablen vorsieht, möchte ich auch nicht eine Hilfskrücke wie etwa PHP wählen. Es gibt sicherlich einige Anwendungsbeispiele. Jedoch glaube ich nicht, dass dies bei kleinen Projekten zum Einsatz kommt.

Gruß Fabian

zyko
Gast
zyko
7 Jahre 3 Monate her

Für mich eine Riesensauerei dass es keine Variablen gibt in css. Hab das auch schon an verschiedenen Stellen bemäkelt.
Das einzige was zu tun wäre ‚im einfachsten Fall‘ alle Konstanten durch ihre Werte ersetzen, suchen und ersetzen, so wie es auch diese php-Notnagel-Lösungen tun.
Kann sicher keinen Browser überfordern sowas, in einer Zeit wo jeder Browser eh auch Skripting unterstützen muss.

Aber Nein, stattdessen darf sich jeder Web-Developer damit rumschlagen, nur weil ein paar verknöcherte Heinis von irgendeinem Standardisierungskremium sich querlegen.

Die sollen bitteschön mal selber Webseiten baun.

Wishu
Gast
7 Jahre 3 Monate her
@rené Durch Kritik wird ein Blog auch nur besser. Und da ich davon ausgehe, dass der Autor auch liest, was die Kommentartoren schreiben, kann ich also davon ausgehen, dass er zumindest darüber nachdenkt, ob es für ihn Sinn macht. Dass mein Blog nicht der beste ist, ist mir durchaus klar, habe ich auch nie behauptet. Ich hole mir aber auch keine Autoren, die nach der Hälfte des Beitrags keine Lust mehr haben. Wenn du mal drauf achtest, sind die Links hier nofollow, also bringt es mir nicht wirklich was. Und wo habe ich gesagt, dass es mich nicht interessiert? Ich… Read more »
Uli
Gast
Uli
7 Jahre 3 Monate her

css variablen sind meiner meinung nur gut, um sachen wie ci farben und schriften o.Ä. festzulegen. Das würde ja vollkommen reichen wenn es so eine art „define“ geben würde.

beza1e1
Gast
7 Jahre 3 Monate her

Mein Variante wäre den C Preprocessor zu benutzen. Ist überall vorhanden, super getestet und keineswegs auf C beschränkt. Zum Beispiel so: http://uwstopia.nl/files/2007/12/css-cpp.make

domingos
Gast
7 Jahre 3 Monate her

Wie ist es denn in CSS3? Sind da Variablen vorgesehen? Fänd ich auch nicht schlecht. Die ganzen Workarounds sind mir ehrlich gesagt auch zu kompliziert, zumal die meisten Server ohnehin nur PHP oder Perl unterstützen.

Trotzdem ein guter Beitrag, weiter so.

Wishu
Gast
7 Jahre 3 Monate her

@domingos
Selbst wenn es vorgesehen ist, müssten es erstmal alle Browser können und man könnte es somit aller frühestens in 5 Jahren benutzen. Ich glaube nicht, dass wir ohne die Workarounds noch an unsere Variablen kommen.

Mario
Gast
7 Jahre 3 Monate her

Ich hab mich mal mit SSI beholfen und dazu auch mal was drüber geschrieben.

tekl
Gast
7 Jahre 3 Monate her

Mir würden Farbkonstanten absolut reichen. Mehr bräuchte es nicht und würde CSS auch nicht großartig aufblähen. Named Colours quasi.

trackback

[…] Variablen in CSS: Werkzeuge und Lösungsansätze: Mehr Flexibilität aber auch ein Mehr an Komplexität […]

Markus Schlegel
Gast
7 Jahre 3 Monate her

Ich habe etwas dazu geschrieben:

http://markus-schlegel.com/weblog/variablen-und-abstraktion

Es geht um den Unterschied wahrer CSS-Variablen und dass man richtige Variablen nicht serverseitig realisieren kann.

Kristof
Gast
7 Jahre 3 Monate her
Einerseits unterstütze ich das Argument, man müsse bei gut geschriebenem CSS Attribute nicht all zu oft wiederholen, was Variablen überflüssig mache. Andrerseits finde ich, die diversen Workarounds sind umständlicher als das eine oder andere Attribut mehrmals schreiben zu müssen. Und eine zusätzliche Syntax lernen zu müssen oder gar solche enorm umständlichen Konstrukte wie bei dem Beispiel von Nettuts bauen zu müssen ist mmn einfach Überzogen. Doch ich weiss nunmal, die Realität sieht anders aus. Bei einer größeren Seite mit einem vielfältigem Farb-Set und mehreren Schriftarten kommt man oft zu einem Punkt, wo man den Überblick übers Stylsheet verliert. Ich halte… Read more »
Harry Schmieder
Gast
7 Jahre 3 Monate her
Mir wäre es viel lieber, css3 würde sich endlich browserübergreifend durchsetzen. Zeit würde es ja mal werden… Ich denke, mit css alleine kann man schon viel anfangen. Wenn man das Stylesheet sorgsam aufbaut, dann kann man auch jede Menge Ladezeit einsparen. Alles machbar. Auf mich wirken die verfügbaren Möglichkeiten für css-Variablen größtenteils nicht ausgereift und ich vermute dahinter mehr Nachteile als Vorteile. EIN Ziel von css-Dateien ist die Trennung von Inhalt und Formatierung, wodurch auch die Ladezeit drastisch gesenkt wird. Warum muss man dann am Ende durch „endlos-parsen“ und was weiß ich nicht noch alles das Ganze ad absurdum führen?!… Read more »
ProfessorWeb
Gast
7 Jahre 3 Monate her

Ich hatte mal einen ähnlichen Ansatz, der aber keine praktikable Anwendung fand:

#element {
width:500px; /* 600px, 700px*/
}

Das wurde mit PHP geparsed und je nach GET-Variable wurden dann die 500 Pixel durch 600 oder 700 ersetzt.

Dies war im Zusammenhang mit der Vergrößerung ganzer Websites, was dank der Zoom-Funktion seit FF3 und IE7 sich erledigt hat.

Ich schließe mich meinem Vorredner (Harry) an, CSS3 für alle Browser wäre sehr wünschenswert und würde viel Arbeit, gerade mit abgerundeten Ecken, etc. ersparen – und ein Calc-Befehl gibt es auch, was den Variablen zumindest entgegen kommt.

Gruß
Armin

zyko
Gast
zyko
7 Jahre 3 Monate her
Ich wäre auch schon alleine mit Farb-Konstanten und Zahlen-Konstanten zufrieden. Fonts zu ändern ist wirklich nicht das Thema. Css ist hier ohne Variablen nicht ‚dry‘.(don’t repeat yourself) Wenn ich an komplett unterschiedlichen Stellen, die CSS mäßig nicht vererbbar sind, dieselben Farben benötige, weil ma die ja ‚einheitlich halten will‘ in einem Gesamt-Layout, muss man denselben Farbwert wieder reinschreiben. Somit wird das dann ’schwer wartbar‘. Und nachdem sich beim Programmieren auch der DRY Ansatz durchgesetzt hat, weil halt sonst größere Projekte nicht mehr wartbar sind, ist es naheliegend dieses Konzept auch in den Layout Bereich einfliessen zu lassen, wie auch immer… Read more »
Gabber
Gast
Gabber
7 Jahre 3 Monate her

Interessantes Thema, leider kommt im Ergebnis absolut nichts neues dabei rum. So ist das doch ein alter Hut

Leonid Lezner
Gast
Leonid Lezner
7 Jahre 3 Monate her

Ich möchte meinen Ansatz für die CSS-Variablen vorstellen: http://www.leolezner.de/webdesign/dynamic-css-machts-leichter/

Ich hoffe ich kann damit einige überzeugen! Der Ansatz ist Quelltextfreundlich und effizient. Und kann je nach Wunsch erweitert werden.

rbq
Gast
rbq
7 Jahre 2 Monate her
CSS ist im Moment ja in vielerlei Hinsicht noch ganz am Anfang, gefühlter Versionsstand: 0.21. Das betrifft zum einen die rudimentäre, superumständliche Syntax (fehlende Variablen, Rechenoperationen, hierarchische Notation, Templates) und zum anderen das, was sich damit überhaupt ausdrücken lässt. Ich bin der Meinung, dass CSS im Moment vor allem hinsichtlich des zweiten Punktes weiterentwickelt werden sollte, derart, dass es über (Text-)Gestaltung hinaus auch tatsächlich für Layout-Zwecke dienen kann; das kommende Mehrspalten-Layout-Modul ist in dieser Hinsicht sicher ein guter Anfang. Fehlende Variablen und Co sind hingegen verhältnismäßig unwichtig, bedeuten sie doch lediglich mehr Tippaufwand, bzw. einen Durchlauf durch eine serverseitige Skriptsprache… Read more »
cortex
Gast
cortex
7 Jahre 1 Monat her

habe mir vor kurzem csskon angeschaut. basiert auf css-ssc von shaun inman und macht einen brauchbaren eindruck.

cx

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen