PHP in CSS / DSS - Dynamic Style Sheet

1 | 18 Kommentare | 58196 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "PHP in CSS / DSS - Dynamic Style Sheet" mit Ihrem Wissen!

Anzeige Hier werben

Einführung in DSS - Dynamic Style Sheets

Zu Beginn muss gesagt werden, dass die Technik von Dynamic Style Sheets kurz DSS im Webdesign keine Pflicht ist. Spätestens dann, wenn man sich beim Layouten eine Besonderheit wünscht, steht dem Webdesigner die Option offen einfaches PHP in CSS effektiv zu nutzen.

Vorteile

  • Einfache dynamische Layouts gewinnen an Überblick
  • Ändern/Anpassen von Farben mit wenig Aufwand durch Variablen
  • Verschiedene Layouts eines Media-Typs in einer CSS Datei
  • Algorithmen erzeugen dynamische Layouts
  • Kein PHP in der Ausgangsdatei nötig
  • PHP-Codeblöcke (außer Ausgabetext) in der CSS-Datei für Besucher nicht einsehbar

Nachteile

  • Komplexe dynamische Layouts verlieren an Überblick
  • Grundlegende PHP Kenntnisse erforderlich

Die einfache Grundstruktur

Für die Grundstruktur wurden alle unwichtigen Dinge wie z.B. die Meta-Tags oder das DOCTYPE entfernt um das Verständnis zu vereinfachen.

index.html  
HTML
1
2
3
4
5
6
7
8
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css.php" />
  </head>
  <body>
  ...
  </body>
</html>

Im Head-Bereich der index.html wird die CSS-Datei style.css.php gelinkt. Eine Besonderheit besteht darin, dass die CSS-PHP-Datei zuerst serverseitig bearbeitet und dann erst in die Ausgabedatei geladen wird. Aus diesem Grund, kann die Ausgabedatei eine gewöhnliche HTML-Datei sein. Außerdem ist der PHP-Quelltext mit Ausnahme der Textausgabe für Besucher nicht einsehbar. Beim Besucher landet die gewöhnliche Dateigröße im Cache.

Neben der Pfadangabe, wo sich die Datei befindet (href="pfad/dateiname.css.php"), muss unbedingt der Dateityp (type="text/css") und der Bezug (rel="stylesheet") für CSS mit angegeben werde.

style.css.php  
PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
  header('Content-type: text/css');
  /*
    Hier werden Variablen und ggf.
    Algorithmen festgelegt.
  */
?>

body {
  background-color: #ffffff;
  color: #000000;
}

Es reicht nicht aus, in der Ausgabedatei den Inhalts-Typ und den Bezug des Stylesheets festzulegen. In der CSS-Datei muss man den Inhalts-Typ (Content-type) nochmals auf text/css festlegen, weil der Server sonst automatisch die PHP-Datei mit Inhalts-Typ text/html festlegt. Dies hätte zur Folge, dass einige Browser gar nicht die CSS-PHP-Datei lesen könnten.

Zwei Beispiele plus Erläuterungen

Bequeme Variablen festlegen

Besitzt man Farben in der CSS-Datei, die mehrmals auftauchen, so kann man diese als Variablen festlegen. Ebenso erweist es sich als sehr praktisch, wenn man allgemeine Wertzuweisungen ebenso in einer Variable festlegt.

Unternehmen, die ein Corporate Design besitzen, haben immer festgelegte "Unternehmensfarben". Wie zum Beispiel die Deutsche Post, AMD oder LIDL. Diese könnte man auch als feste Variablen festlegen, um sich nicht immer die Hexa-Farben merken zu müssen. Zum Beispiel könnte man das Grün von AMD (#16a86f) in der Variable $green abspeichern.

style.css.php  
PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
  header('Content-type: text/css');
  $background = "#ffffff";
  $color = "#000000";
  $green = "#16a86f";
?>

body {
  background-color: <?=$background?>;
}
#logo {
  color: <?=$green?>;
  font-weight: bold;
}
#slogan {
   color: <?=$color?>;
}
#rahmen {
  border: 0.1em solid <?=$green?>;
  text-align: center;
}
Kurzschreibweise  
PHP
1
<?php echo $green; ?> = <?=$green?>
index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style_wmp.css.php">
  </head>
  <body>
    <div id="rahmen">
      <p id="logo">AMD</p>
      <p id="slogan">Advanced Micro Devices</p>
    </div>
  </body>
</html>

Falls man nun ein anderes Grün oder eine ganz andere Farbe für das gesamte Layout wählen möchte, so braucht man nur noch einen Wert zu ändern. In diesem Beispiel würde man die Schriftfarbe für AMD und die Rahmenfarbe gleichzeitig ändern.

Eine CSS-PHP-Datei verhält sich wie eine normale PHP-Datei, d.h., dass man sich auch zur einer Datenbank verbinden und somit Farbwerte einlesen kann.

Einfacher Uhrzeit-Algorithmus

