Wird ein Projekt größer und besteht aus verschiedenen Designelementen, dann kann es schnell sehr unübersichtlich für den Webmaster und Designer werden, falls alle CSS-Klassen in einer CSS-Datei zusammengeführt werden. Dann ist es übersichtlicher mehrere CSS-Dateien zu erstellen und diese in dem HEAD-Bereich des Quellcodes nacheinander einzubinden. Doch was für die Übersichtlichkeit von Vorteil ist, ist für die Geschwindigkeit der Webseite bei dem Laden (Performance) eher von Nachteil. Denn durch jede einzelne CSS-Datei muss der Server einen Request starten. Je mehr Requests benötigt werden, desto langsamer wird die Webseite.
Daher ist es empfehlenswert die einzelnen CSS-Dateien wieder zusammenzufassen. Dafür gibt es verschiedene Herangehensweisen.
Eine relativ einfache Variante ist das Zusammenfassen von CSS-Dateien in einem Ordner mittels eines kleinen PHP-Codes.
Vorgehensweise CSS Dateien zusammenfassen:
Kopiert den nachfolgenden Code in eine leere PHP-Datei und speichert diese dann ab. Z.B. unter der Bezeichnung kombi_css.php und ladet diese dann in den Ordner mit den CSS-Dateien. Empfehlenswert und Bedingung ist bei dieser Variante alle CSS-Dateien in einem einzigen Ordner abzulegen um sie anschließen mittels dem PHP-Code zusammenfassen zu können.
<?php
header('Content-type: text/css');
// CSS-Verzeichnis relativ zum Script
$css_verzeichnis = ".";
$css_dateien = array();
$oeffne_verzeichnis = opendir($css_verzeichnis);
// Test, ob Verzeichnis geöffnet werden konnte
if($oeffne_verzeichnis === false)
{
echo "Verzeichnis konnte nicht geöffnet werden.";
}
else
{
while($datei = readdir($oeffne_verzeichnis))
{
if(preg_match('/\.css$/',$datei))
{
$css_dateien[] = $datei;
}
}
sort($css_dateien);
// Ausgabe der CSS-Dateien im Array $css_dateien
foreach ($css_dateien as $value)
{
echo file_get_contents($value) . "\n\n";
}
}
?>
Solltet Ihr die kombi_css.php Datei nicht direkt in den CSS-Ordner ablegen können, dann müsst Ihr unbedingt den Pfad zu dem CSS-Ordner in der PHP-Datei anpassen. Ändert dazu bitte die Zeile$css_verzeichnis = ".";
Diese PHP-Datei wird dann ganz normal mittels INCLUDE_ONCE in dem HEAD-Bereich der Webseite aufgerufen. Das kleine Script fasst automatisch alle in dem Zielordner befindlichen CSS-Dateien zu einer einzigen zusammen. Testet dies einfach in dem Ihr den Quelltext der Webseite öffnet und darin auf die kombi_css.php-Datei klickt. Dann werdet Ihr feststellen, dass alle in dem CSS-Ordner befindlichen CSS-Dateien zu einer einzigen zusammengefasst sind.
One Comment
Mischa
Ein prima Script aber was vielleicht hier noch wichtig wäre zu erwähnen, ist die Tatsache, dass die Reihenfolge der CSS Dateien sehr wichtig ist.
Es gibt durchaus viele moderne Layouts (meist Themes von CMS etc.) in denen zunächst eine „Base-CSS“ das Layout regelt und mit Hilfe einer „Custom-CSS“ dann die Feinheiten der Seite eingestellt werden. Dabei überschreibt die Custom-CSS teilweise Stylings aus der Base-CSS.
Dies führt zu Darstellungsproblemen wenn die Base-CSS NACH der Custom-CSS geladen- oder wie hier ans Ende einer Datei gepackt werden sollte.