Variables dans les feuilles de style

Le
Claude Schneegans
Bonjour,

Est-ce qqun aurait un truc permettant d'utiliser une variable dans une
feuille de style, et de l'utiliser plus loin à la place d'une valeur ?
Par exemple, j'aimerais pouvoir définir une couleur une fois pour toute,
comme :
maCouleur = #FF0000;

et l'utiliser plus loin, comme dans :
color: maCouleur;
border-top-color: maCouleur;

C'est sûr que je pourrais le faire côté serveur, avec un script en
ColdFusion, PHP ou autre, mais ça ferait un truc de moins pouvant entrer
dans la cache du client.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Hans Le Roy
Le #18872281
Bonjour Claude,


"Claude Schneegans" news:
Bonjour,

Est-ce qqun aurait un truc permettant d'utiliser une variable dans une
feuille de style, et de l'utiliser plus loin à la place d'une valeur ?
Par exemple, j'aimerais pouvoir définir une couleur une fois pour toute,
comme :
maCouleur = #FF0000;

et l'utiliser plus loin, comme dans :
color: maCouleur;
border-top-color: maCouleur;

C'est sûr que je pourrais le faire côté serveur, avec un script en
ColdFusion, PHP ou autre, mais ça ferait un truc de moins pouvant entrer
dans la cache du client.



J'ai bien peur que ce ne soit pas (encore) possible.

A+

Hans
Gilles ---
Le #18903391
Bonjour à Claude Schneegans qui, ce mardi 10/03/2009,
a écrit ce qui suit :

Bonjour,



Est-ce qqun aurait un truc permettant d'utiliser une variable dans une feuille de style, et de l'utiliser plus
loin à la place d'une valeur ?
Par exemple, j'aimerais pouvoir définir une couleur une fois pour toute, comme :
maCouleur = #FF0000;



et l'utiliser plus loin, comme dans :
color: maCouleur;
border-top-color: maCouleur;



C'est sûr que je pourrais le faire côté serveur, avec un script en ColdFusion, PHP ou autre, mais ça ferait un
truc de moins pouvant entrer dans la cache du client.



A ma connaissance, on ne peut pas définir de variable ailleurs que dans un script,
mais on peut intégrer du JavaScript dans du CSS ; donc si tu veux utiliser une
variable dans le CSS, à toi de la définir avant, comme dans l'exemple ci-dessous :


<html>
<head>
<script type="text/JavaScript">
ma_couleur='#ff0000'
</script>
<style>
.ppz{color:expression(ma_couleur)}
</style>
</head>
<body>
<div class="ppz">
Ceci est un essai.
</div>
</body>
</html>


J'ai vérifié que ça fonctionne, mais je ne suis pas certain que ce soit très
productif.
A toi de voir. :-)

--
Gilles ---
http://www.leblaisois.fr
Claude Schneegans
Le #18921771
>>mais je ne suis pas certain que ce soit très productif.





En fait, ça a l'air un peu tordu, mais oui ça peut être productif.
L'idée c'est de permettre de définir une couleur à un seul endroit et
que plusieurs styles puissent utiliser la même couleur. Quand on veut
changer la couleur, on n'a qu'un seul endroit à changer.

Je ne connaissais pas cette expression.
Merci.
Gilles ---
Le #18922371
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009,
a écrit ce qui suit :

>>mais je ne suis pas certain que ce soit très productif.



En fait, ça a l'air un peu tordu, mais oui ça peut être productif.
L'idée c'est de permettre de définir une couleur à un seul endroit et que plusieurs styles puissent utiliser la
même couleur. Quand on veut changer la couleur, on n'a qu'un seul endroit à changer.



Je ne connaissais pas cette expression.
Merci.



De rien.
Il suffit donc de déclarer les variables utiles dans un mini-script situé dans le
HEAD, avant les balises <STYLE></STYLE>.

Bonne soirée.

--
Gilles ---
http://www.leblaisois.fr
Claude Schneegans
Le #18923271
>>Il suffit donc de déclarer les variables utiles dans un mini-script




situé dans le HEAD, avant les balises <STYLE></STYLE>.

Eh oui, et alors je suppose qu'à partir de là, tout est permis, enfin
presque.
Par exemple, je pourrais avoir dans expression() un appel à une fonction JS
qui pourrait retourner des valeurs différentes selon le navigateur détecté.
Gilles ---
Le #18923401
Bonjour à Claude Schneegans qui, ce mardi 17/03/2009,
a écrit ce qui suit :

>>Il suffit donc de déclarer les variables utiles dans un mini-script
situé dans le HEAD, avant les balises <STYLE></STYLE>.



Eh oui, et alors je suppose qu'à partir de là, tout est permis, enfin presque.
Par exemple, je pourrais avoir dans expression() un appel à une fonction JS
qui pourrait retourner des valeurs différentes selon le navigateur détecté.



Oui, un script placé dans le HEAD peut détecter la nature du navigateur ; mais en
revanche, il y a des données dont on ne peut prendre connaissance qu'une fois le
BODY chargé, comme par exemple document.body.clientWidth ...
Ça paraît évident, mais on se fait parfois prendre au piège. ;-)

--
Gilles ---
http://www.leblaisois.fr
Publicité
Poster une réponse
Anonyme