le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Générer un fichier CSS en PHP

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.

publié le 20/02/2012 par Memo Web
Commenter le Mémo :

Utiliser des constantes dans un fichier CSS
Comment rajouter un séparateur entre les items d'une liste
Effet carnet de notes en CSS 3 - empilement de feuilles
Comment utiliser une police google web font sur son site Internet
Rajouter du texte dans un élement via CSS
Width à  100% avec padding : Lorsque l'élément est plus large que prévu
Un joli titre sans image, tout en CSS
Dessiner un triangle avec CSS3
Lorsque le margin appliqué à un enfant déplace son parent
@font-face ou Comment choisir une police non standard
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos