Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

9.06.09

Variablen und Abstraktion

Bei Dr. Web erschien heute ein Artikel zu diesem Thema – wie man Variablen in CSS realisieren kann. Jede der vorgestellten Methoden nutzt serverseitiges Preprocessoring. Dabei werden die CSS-Dateien, gespickt mit »Variablen«, vor dem Ausliefern an den Client vom Server übersetzt. Im einfachsten Fall werden nur die Variablen-Strings durch die festgelegten Werte ersetzt.

Dass es durch diese Techniken aber nur teilweise möglich ist, Variablen zu simulieren, wird nicht wirklich erwähnt; es wird zwar von Abstraktion gesprochen, aber was der entscheidende Unterschied zu echten Variablen ist, wird nicht klar. Mit einigen Beispielen möchte ich den Sachverhalt erklären.

Im Grunde gibt es zwei verschiedene Arten von Variablen. Die einen sind im Grunde nur eine Abstraktion, die anderen verdienen den Namen »Variable« schon eher, denn sie sind wirklich variabel.

page-width = 800px

Hier wird einem Namen (800px) ein Alias, also ein alternativer Name gegeben (page-width). Der einfachste aller Präprozessoren führt nichts anderes als eine einfache Search & Replace-Operation durch. Ich habe bewusst das Wort »Wert« vermieden, denn in diesem Beispiel gibt es noch keine Werte. 800px sieht zwar schwer nach einem Wert aus, aber zu einem solchen wird er erst auf der Browserseite.

Anders verhält sich das mit dieser Zuweisung:

page-width = 600px + 200px

Hier muss der Server-Präprozessor schon etwas mehr können als S&R. Dieses Mal handelt es sich auf der rechten Seite der Zuweisung nämlich um Werte und das Programm muss imstande sein, diese zu verarbeiten und miteinander zu kombinieren.

Letztlich ist page-width aber immer noch eine »Konstante«. Es handelt sich dabei immer noch um bloße Abstraktion. Daran ändert man auch nichts, wenn man in Zuweisungsausdrücken Werte mit anderen Konstanten vermischt.

page-width = 960px
content-width = page-width - 260px

Immer noch Abstraktion.

Das alles ist soweit noch serverseitig zu lösen und dient nur der Übersicht und Vereinfachung. Was man aber eigentlich vermisst, ist die Fähigkeit, Ausdrücke wie diesen zu lösen:

var = 300px + 4em

Das wird für einen Präprozessor niemals (ohne »Hacks«) lösbar sein. Denn hierbei handelt es sich zum ersten Mal um eine richtige Variable. Variablen sind nämlich dadurch variabel, dass sie erst zur Laufzeit einen zur Kompilierzeit unbekannten Wert bekommen. Zwei Ausdrücke werden in der obigen Konstruktion vom Browser interpretiert: px und em.

Um es einfacher zu halten, kann man auch sagen, dass bloß em ein variabler Ausdruck ist, der vom Browser in Pixel umgerechnet wird.

Richtige CSS-Variablen wird man also durch eine serverseitige Technologie niemals abbilden können. Man kann eine Abstraktionsebene schaffen, aber das, was man eigentlich oftmals dringend bräuchte, lässt sich auch damit nicht lösen. Bei all’ den Lösungen, die es zu geben scheint, muss man sich also klarmachen, dass es sich dabei stets um Abstraktionen statt echter Variablen handeln muss. Etwas wie calc ist auf der Serverseite nicht möglich.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll