Variablen in CSS mithilfe von PHP

CSS-Dateien werden mit der Zeit immer länger und unübersichtlicher. Zudem kommt, dass sich bestimmte Farben, Breiten, Schriftgrößen oder ähnliches immer wieder wiederholen. Wenn man diese dann irgendwann ändern möchte, dann muss man immer das komplette Dokument durchsuchen um wirklich alles zu ändern. Eine nervenaufreibende Tätigkeit, welche durch Variablen im CSS erleitert werden kann. Die einfache Verwendung von PHP in CSS-Dateien kann einem dabei helfen sein Stylesheets oder seine Stylesheets leichter zu managen.

Durch einen Beitrag bei Dr. Web inspiriert, möchte ich hier mal eine etwas sinnvollere Lösung bieten um Variablen in CSS zu benutzen als dort erwähnt wird. Dort findet man folgenden Satz:

Das Problem ist dabei nur, dass das Stylesheet unübersichtlicher wird, weil es nun nicht mehr abgekoppelt ist und zuerst durch einen Preprocessor „laufen“ soll.

Das ist aber nicht wirklich verständlich, denn die CSS-Datei kann nach wie vor einzeln darstellen. Man muss ihr lediglich beibringen PHP zu verstehen. Das sollte auf so ziemlich jedem Paid-Webspace möglich sein und sogar einige Freehoster lassen dies zu. Mit Hilfe einer htaccess-Datei kann man dem Server sagen, wie er bestimmte Dateien lesen soll.

Also brauchen wir dem Server nur zu sagen, dass er neben Dateien mit der Endung .php auch Dateien mit der Endung .css als PHP-Datei erkennen soll, bzw. dass er auch in dieser Datei das PHP parsen soll, damit man Variablen in der CSS-Datei benutzen kann. In der gleichen Anweisung kann man auch HTML-Dateien mit einschließen. Diese Anweisung würde dann so aussehen:

AddType application/x-httpd-php php php5 php4 php3 html htm css

Somit werden alle Dateien mit den Endungen .php, .php5, .php4, .php3, .html, .htm und mit der Endung .css auf die Liste der Dateien gesetzt, welche der Server parsen soll.

Jetzt sollte man sich aber nicht wundern, denn wenn man die Seite jetzt aufruft, wird kein Stylesheet geladen. Man muss der CSS-Datei nun erst wieder sagen, dass sie eine solche Datei ist und das tut man mit PHP. Dazu muss man lediglich folgendes in die CSS-Datei eintragen:

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

Damit weiß die CSS-Datei nun wieder, dass sie eine ist und kann es dem Browser auch so mitteilen. Darunter folgt dann ganz normal das CSS. Dieses muss nicht unbedingt in einer echo-Anweisung von PHP stehen, doch es ist platzsparender. Denn wenn das CSS einzeln steht, muss man immer wieder PHP mit <?php öffnen, eine echo-Anweisung einleiten, die Variable eintragen und mit ?> wieder PHP schließen.

Wenn man die kompletten CSS-Anweisungen in einer echo-Anweisung mit Doppelquotes macht, braucht man an die Stellen, an die die Variable soll lediglich die Variable eintragen. Somit wird sie ausgeführt und man spart sich eine Menge Code.

Sobald das erledigt ist, muss man eigentlich nur noch unter dem header-Befehl die Variablen definieren. Wie das geht, sollte man bereits wissen, ansonsten findet man auch sicherlich noch eine Seite, auf der das nochmal genau beschrieben wird ;)

Wenn man das alles gemacht hat und seine Variablen bestimmt hat, fallen zukünftige Änderungen wesentlich leichter. Denn man muss erstens nicht mehr suchen, wo sich eine Anweisung versteckt, da sie alle oben sind und zweitens muss man nur noch eine Stelle im Code ändern.