Letzte Woche ging es um dynamisches CSS (DCSS). Wie wir dabei festgestellt haben ist die Verwendung von PHP in CSS-Dateien nicht nur möglich, sondern bietet auch den Vorteil verschiedene Stylesheets aus verschiedenen Quellen zusammen fügen zu können. Damit hätten wir eine CSS-Pipeline, ähnlich den Mechanismen einer Asset-Pipeline die viele aus anderen Frameworks kennen. Wir veranschaulichen das an einem einfachen Beispiel.

Asset-Pipeline

Wir nehmen unser Beispiel aus der letzten Woche (auch zu finden unter https://www.relast.de/knowhow/dcss) und erstellen uns eine Datei mit der notwendigen header-Angabe.

In der Datei „asset.css.php“ notieren wir:

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

Wir nehmen weiterhin an, dass wir ein umfangreiches Verzeichnis an Stylesheet-Dateien haben, an denen eine Gruppe von Entwicklern unabhängig arbeitet. Die Dateien aus diesem Verzeichnis sollen automatisch zusammen gefasst und eingebunden werden. Statt der bisher vorgeschlagenen mehrfachen „includes“ wollen wir daher eine Iteration über das Verzeichnis haben. Dies geschieht mit einer rekursiven Funktion.

Asset-Funktion

Wir benötigen eine einfache Funktion, die sämtliche Dateien und Unterordner sammelt. Problem ist, das wir im Vorfeld nicht wissen, wie die einzelnen Stylesheet-Dateien in den Verzeichnissen benannt wurden.

In der Datei „asset.php“ notieren wir:

<?php
function assetCSS($dir) {
  $files = glob($dir.DIRECTORY_SEPARATOR.'*.css*');
  if ($handle = opendir($dir)) {
    while (false !== ($entry = readdir($handle))) {
      if ($entry != "." && $entry != "..") {
        if (is_dir($dir.DIRECTORY_SEPARATOR.$entry)) {
          $files = array_merge($files, assetCSS($dir.DIRECTORY_SEPARATOR.$entry));
        } 
      }
    }
    closedir($handle);
  }
  return $files;
}
?>

Dank dieser Funktion sind wir in der Lage ein beliebiges Verzeichnis zu definieren, wobei innerhalb dieses Verzeichnisses in beliebigen Unterverzeichnissen eine beliebige Menge an Stylesheet-Dateien liegen kann. Diese Stylesheet-Dateien müssen ein „.css“ im Namen haben, dürfen also auf die Endung „.css“ oder auf „.css.php“ enden. Alle Dateien, die dem Schema entsprechen werden nun eingebunden.

Einbinden

Nachdem wir alle relevanten Dateien gesammelt haben, müssen diese eingebunden werden.

In der Datei „asset.css.php“ notieren wir:

<?php
include "asset.php";
$files = assetCSS('stylesheetverzeichnis');
header('Content-type: text/css');
foreach ($files as $file) {
  include $file; 
}
?>

Fertig

Die Datei „asset.css.php“ können wir an beliebiger Stelle in unserem Projekt referenzieren:

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

Vorteil

Dank der Selektoren „.css“ oder „.css.php“ können wir sowohl reguläre CSS-Dateien als auch DCSS-Dateien im Projekt verwenden. Wie viele Dateien existieren und in welcher Form diese strukturiert sind, interessiert dabei nicht. Die Entwickler im Stylesheet-Team können vollkommen unabhängig arbeiten und ihre Arbeit innerhalb von „stylesheetverzeichnis“ strukturieren. Es ist ebenso möglich die Stylesheets Server-übergreifend einzusetzen, da die Datei „asset.css.php“ referenzierbar ist.

Damit haben wir eine einfache Form einer Stylesheet-Pipeline, zentral abgelegt, Projekt-Übergreifend verwendbar, erweitert um den Vorteil von dynamischem CSS. Das Beispiel ist ebenso problemlos auf JavaScript-Dateien erweiterbar. Mit einem „javascriptverzeichnis“ und dem Selektor „'*.js*'“ lassen sich Script-Dateien analog zu den Stylesheets einbinden.

Fazit

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

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

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">