PHP in CSS / DSS - Dynamic Style Sheet

1 | 60873 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.