 |
 |
Effectuez une recherche sur la totalité du site :
Si vous souhaitez vous aussi écrire sur Game On Net et partager ainsi votre propre expérience, n'hésitez pas à nous contacter.
Des CSS dynamiques
jeudi 1er décembre 2005 par Prélude
Une feuille de style n’est pas, à prioris, dynamique et son contenu est donc condanné à rester le même quoiqu’il arrive. Voici une astuce pour rendre dynamique vos feuilles de styles.
Vous avez complètement réalisé votre site en CSS et vous en êtes fier et vous avez bien raison.
Et maintenant, vous avez une envie soudaine : que le fond de votre page change de couleur en fonction de l’heure. Blanc dans la journée, et gris le soir (une idée comme une autre, mais c’est toujours mieux qu’un fond vert fluo. Quoique...)
Alors comment faire puisque la feuille de style ne peu être modifiée dynamiquement ?
La solution
La solution, valide W3C, consiste, pour commencer, à renommer votre feuille de style CSS en .php (page_style.php par exemple au lieu de page_style.css), puis de placer en entête de cette page la ligne suivante :
<?php header("Content-type: text/css"); ?>
Après quoi, vous appelez votre feuille de style normalement depuis votre page :
<link rel="stylesheet" type="text/css" href="page_style.php">
Votre feuille de style peut donc contenir du php et être complètement dynamique :
<?php header("Content-type: text/css"); ?>
<?
$t = date("H");
if($t > 8 && $t < 20) { // entre 8h00 du matin et 20h00
$maCouleur = "#FFFFFF";
}else{ // sinon, c'est la nuit
$maCouleur = "#AAAAAA";
}
?>
body {
background:<?echo $maCouleur?>;
}
Evidement, la feuille de style est recalculée à chaque chargement de la page, ce qui va entraîner une charge serveur. Il faut donc en tenir compte et ne pas abuser de ce système.
Réagissez à cet articleForum
-
Tout simple mais méconnu ! donc intéressant. On perd cependant un des avantages du CSS qui est d’être chargé en cache et d’éviter les chargements trop lourds à chaque page ? On peut toujours combiner les deux et avoir une feuille CSS principale fixe, + une autre dynamique.
-
Ce problème peut être résolu à condition de gérer le header http "if-modified-since" qui contient la date de la version en cache côté client, et de renvoyer un code 304 si la CSS n’a pas changé depuis cette date. C’est ce qui est fait par exemple dans le framework Seagull.
-