Actu
Creative
Blog Du Webdesign
Emploi BDW
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.
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.
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)?>" />.
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é ^^
Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus
Auteur : SANCHEZ Benjamin
voir son blog
Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.
le 24/03/11| #2
Une partie de mon commentaire précédent a sauté...
Les directives Apache devraient être à l'intérieur d'une condition filesMatch ".css$", pour être exact.
le 24/03/11| #3
Effectivement, il y a un moyen de mettre en cache du CSS, même dynamique. De manière générale, rien n'est impossible. Je ne connaissais pas ton petit trick avec apache, qui est ma fois fort bien sympathique, mais qui n'est pas "obligatoire". J'ai déjà fais sans, avec simplement un "style.css.php" et le code php à la main en haut pour le header.
Alors, dans ce cas, pourquoi ais-je dit qu'on ne pouvait pas mettre en cache le CSS? Car les explications sont pour un niveau bien plus élevé que le reste de mon article, et ne s'adresse vraiment pas aux mêmes personnes. Ton exemple mériterais presque un article à lui tout seul, pour bien l'expliquer, à vrais dire.
Cet article reste de la vulgarisation, avec toutes les contraintes que ça implique. En tout cas, merci bien pour ton petit trick. Ça t'ennuie si je fais quelques tests/recherches dessus pour en faire un article? Tu sera cité en remerciement ^^
le 24/03/11| #4
Je connaissais déjà l'astuce, mais ça m'a donné envi de la mettre en place sur mon blog (JuicyApple). Maintenant c'est chose faite.
Par contre, pour la géolocalisation, il y a maintenant la possibilité de la faire en HTML5 donc ça devrait pas poser de soucis :)
Demo : http://html5demos.com/geo
le 24/03/11| #5
J'ai retrouvé ce tutorial de Line25 qui expliquait comment changer le bg du site par rapport à la météo : http://line25.com/articles/style-your-site-according-to-the-weather-with-jquery
enjoy !
le 28/03/11| #6
Sympa mais j'aurais plutot rajouter une class au body genre
pour ensuite n'utiliser qu'un seul css
body.jour{background: ...}
body.nuit{background: ...}
etc..
le 06/07/11| #7
Bonjour,
Je suis du même avis que Thibault...
C'est beaucoup plus simple de changer la class du body ;-)
Magazine Webdesign, Tendance Web, Webdesign et Actualité Graphique. Suivez nos Articles rédigés avec soin sur les thèmes du Motion Design et de l'actualité du Web ! Suivez le Blog du Webdesign, suivez le Magazine du Webdesign !
En Savoir Plus
le 24/03/11| #1
Bonjour, et merci pour ce post intéressant.
Cela dit, pourquoi dire que le fait de générer le CSS empêche la mise en cache ? Tous mes CSS/JS passent par la moulinette de PHP, et ça ne pose aucun souci de cache, bien au contraire !
Je m'explique. On peut utiliser une directive Apache pour que les requêtes demandant des .css soient traitée par PHP par exemple :
AddHandler application/x-httpd-php .css
php_value auto_prepend_file "prepend_css.php"
La première ligne fait en sorte que les CSS soient interprétés par PHP, on peut donc imaginer toutes sortes de traitements pour générer le CSS.
La deuxième ligne fait que prepend_css.php est "auto prependé" aux fichiers .css. On peut donc, dans prepend_css.php, envoyer les bons headers pour que notre fichier soit bien un fichier CSS valide, et plus que ça : on peut définir précisément la gestion du cache. Par exemple, on pourra avoir quelque chose comme ça :
<?php
header("Content-type: text/css; charset: UTF-8");
$offset = 60 * 60 * 24 * 365 * 10 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
header("Cache-Control: max-age=315360000");
?>
Alors, qui a dit que le fichier ne pourrait pas être mis en cache ? ;-)
C'est totalement transparent pour le navigateur et ça ne change rien à la façon d'inclure le CSS dans le document HTML.
On pourra ensuite avoir l'étape ultime pour ne pas que les utilisateurs souffrent d'un cache pas à jour, mais là je ferai juste référence à cet article, qui explique cela très bien : http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/
Une fois qu'on a adopté cette façon de faire, c'est du bonheur, et ce n'est pas non plus si compliqué !