CSS ist relativ starr. Wir können Stylesheets definieren, aber wir können sie nicht dynamisch an die Gegebenheiten anpassen die bei dem Aufruf einer Webseite vorliegen. Beinahe so wie HTML früher: ein mal beschrieben steht es fest. Damals wollte man dynamisches HTML, auch DHTML genannt. Das ist lange her. Für programmatisch erzeugtes HTML haben wir mittlerweile einige Programmiersprachen und Frameworks (PHP, Java, Groovy und sein Grails, Ruby und sein Rails, …). Und für CSS?

DCSS

Für CSS gibt es Sprachen wie LESS und SASS. Die ermöglichen uns die Verwendung von Variablen, Hierarchien und hier und da Kontrollstrukturen. Dafür brauchen sie aber auch wieder einen eigenen Compiler. Der Übersetzt die Dateien in gültiges CSS. Zu diesem Zweck werden solche Sprachen wie LESS und SASS meist in die Entwicklungs-Pipeline eingebaut und liefern am Ende dann doch wieder statisches CSS aus. Für die Entwicklung gut, bei der Auslieferung allerdings statisch. Aber was ist mit dynamischem CSS. Wo ist DCSS?

Das Problem

Im ersten Ansatz versuchen wir unser Glück mit PHP, einer weit verbreiteten Sprache die in großen Projekten genutzt wird (Facebook, Wikipedia, Joomla, Drupal, WordPress, um nur einige zu nennen).

Wenn wir PHP in unseren Stylesheet Dateien nutzen wollen, müssen die Stylesheet Dateien vom Server als PHP-Dateien ausgewertet werden, also auf .php enden. Wir erstellen eine Stylesheet-Datei die PHP-Anweisungen enthält und versuchen also folgendes:

<link href="relast.css.php" rel="stylesheet">

Und stellen fest das es nicht geht. PHP erzeugt per default nämlich Dateien vom Typ text/html. Dieser Inhalt wird vom Browser aber nicht als Stylesheet erkannt und somit ignoriert. Unsere Format-Angaben greifen also nicht.

Alternativ versuchen wir:

<link href="relast.php.css" rel="stylesheet">

Und stellen fest das nun unsere PHP-Anweisungen nicht ausgewertet werden. Der Server betrachtet die Datei als Stylesheet-Datei und PHP-Anweisungen werden ignoriert.

Die Lösung

Damit PHP-Anweisungen ausgewertet werden, muss die Datei auf PHP enden. Damit der Browser die Daten als Stylesheet auswertet muss der Inhalt aber text/css sein. Dies erreichen wir auf einfache Weise wie folgt:

<?php header('Content-type: text/css'); ?>

Diese Anweisung im Kopf unserer Stylesheet-Datei erlaubt uns mit folgender Anweisung:

<link href="relast.css.php" rel="stylesheet">

unseren gültigen Stylesheets an den Browser zu liefern, während der Server bei der Auslieferung zuerst sämtliche PHP-Anweisungen auswertet und dann die fertig ausgewertete Datei an den Browser schickt.

Der Vorteil

Der Vorteil dieser Lösung besteht in erster Linie darin das wir dynamisches CSS haben, DCSS ist da! Bei näherer Betrachtung ergeben sich weitere Vorteile:

• Turing-vollständig
  • vollständige Programmiersprache in Stylesheet-Dateien verwendbar
  • keine im Vergleich zu Programmiersprachen  funktional eingeschränkten Frameworks oder Sprach-Ergänzungen
• Server-gesteuert
  • Bedarfsgerechte und Anfrage-optimierte Stylesheet-Auslieferung möglich
• kein Lernaufwand
  • keine weiteren / neuen Programmiersprachen im Projekt
• keine Abhängigkeiten
  • keine weiteren Compiler / Interpreter / Frameworks im Projekt
• kein Ausschlusskriterium
  • andere Sprachen und Frameworks unverändert nutzbar / einführbar

Fazit

DCSS mit dieser Beispielhaften PHP-Implementierung (andere Sprachen bieten ähnliche Mechanismen) ermöglicht die nahtlose Verwendung von PHP in CSS analog zu der Verwendung von PHP in HTML. Damit ist die Analogie von DHTML zu DCSS hergestellt und einsetzbar. Der gleiche Mechanismus ist auf JavaScript-Dateien anwendbar, womit DJS ebenfalls anwendbar ist. Die als Server-Sprache eingesetzte Sprache PHP zieht sich damit durch alle Bereiche der ausgelieferten Bestandteile der Webseite und erzeugt DHTML, DCSS und DJS.

Weitere Vorteile liegen nahe. Mechanismen wie eine Asset-Pipeline sind mit PHP-Bordmitteln leicht implementierbar, dank der Auslieferung als reguläre Stylesheet-Datei sind die Ergebnisse Projekt- und Webseiten-übergreifend referenzierbar.

Ein erklärendes Beispiel und weitere Erläuterungen finden sich unter:

http://www.relast.de/knowhow/dcss

Einige praktische Beispiele finden Sie hier:

https://lib.relast.de/

Die referenzierbare Stylesheet-Datei lässt sich hiermit einbinden (mit PHP aggregiert und komprimiert):

<link href="https://lib.relast.de/relast.css.php" rel="stylesheet">