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 :roll: 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!) :lol:
Prochaine utopie : Intégrer ma CSS (générée en PHP) à mon flux RSS (lui aussi généré en PHP) :shock:
hello,
a noté ie permet d’utilsier en css, directement, des ‘variables’ genre taille de fenêtre, etc …
seulement seul ie le supporte….
sinon un grois gros gros gros truc qui manque, et que le monde du papier à, c’est la possibilité de tourner un bloc -> regarder els magazine, ils font cela très souvent …
Rendre possible de faire tourner un bloc par le visiteur m’a l’air assez difficile sauf avec une bonne dose d’Ajax (mais on ne parle plus là de CSS je te l’accorde). D’ailleurs c’est ce qu’à fait Søderlind avec ImageManager. Bon on peut aussi faire ça avec du Flash, mais le Flash j’aime pas ça :evil: Sinon on peut aussi générer une image à partir du texte (comme pour les Captcha) et faire pivoter l’image avec la fonction imagerotate(). Le développement web est toujours un monde de bidouilles :mrgreen:
justement je ne parle pas d’image mais de texte!
Dans l’édition papier on peux pratiquement tout faire, tourner, déformer, etc…
il est clair que un certain nombres de choses ne devrait pas être possible avant longtemps, mais pouvoir décaler d’un cetain nombre de degré un bloc de texte me parait plus que intéressant … cela éviterait de mettre des images ….
En effet ce serait une fonctionnalité très intéressante néanmoins je vois le truc arriver d’ici. Tu pourras écrire un texte à XX° dans une DIV sauf que le “border” de la DIV sera toujours rectangulaire ce qui bouffera une place colossale et sera très moche. Exemple…
Sinon il faudrait pouvoir caler un second bloc au bord du premier bloc “incliné” et que le système tienne donc compte du degré d’inclinaison du premier bloc pour venir caler le deuxième. Ce serait génial mais là j’ai comme un doute :non:
En version papier, on décale régulièrement (afin de faire style post-it) de quelques degrée, le tout entouré par des images afin de mettre en évidence, donné du style, etc …
Salut, vu que les commentaires ne sont pas fermé je me permet de remonter le billet avec des news à ce sujet !!! Le CSS3 prenant de plus en plus de place sur le web et les frameworks aussi je me permet de vous donnez une astuce/info sur les variables en css, il existe maintenant une application encore en beta je crois qui se nomme “less”. Je vous laisse le soin d’utiliser votre meilleur ami pour retrouver leur site !!! ;-)
Le principe de l’application est de construire son site et feuilles css normallement et une fois fini, définir les dossiers dans l’application, choisir la destination et cliquer sur le bouton et hop… C’est bien évidemment une description a la va vite mais qui décrit le principe de l’application.
Par contre le hic, c’est que je crois qu’elle n’est dispo que sur Mac os x pour l’instant je crois, enfin bref… J’espère que cela vous servira !!!