CSS Dateien zusammenfassen
Wird ein Projekt größer und besteht aus verschiedenen Designelementen, dann kann es schnell sehr ü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 diesen in dem HEAD-Bereich einzubinden. Doch was für die Übersichtlichkeit von Vorteil ist, das 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. Dazu gibt es verschiedene Möglichkeiten. Eine Variante ist z.B. hier beschrieben CSS kombinieren
Eine weitere, noch einfachere Variante ist das Zusammenfassen von CSS-Dateien in einem Ordner mittels eines kleinen PHP-Codeschnipsel.
Vorgehensweise CSS Dateien zusammenfassen:
Kopiert den nachfolgenden Code in eine leere PHP-Datei und speichert diese dann ab. Z.B. unter kombi_css.php und ladet diese dann in den Ordner mit den CSS-Dateien. Empfehlenswert ist es, bei diese Variante, alle CSS-Dateien in einem einzigen Ordner zusammenzufassen.
<?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 legen, dann müsst Ihr unbedingt den Pfad zu dem CSS-Ordner in der PHP-Datei anpassen. Ändert dazu bitte die Zeile = “.”;
Diese PHP-Datei wird dann ganz normal mittels
in dem HEAD-Bereich der Webseite aufgerufen. Es fasst automatisch alle in dem Ordner 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 das alle in dem CSS-Ordner befindlichen CSS-Dateien zu einer einzigen zusammengefasst sind.
