Dans ce petit tutoriel qui se veut très accessible pour toute personne sans connaissances en PHP, nous allons décortiquer un moyen de changer des éléments de notre site en fonction de la date et de l’heure.

Le site Le Mans Live, propulsé par Michelin met en place une idée interessante: avoir un css qui change en fonction de l’heure de la journée. Voyons comment mettre ça en place de manière toute simple.

Site à l’aube

Site la journée

Site en soirée

Site la nuit

Quels choix s’offrent à nous?

Nous sommes en train de parler de gérer un nombre plus ou moins conséquent de CSS, et nous approchons donc d’un terrain glissant: Doit on faire 5, 6 CSS, parfois plus, identiques à 80%? Ça serait le plus simple, mais chaque changement devrait se faire sur tout les CSS, et ça serait bien long. Examinons nos autres choix:

1: Découper son css: Les 80% de css partagés sont mise dans un css, et les parties qui changent sont mises dans d’autres. Il ne nous reste plus qu’à en appeler un tout le temps, et appeler l’autre selon l’heure de la journée. L’inconvénient est de multiplier le nombre de requètes. Je ne parlerais pas du système d’@import, d’autres le font mieux que moi.

2: Faire générer son CSS par le serveur en php: En faisant comme ça, le css ne peut pas être mis en cache, et de toute manière, c’est la solution la plus compliquée, donc on ne la traitera pas ici.

3: Donner une classe au body, et mettre tout le css dans le même fichier, puis utiliser la classe du body pour les différentes situations. On n’a plus le problème de requêtes multiples, mais on importe des lignes de CSS qui ne servent pas.

En conclusion, comment faire? Si vous n’avez que 2 ou 3 différents designs, la dernière possibilité. Au delà, privilégiez la première. C’est celle ci que l’on va traiter ici.

Le Vif du sujet

Bon, nous avons maintenant nos différents CSS dans un dossier css à la racine, avec les parties communes rangées dans un « base.css », et les parties changeantes dans d’autres css (Je n’explique pas comment faire des css, vous êtes grands). Il nous faudrait maintenant un moyen de connaitre la date et l’heure. Je vous le donne:getdate().

Maintenant que nous avons notre date, que nous manque-t-il? Un moyen de gérer des conditions: S’il est moins de 5h, affiche nuit.css. Entre 5 et 8h, c’est aube.css qui est à l’honneur, puis matin.css, midi.css, apres_midi.css… vous avez compris le topo. Mettons ça en place.

<?php
// On récupère la date d’aujourd’hui.
$date = getdate();

// Voici les conditions. L’expression à comparer est mise dans le switch
switch ($hours = $date[« hours »]){
  // Puis on met les possibilités dans les case. On pense bien au break, c’est important.
  case ( $hours < 5 ):
     $css = « nuit.css »;
  // Je me répète, mais c’est vraiment important, le break
  break;

  case ($hours < 8):
    $css = « aube.css »;
  break;

  case ($hours < 11):
    $css = « matin.css »;
  break;

  case ($hours < 19):
    $css = « apres_midi.css »;
  break;

  case ($hours < 22):
    $css = « crepuscule.css »;
  break;

  default:
    $css = « nuit.css »;
  break;
}
?>

Et voilà! Pensez à modifier les heures, noms de css, tout ça, ça peut servir, et on y est! Il ne nous reste plus qu’à modifier l’appel de notre css avec $css. Exemple:

<link rel= »stylesheet » type= »text/css » href= »css/base.css » />
<link rel= »stylesheet » type= »text/css » href= »css/<?php echo($css)?> » />.

Pour aller plus loin

getdate() permet de donner bien plus de chose que simplement les heures! Voilà la liste des choses que vous pouvez mettre à la place de « hours » dans $date[« hours »]:

  seconds // la seconde
  minutes // la minute
  hours // l’heure
  mday // jours du mois
  wday // jours de la semaine
  mon // le mois
  year // l’année
  yday // le jour de l’année

Et pour aller VRAIMENT plus loin, il pourrait être interessant, par exemple, de faire changer le css en fonction de l’heure qu’il est chez le visiteur, et non pas sur le serveur. Et pourquoi pas, même, en fonction du temps qu’il fait chez le visiteur. Mais comment faire? Si nous avions le moyen de localiser le visiteur, et un moyen de récupérer le temps qu’il fait chez lui, ça ne serait finalement pas si compliqué ^^