Das Layout kann man nach einfachen Kriterien verändern. In dem nächsten Beispiel bestimmen wir das Layout durch die Uhrzeit. Von 6 bis 18Uhr soll der Hintergrund weiß und die Schrift schwarz sein. Von 18 bis 6Uhr soll es wechseln.

style.css.php  
PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
  header('Content-type: text/css');

  if (date("H")>6 && date("H")<18){
    $background = "white";
    $color = "black";
  } else {
    $background = "black";
    $color = "white";
  }
?>

body {
  background-color: <?=$background?>;
  color: <?=$color?>;
}
index.html  
HTML
1
2
3
4
5
6
7
8
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style_wmp.css.php">
  </head>
  <body>
    Text
  </body>
</html>

In der CSS-PHP-Datei wird die Uhrzeit kontrolliert und dementsprechend die Werte festgelegt. Dies ist ein sehr simples Beispiel, welches jeder verstehen sollte.

Aufwendiger wird es mit Algorithmen, die ganze Boxen tauschen oder Inhalte ausblenden. Aber darin liegt der Reiz, möglichst dynamischen Content zu erstellen.

Aktualität mit cache-header

CSS Dateien werden, wenn sie im Kopf-Bereich einer HTML-Seite inkludiert werden, in den Browser Cache gespeichert. Benutzt man ein StyleSheet, welches sich öfters oder gar ständig ändert, ist es zu empfehlen die Seite in festen Perioden oder immer neu vom Webserver zu laden. Dem Webdesigner stehen dazu zwei Möglichkeiten zur Verfügung.

Die erste Variante nutzt ein Meta-Tag, welches dem Browser es verbietet die Seite im Cache zu laden. Dies hätte zur Folge, dass man immer, also bei jedem Seitenaufruf, alle Daten neu laden würde.

 
HTML
1
<meta http-equiv="cache-control" content="no-cache" />

Die zweite Variante wäre, dem Browser zu befehlen, wann er spätestens den Cache neu zu laden hat. Der Wert "0" in der Eigenschaft content ist gleichwertig zum oben beschriebenen cache-control. Daraus folgt, dass der Cache bei jedem Seitenaufruf neu geladen wird.

 
HTML
1
<meta http-equiv="expires" content="0">

Ersetzt man die 0 durch eine höhere Zahl, wie zum Beispiel "60". So wird ab dem Zeitpunkt des ersten Aufrufs plus 60 Sekunden später der Cache neu vom Server geladen. Dadurch kann man festlegen, in welchen Zeitintervallen der Cache neu geladen wird.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "PHP in CSS / DSS - Dynamic Style Sheet" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "PHP in CSS / DSS - Dynamic Style Sheet" hier bearbeiten.


Kommentare: PHP in CSS / DSS - Dynamic Style Sheet

Neuen Kommentar schreiben
Firefox?
Beantworten

Kann es sein, dass diese Methode vom Firefox nicht unterstützt wird? Habe die neueste Version und bekomme eine CSS-lose Seite angezeigt; Opera und IE fressen es ohne Probleme.

Martin G. am 14.12.2008 um 14:09
Cache Header
Beantworten

Ich würde den Artikel auf jeden Fall noch um Cache-Header Erweitern. Ohne Diese macht das ganze wirklich wenig sinn, da die CSS-Dateien dann unnötigerweise immer neu geladen werden.

Thomas H am 28.11.2008 um 14:23
Re: Cache Header
Beantworten

hinzugefügt ;)

Darius M. am 28.11.2008 um 16:12
Re: Cache Header
Beantworten

Ach ja: Dein HTML-Zeug dass du geschrieben hast hat nur auswirkung auf das caching der HTML-Datei (und wird warscheinlich eh von den HTTP-Headern überschrieben.

Thomas H am 28.11.2008 um 18:04
Re: Cache Header
Beantworten

... bloß leider etwas falsches :)

Es ging mir darum, dass man zu den CSS-Dateien einen Cache-Header sendet. Also neben dem header('Content-type: text/css'); noch einen, der erreicht, dass die CSS-Datei GESPEICHERT wird und nicht jedes mal nu geladen wird.

Hier ein Beispiel, dass die Datei eine Stunde gecacht werden soll. Ein längerer Zeitraum ist eigentlich schlauer.

 
Text
1
2
header('Cache-Control: max-age=3600, must-revalidate');
header('Expires: ' . date('r', time() + 3600));

Thomas H am 28.11.2008 um 18:01
Re: Cache Header
Beantworten

Kannst du es bitte ergänzen, habs zugänglich für jeden gemacht. Muss nun zum Geburtstag :P

Darius M. am 28.11.2008 um 18:40
Re: Cache Header
Beantworten

Habe da leider gerade keine Zeit zu....

Thomas H am 29.11.2008 um 16:55
Zum Beispiel
Beantworten

Den Wechsel der Farbe nach der Uhrzeit würde ich mit der Methode nicht implementieren. CSS-Dateien haben den großen Vorteil, dass der Browser sie lange Zeit cachen kann. Ein PHP-Script sollte dementsprechend immer die nötigen HTTP-Header senden. Wird der Code abhängig von internen Parametern generiert wird das Caching unmöglich.

