Inhaltsverzeichnis
In vielen Situationen möchte man das Design seiner Website dynamisch ändern. Dies ist zum Beispiel bei Nutzern der Fall, die zwischen einem Light Mode und einem Dark Mode wählen können. Selbstverständlich gibt es noch viele weitere Beispiele dafür.
Technisch gesehen kann man das sogar relativ einfach auf verschiedene Arten umsetzen. Zum einen bietet sich natürlich JavaScript an. Zum anderen kannst du aber auch PHP mit CSS verbinden. Genau darum wird es in diesem Beitrag gehen. Für diesen Beitrag sind sehr grundlegende Kenntnisse in CSS und PHP vorausgesetzt.
Das ist DSS!
Wenn man eine Website designen möchte, kommt man an CSS nicht vorbei. CSS ist für das Design, für das Layout oder anders gesagt, für das Aussehen einer Website verantwortlich. Allerdings ist CSS-Code nicht dynamisch, sondern statisch. Das bedeutet, dass man das Aussehen der Website theoretisch nicht ohne eine weitere Änderung am Quellcode ändern kann.
Genau dort kommt DSS ins Spiel! DSS steht für „Dynamic Style Sheets“ und erlaubt dem User, das Aussehen einer Website dynamisch zu ändern. Aber schließen wir mit der Theorie ab und schauen uns mal zusammen ein Praxisbeispiel an.
In meinem Beispiel möchte ich die Hintergrundfarbe und die Textfarbe ändern. Dies könnte man zum Beispiel in einem Adminbereich einstellen. Allerdings würde dies jetzt den Rahmen sprengen, sodass wir uns das einfach mal vorstellen und den Variablen keine Werte aus einer Datenbank zuweisen.
Beginnen wir mit unserem CSS-Code, der noch komplett unverändert ist.
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
background: #12a4d9;
color: #322e2f;
}Mit diesem CSS-Code weisen wir unserem Body mehrere Werte zu. Um genau zu sein, weisen wir dem Body eine andere Schriftart, einen Innenabstand, eine Hintergrundfarbe und eine Textfarbe zu. Die zugewiesenen Farben werden nun für uns relevant.
In der Theorie möchten wir diese Farben über unseren Administrationsbereich ändern, ohne den Quellcode selbst ändern zu müssen. Genau dort greift jetzt unser PHP-Code ein. In der Theorie würde es durchaus Sinn ergeben, diese Werte in eine Datenbank einzutragen und anschließend auszulesen. Aber wie bereits erwähnt, würde dies meiner Meinung nach hier den Rahmen sprengen. Daher werde ich die Werte direkt zuweisen.
Schritt 1 – Das Anlegen einer neuen Datei
Zuallererst müssen wir eine neue Datei anlegen. Damit wir PHP-Code in der Datei schreiben und nutzen können, dürfen wir logischerweise dafür keine CSS-Datei verwenden. Wie du die Datei nennst, liegt ganz bei dir. Wichtig ist nur die Dateiendung .php!
Ich bin persönlich ein Fan von Indikatoren, damit man direkt erkennen kann, welchen Zweck eine bestimmte Datei hat. Bei Includedateien hänge ich z. B. immer ein .inc mit dran (include.inc.php). Aus diesem Grund bevorzuge ich persönlich es, die Datei style.css.php zu nennen. Daher weiß ich direkt, dass es sich um eine DSS-Datei handelt.
In der ersten Zeile unserer neuen Datei werden wir mit dem HTTP-Header den Typ der Ressource definieren. Das ist wichtig, damit die Datei und darin enthaltene Code auch richtig interpretiert werden kann.
<?php
header('Content-type: text/css');
?>Schritt 2 – Den alten CSS-Code übertragen
Im nächsten Schritt übertragen wir unseren alten CSS-Code aus der nun irrelevanten Datei in unsere style.css.php! Das sollte in deiner Datei folgendermaßen aussehen.
<?php
header('Content-type: text/css');
?>
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
background: #12a4d9;
color: #322e2f;
}Schritt 3 – Variablen anlegen und Werte zuweisen
Kommen wir zu Schritt 3, welcher auch gleichzeitig den letzten Schritt darstellt. Wir werden jetzt Variablen anlegen und diesen Variablen anschließend Werte zuweisen. Dies passiert natürlich innerhalb des PHP-Codes.
Im CSS-Code werden wir über PHP mithilfe von echo diese Variablen nur einbinden. Das war es dann im Prinzip schon! In der Praxis sieht das folgendermaßen aus.
<?php
header('Content-type: text/css');
// Variablen definieren
$backgroundColor = "#12a4d9";
$textColor = "#322e2f";
?>
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
background: <?php echo $backgroundColor; ?>;
color: <?php echo $textColor; ?>;
}Das war es dann auch schon! Die DSS-Datei wird jetzt wie eine normale CSS-Datei in den Header geladen. Ich hoffe, dass dir dieser kleine Beitrag zu dynamischem CSS-Code gefallen hat. Solltest du irgendwelche Fragen haben, zögere bitte nicht mir eine Nachricht in den Kommentaren zu hinterlassen – dein Maurice.