Le problème avec les fichiers CSS, ce sont leur rigidité, impossible d'utiliser des variables parametrables pour les couleurs par exemple, tout est gravé dans le marbre.
Pour contourner ce problème, on peut générer à la volée un fichier CSS en PHP.L'avantage de cette méthode est de permettre l'utilisation de variables PHP qui contiendront les codes couleur, les familles de font etc … Placées en début de fichier avec des noms parlants, tout changement dans le design devient alors beaucoup plus aisé puisqu'il suffit de changer la valeur de ces variables.
Ma technique consiste à créer un fichier CSS "normal" style.css pour tous les styles ne nécessitant pas l'utilisation de variables, et un deuxième généré en PHP (mon-fichier-css.php) qui contient tous les styles requêrant des constantes qui pourront être facilement modifiées en vue d'un changement de design.
Créer une feuille de style en PHP
Pour simuler une feuille de style en PHP
Il convient tout d'abord d'affecter le content-type de la page à celui d'une feuille de style .
On déclare ensuite ses variables
Et enfin on affiche la feuille de style proprement dite au moyen d'un echo() ou d'un print()
mon-fichier-css.php :
<?php header("Content-type: text/css; charset=utf-8"); if (date('G')>14) $nom_modele = "vert"; else $nom_modele = "bleu"; $couleur_fond ="#bed76b"; $couleur_police = "#deefba"; print" body{ background:".$couleur_fond." url('images/img-fond-".$nom_modele.".png ') repeat-x; } #conteneur{ color: ".$couleur_police."; } " ?>
Dans cette feuille de style nous avons paramétré des couleurs, ce qui facilitera plus tard d'eventuelles modifications de design.
Mais nous avons aussi utilisé cette technique pour changer l'image de background en fonction de l'heure. En effet selon l'heure système, on associe une valeur différente à la variable $nom_modele qui sera utilisée pour afficher le background du body.
Dans cet exemple, on a deux images de background images/img-fond-vert.png et images/img-fond-bleu.png, l'une ou l'autre sera affectée selon la valeur de la variable $nom_modele.
Déclaration de la feuille de style générée en PHP
La feuille de style mon-fichier-css.php se déclare dans la balise HEAD de mon site de la façon suivante
<style type='text/css'> <!-- /*<![CDATA[*/ @import 'mon-fichier-css.php'; /*]]>*/ --> </style>
Lire aussi cet article sur les constantes en CSS
Sur memo-web j'ai plutôt opté pour la méthode de génération dynamique de feuille de style offerte par less, basée sur un plugin javascript, car je ne connaissais pas encore la méthode sus-mentionnée.
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!