CSS: Änderungen mit der Uhrzeit

Viele Leute wollen ihre Seite interessanter gestallten, indem sie die Darstellungen leicht verändern. Entweder können User selbst bestimmen, wie der Style aussehen, oder man wechselt das Aussehen mit der Uhrzeit. So kann zum Beispiel nachts ein anderes (dunkleres) Design als tagsüber angezeigt werden. Wie das funktioniert, erkläre ich im Folgenden. Zum einen kann dies mit DSS realisiert oder einfach mit PHP in einer HTML-Datei.

Realisierung via DSS
Wie DSS funktioniert, hab ich schon hier erklärt. Hier nun das Beispiel, wie man von 20:00 Uhr bis 08:00 Uhr morgens eine andere Hintergrundfarbe und eine größere Schrift haben möchte. Das ganze kann man natürlich auch auf andere Werte anwenden. Hier aber erstmal nur die Farbe und die Schriftgröße:

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

  if (date("G")>8 && date("G")<20){
    $background = "#fff";
    $size = "10px";
  } else {
    $background = "ccc";
    $size = "15px";
  }
?>

body {
  background-color: <?=$background?>;
  font-size: <?=$size?>;
  color: #000000;
}

Wie schon oben erwähnt kann man die Funktion mit noch viel mehr Variablen erweitern, sodass man theoretisch ein komplett anderes Design zu bestimmten Uhrzeit haben kann. Probiert es doch einfach aus.

Realisierung via PHP in HTML

Die Realisierung per PHP in der HTML-Datei ist nicht so ressourcenschonend, wie die Realisierung per DSS, da bei diesem Beispiel 2 CSS-Dateien verwendet werden müssen. Praktischer wird es allerdings, wenn man gleich zwischen zwei komplett verschiedenen Designs verwechseln möchte. Außerdem ist diese Variante für den Nutzer schneller, da die Stylesheets gecached werden dürfen, ohne dass dadurch Probleme entstehen könnten. Wenn man allerdings nur einige Werte abändern möchte, ist die DSS-Variante für den Admin besser.

<html>
  <head>

<?php 
date_default_timezone_set('Europe/Berlin');
if (date("G") < 8 || date("G") >= 20) {
 $css = "<link rel=\"stylesheet\" type=\"text/css\" href=\"nacht.css\">";
}
else {
 $css = "<link rel=\"stylesheet\" type=\"text/css\" href=\"tag.css\">";
}

echo $css;
?>

  </head>
  <body>
  </body>
</html>

Welche Variante man für besser hält, kann jeder für sich entscheiden. Ich hoffe, ich konnte euch helfen.

2 Kommentare
  1. Das würde ja Stylesheets noch mehr leben einhauchen. Aber speichert man dann das Stylesheet als php-Datei?

    Antworten
    1. November 2012, 13:13

Schreibe einen Kommentar zu Heinrich Reimer Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*