Mettre des variables dans sa CSS

Les feuilles de style CSS sont utilisées pour décrire la présentation d’un document structuré écrit en HTML ou en XML. De part cette fonction de présentation, on en déduit qu’il est donc nativement impossible de définir des variables dans une CSS. Après quelques recherches je remarque que des utilisateurs ont déjà fait part de cette idée pour CSS3. Quoiqu’il en soit, visiblement, tout le monde fait la sourde oreille ! Ne cherchant pas à rendre possible ce qui est jusque là impossible, j’ai donc décidé de contourner le problème. Et là, la brillante idée de générer ma CSS dans un langage interprété côté serveur m’est apparue Mon choix est fait, ma CSS sera générée en PHP (troll facultatif). En effet il aurait été possible de générer ma CSS dans un langage interprété côté client (comme le Javascript) mais visiblement cela pose quelques problèmes.

Le truc c’est que c’est plus facile à concevoir qu’à mettre en oeuvre…

Alors en gros il faut…

- faire croire au serveur que tous les fichiers .css sont des fichiers .php (comme ça on conserve les extensions .css mais on les fait traiter comme .php) -> Apache/.htaccess
- écrire une feuille de style avec des variables -> NotePad++
- mentionner l’entête du fichier lors de l’envoi au navigateur afin que ça ne soit du PHP pour le serveur et que ça reste du CSS pour le navigateur -> script PHP

Maintenant que les bases sont établies il va falloir faire ça nativement de la manière la plus simple possible…

@serveur variables { NomVariable: ValeurVariable; }

Voici comment les variables seront déclarées dans la CSS :

Selecteur { Propriete: ValeurVariable; }

Voici un exemple tout simple :

@server variables { primaryLinkColor: #AB6666; }
a { color: primaryLinkColor; }

Maintenant il faut se débrouiller à ce que le navigateur ne reçoive que ça :

a { color: #AB6666; }

Et c’est là qu’un script PHP va devoir nous montrer tout sa magnificence. Ce script devra, selon les règles, isoler la définition des variables. Le nom des variables ainsi que leurs valeurs seront définies comme des propriétés CSS. D’une manière générale le dit script fera office de parseur.

Le truc sympa c’est que Shaun Inman a codé ce script et en plus il le met gracieusement à notre disposition.

Une fois le script téléchargé, il suffit de l’uploader dans le répertoire contenant les CSS. Dans ce même répertoire on crée un fichier .htaccess avec :

AddType application/x-httpd-php .css
php_value auto_prepend_file /local-path-to-your-css-dir/css-ssv.php

Il faut bien sûr remplacer local-path-to-your-css-dir. Le répertoire local est donné par la variable $_SERVER[’DOCUMENT_ROOT’] de phpinfo(). Ensuite, à la fin, vous remplacez css-ssv.php par le nom de votre CSS dopée à la variable.

Et voilà comment on obtient une CSS fertile fourrée à la bonne grosse variable bien velue et tout ça selon l’excellente méthode à-la-rache (ou pas!)

Prochaine utopie : Intégrer ma CSS (générée en PHP) à mon flux RSS (lui aussi généré en PHP)