Magazine

Mettre des variables dans sa CSS

Publié le 06 novembre 2007 par Paul

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)


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Coins arrondis en CSS

    Y’a des visiteurs qui postent des commentaires sur mon blog et qui m’envoient des mails à l’orthographe plutôt approximative. Exemple : “Comment que tu fais... Lire la suite

    Par  Paul
    A CLASSER
  • Quelques nouveautés à mettre en place...

    Nous devrions recevoir les dernières commandes de noël passées chez nos fournisseurs cette semaine et j'avoue être un peu angoissée vis à vis des grèves,... Lire la suite

    Par  Mzelle Lulu
    CUISINE, ENTREPRISE, A CLASSER
  • Css, html, xhtml.... h.e.l.p.

    Bon, il faut se rendre à l'évidence : je suis la BBI des CSS, HTML, XHTML... Je voulais améliorer le graphisme de mon blog... c'est vrai qu'on a vite fait d'en... Lire la suite

    Par  Céline Poncet
    A CLASSER
  • 47 excellents formulaires en Ajax et CSS

    excellents formulaires Ajax

    Voici les 47 excellents formulaires en Ajax et CSS. Jettez un coup d’oeil, ça peut vous aider de trouver des nouvelles idées pour développer le formulaire de... Lire la suite

    Par  Quan Tran-Meyer
    A CLASSER
  • 22 resssources de CSS templates.

    resssources templates.

    Ne perdez pas le temps pour la mise en page de votre site, votre blog. Voici les 22 ressources de CSS template qui vous permettent de créer rapidement un... Lire la suite

    Par  Quan Tran-Meyer
    A CLASSER
  • Mise en page CSS

    Voici un site qui offre toutes les mise en page en CSS de 750 px, 950px ou 100% , de 2 colonnes à 4 ou 5 colonnes , tout ce que vous voulez et surtout ces... Lire la suite

    Par  Quan Tran-Meyer
    A CLASSER
  • Galeries CSS, télécharger des thèmes libres de droits

    Pour qu’un site soit lu il vaut mieux privilégier le contenu au design, cela ne fait aucun doute. En revanche un design bancal, un contraste trop faible, peuven... Lire la suite

    Par  David Marchesson
    INTERNET

A propos de l’auteur


Paul 502 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte