Utilisation des variables en CSS

**sovo** · 16/10/2006, 13h13

Bonjour a tous.

J'ai une question, je voudais savoir s'il est prossible d'utiliser les variables en CSS.

Je m'explique, je veux creer des pages qui utilise un fichier .css (externe) et dans ce fichier j'ai une classe, qui doit charger une image differente en fonctions des pages (qui l'utilise). Alors est possible ??

**MasterOfChakhaL** · 16/10/2006, 14h19

Salut,

rien ne t'empêche de générer le fichier css a la volée via un langage dynamique.

Exemple avec php:
tu sauves ton fichier css avec l'extension php. Tu y inclus tes variables et tes calculs (tu fais du php quoi...)
Quand ta balise link fait appel au css (extension en php...) le script sera parsé et renverra ce qu'il faut...
Ca peut se mettre en place assez facilement...

Cependant, je ne te conseille pas cette technique... Je trouve dommage de mélanger php et css... si tu modifies ton site et que tu veux changer de langage dynamique, il faudra aussi que tu te retapes le css.

Je serai plutôt partisan d'exploiter les nombreuses possibilités de css...
exemple en utilisant les selecteurs a bon escient.

ta page html type:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    ...
    <!--appel au css-->
    <link ... />
  </head>
  <body id="pageUn">
    bla bla bla bla
  </body>
</html>

et le css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
/* les propriétés communes */
body {
  margin:...;
  padding:...;
  ...
  background-position: center center,
}
 
/* les propriétés spécifiques --> tes variables */
body#pageUn {
  background-image: url('./image/fond1.gif');
}
 
body#pageDeux {
  background-image: url('./image/fond2.gif');
}
 
body#pageN {
  background-image: url('./image/fondN.gif');
}

autant utiliser a fond ce que propose css avant d'essayer de contourner les problèmes par des bricolages...

**sovo** · 16/10/2006, 14h31

Pour ta deuxieme proposition, j'y avais deja pense, mais je trouve un tres grand inconveniant. C'est qu'il faut predefinir les images qui doivent etre appele. Pourtant dans mon cas precis, les pages et images sont generes automatiquement (avec du PHP) et donc on ne connais pas d'office quel sera l'images (ou les images) qui seront appele. Donc pas a mon gout desole

**MasterOfChakhaL** · 16/10/2006, 14h49

Dans ce cas, quelques petites idées...

Il suffit que ton script php qui génère l'image la nomme toujours de la même façon...

Donc l'image sera toujours appelé de la même facon et tu fais quelque chose de transparent au niveau du css.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#elem {
  background-image: url('./gen_image/mon_image.gif');
}

Ou encore

dans ton css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#elem {
  background-image: url('./gen_image.php');
}

quand le css voudra afficher l'image, il ira appeler le script gen_image.php qui peut utiliser des infos définis dans tes variables de sessions ou encore passées en get directement dans l'url.

gen_image.php:

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<?php
// travail sur les variables de sessions et les paramètres get
$param1 = ... ;
$param2 = ... ;
 
$image = //génére ton fichier image...
 
echo $image;
?>

A toi de voir ce qui t'interesse...

Attention, les urls sont relatives au fichier css...

Utilisation des variables en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager