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.

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.