Dynamisches CSS ist im einfachsten Fall CSS das um Variablen erweitert wird, im besten Fall CSS in dem ich Code ausführen kann. So ist es mir möglich Server-seitig Fallunterscheidungen zu treffen und bedarfsgerechtes CSS auszuliefern. Es gibt bereits Varianten bei denen der CSS-Code um einige Konstrukte erweitert wird (LESS/SASS). Allerdings bergen diese den Nachteil das wir jeweils einen weiteren Compiler benötigen der gültiges CSS für den Browser erzeugt. Zusätzlich handelt es sich dabei um meist neue Sprachkonstrukte, also eine weitere Sprache im Projekt.
Wenn ich zum Beispiel je nach Benutzer oder Aufruf unterschiedliche Stylesheets ausliefern will, oder wenn ich nicht noch einen zusätzlichen Compiler einbinden möchte. Im schlimmstens Fall muss ich verschiedene Stylesheets vorhalten und dann dynamisch in mein HTML einbinden. Dann muss ich aber verschiedene Stylesheets pflegen und habe doppelten Code und multiplizierte Abhängigkeiten.
Schöner wäre es doch wenn wir CSS mit den vorhandenen Server-Sprachen bearbeiten können, zum Beispiel PHP. Leider wird PHP nicht ausgewertet wenn wir es in einer Datei notieren die mit .css endet (<link href="style.css" rel="stylesheet"> liefert den PHP-Quelltext mit). Umgekehrt wird unser CSS vom Browser nicht ausgewertet wenn wir es in eine Datei einbinden die mit .php endet (<link href="style.php" rel="stylesheet"> ignoriert die eingetragenen CSS-Angaben).
Mit einem Brückenschlag: wir bringen den Server dazu unsere CSS-Dateien aus PHP zu parsen. Wir notieren unsere Stylesheets wie gewohnt in CSS, aber ergänzt um Strukturen die wir in PHP beschreiben. Somit können wir alle Vorteile einer Programmiersprache wie PHP nutzen (Variablen, Fallunterscheidungen, was wir wollen). Der Server wertet die PHP-Strukturen aus und liefert das Ergebnis aus. Wir müssen den Server nur dazu bringen die Datei als CSS auszuliefern, so das der Browser diese auch als CSS akzeptiert und auswertet.
Den Trick bewerkstelligen wir mit der PHP-Anweisung header();. Wird kein spezifischer Header angegeben, erzeugt PHP nämlich Dateien vom Typ text/html. Daher wertet der Browser die PHP-geparste Datei nicht als CSS aus, weil er HTML geliefert bekommt. In der Regel ist HTMl gut, wir erzeugen mit PHP ja Dokumente für den Browser, nur in diesem Fall soll es ein spezielles Dokument sein das wir mit <link href="style.css.php" rel="stylesheet"> referenzieren wollen. Daher übergeben wir am Anfang der referenzierten Datei den Header header('Content-type: text/css');. Somit liefert das PHP-Skript style.css.php nun CSS-Content aus, und der Browser akzeptiert selbiges als Stylesheet und wertet es aus. Klingt komisch, ist aber so.
Da wir nun per PHP gültiges CSS ausliefern können, können wir noch mehr. Mit unserer Programmiersprache können wir unseren CSS-Quelltext auf verschiedenen Dateien verteilen und diese dann im PHP-Skript zusammen fügen. Was haben wir dann? Eine Art Asset-Pipeline wie sie einige vermutlich von diversen Frameworks kennen. Und das geht ganz einfach, wie wir gleich sehen.
Wir wollen das die Farbe unserer Rahmen und die Farbe des Textes überall gleich verwendet werden, ohne das sich jemand Gedanken darüber machen muss. Außerdem sollen alle den gleichen Schrifttyp verwenden. Wir wollen also ein ganz einfaches Firmendesign (corporate design / corporate identity) festlegen.
In der Datei corporate_identity.php notieren wir:
<?php $font = "Arial, sans serif"; $textcolor = "orange"; $bordercolor = "red"; ?>
Der Vorteil ist das wir die Daten zur Corporate Identity (CI) an einer zentralen Stelle verwalten können.
Wir wollen die definierten Variablen nun in verschiedenen CSS-Dateien nutzen, ohne uns Gedanken darüber zu machen was in den Variablen definiert wurde.
In der Datei borders.css.php notieren wir:
<?php
.border {
border: 3px solid <?=$bordercolor?>
}
?>
In der Datei fonts.css.php notieren wir:
<?php
.text {
font:<?=$font?>
color:<?=$textcolor?>
}
?>
Nun muss jemand für uns den ganzen Kram zusammen bauen. Da wollen wir uns nicht drum kümmern, das beschreiben wir ein mal und gut ist.
In der Datei asset.css.php notieren wir:
<?php
header('Content-type: text/css');
include "corporate_identity.php";
include "borders.css.php";
include "fonts.css.php";
?>
Zu guter Letzt wird die asset-Datei in unserem HTML eingebunden.
In der Datei index.html notieren wir:
<!DOCTYPE html> <html lang="de"> <head> <title>...</title> <link href="asset.css.php" rel="stylesheet"> </head> <body> <h1 class="text">...</h1> <div class="border text">Dies ist ein Text</div> </body> </html>
Auf diese Weise ist es sehr einfach CSS dynamisch im Server zu konstruieren. Es ist zum Beispiel auch möglich einen Benutzer Einstellungen vornehmen zu lassen (mag er die Schrift lieber kleiner?) und diese in einer Datenbank zu speichern. Meldet der Benutzer sich wieder an, werden seine Einstellungen im CSS wieder aufgerufen.
Zusätzlich ist es mit wenigen Erweiterungen möglich eine Asset-Pipeline zu implementieren. Wie wäre es zum Beispiel mit einem PHP-Skript das selbstständig alle CSS-Dateien aus einem Verzeichnis und allen Unterverzeichnissen einsammelt und zu einem Stylesheet aggregiert? Asset-Pipeline
Copyright © 2024