Deswegen würde ich ein dynamisches Stylesheet immer nur von externen Parametern abhängig machen, also beispielsweise GET-Variablen. Nur so kann der Browser das Resultat sinnvoll cachen und so Traffic und auch Wartezeit verringern.

Wird es nötig das CSS bei jedem Request neu zu laden kann man es auch direkt, also innerhalb von <style>, in die Ausgabe einbetten. Das würde sich in dem Fall sogar positiv auf Last und Traffic auswirken.

David Danier am 25.11.2008 um 19:22
Re: Zum Beispiel
Beantworten

Achja, noch ein Hinweis: Wenn man das Beispiel so abändert, dass es je nach Uhrzeit als style.css.php?time=day|night eingebunden wird wären meine Einwände natürlich umgangen. Wenig Änderung, viel Auswirkung. :D

David Danier am 25.11.2008 um 19:24
Ein Blick …
Beantworten

… lohnt sich auch auf die CSS Server Side Constants (CSS SSC) von Shaun Inman. Ist ziemlich der gleiche Ansatz, noch ein wenig ausgetüftelt.

Benutzer gelöscht am 25.11.2008 um 15:03
Hilfreich
Beantworten

Ich denke auch, dass es ganz nützlich sein kann. :)

Lukas R am 24.11.2008 um 09:28
Viele Verwendungsmöglichkeiten
Beantworten

Hallo,

ich finde die Idee dahinter sehr gut. Man stelle sich vor man hat z. B. diverse Anlässe, wie z. B. jetzt Adventszeit und Weihnachten. Wenn man z. B. verschiedene Logos oder andere Elemente auf der Website hat, braucht man sich nicht mit Cronjobs rumschlagen oder die Dinge alle selbst hochladen, sondern überlässt es PHP.

Besonders auch temporäre Anzeigen lassen sich so gut umsetzen, ohne das man vorher irgendwo großartig rumprogrammieren muss.

Markus Stahmann am 24.11.2008 um 09:19
farbschemata
Beantworten

kannte ich nicht, die methode. aber ich glaub ich werd mir das mal ansehen und dann auch nutzen, denn es nervt mich immer wieder, das ich in css-dateien mehrere male ein und dieselbe farbe verwende und dann immer entweder aus dem gedächtnis oder durch farbcode suchen -> kopieren - einfügen rumtun muss. so kann man immer $hellergrauton, $typischesrot, $hellestürkis vordefinieren und wiederverwenden. eben wie farbnamen, nur individuell. super :)

meggs am 23.11.2008 um 18:41
Guter Denkanstoß
Beantworten

Ist auf jedenfall nen guter Denkanstoß, wenn man das dann noch mit ner Datenbank verbindet kann man da schon coole Sachen mit machen. Wenn man z.B. Vereins Homepages oder so basteln soll.

André F. am 23.11.2008 um 15:52
Re: Guter Denkanstoß
Beantworten

Gerade bei CMS macht es Sinn. Man speichert als Admin seine Farben in einer Datenbank ab, welche immer aus der CSS-PHP gelesen werden. Finde die Art vorallem sehr bequem.

Darius M. am 23.11.2008 um 16:00
Re: Guter Denkanstoß
Beantworten

Kleine Frage an euch: ich bin gerade dabei ein kleines CMS zu programmieren, dabei hab ich die vorgestellte Technik auch einmal ausprobiert. Leider hat es bei mir nicht ganz funktioniert. Ich hatte sowas mit integriert:

<?php
$seite = (isset($_GET['seite']))? $_GET['seite'] : '';
switch ($seite) {
default :
case "about" :
echo "
<style type='text/css'>
#site1
{

float:left;
color:#FFFFFF ! important;
text-decoration:none;
background-image:url(base/images/navi_hover.jpg);
background-repeat:repeat-x;

}
</style>
";
break;
case "gallery" :
echo "
<style type='text/css'>
#site2
{

.

.

.

Wie schon beschrieben, funktioniert es leider nicht - ich hatte auch den cache deaktiviert. Gerne würde ich das auch weiter ausbauen - mit Datenbank. Da dies aber schon nicht gefunkt hat, hab ich nun Zweifel daran.

Werden Funktionen etc. nicht im "template.css.php" ausgeführt?

Danke

Thomas Kühnlein am 23.01.2010 um 19:12
Re: Guter Denkanstoß
Beantworten

Also wenn das der volle Quelltext ist, dann hast du das header vergessen, das ist sehr wichtig! Sonst kann das ganze auch nicht klappen.

Außerdem hast du wirklich Blöcke die die ID site1 und site2 haben? Ist mir nur so aufgefallen.

Gruß,

Andre

André F. am 25.01.2010 um 15:57
Re: Guter Denkanstoß
Beantworten

Genau das meine ich ja. Meistens bastelt man ja nen CMS für Vereine und nit für sich selber. (also so mache ich das zumindest).

Ich brauche kein großes Backend für meine Homepage, kann ja auch so an die DB und Datein dran.

André F. am 23.11.2008 um 16:02