Peut on créer une variable en CSS ?

[oberruyer]

Question simple : j'utilise plusieurs fois la même couleur genre #FF0099 dans mon code CSS

C'ets un peu pénible si j'ai envie de la modifier par la suite

Peut-on créer une variable toto=#FF0099 en début de feuille CSS et faire "couleur : toto" par la suite ?

Merci

Olivier

[Raphael]

Hello,

Non, ce n'est pas possible.

Les CSS sont un langage de mise en forme, pas de programmation (aucune boucle, ni variable, etc.)

Si tu veux du dynamisme dans une feuille CSS, il faut la générer en PHP.

Bon week-end

[TheRec]

Bonjour,

non malheureusement c'est impossible en CSS2 et cela ne semble pas prévu pour CSS3 (malgré quelques requêtes de la part des utilisateurs)...

Tu peux toutefois faire ceci en PHP ou autre langage interprété côté serveur (cela ne parait pas viable avec langages côté client, par exemple Javascript)...

Au début de ton fichier PHP (par exemple style.php), tu envoies l'entête appropriée pour le faire correspondre à un fichier CSS :

<?php header("Content-type: text/css"); ?>

Dans ton fichier (x)HTML tu inclus la feuille de style ainsi :

<link rel="stylesheet" type="text/css"
 media="screen" href="style.php">

Ensuite libre à toi de déclarer des variable, des constantes et de les utiliser comme valeurs (ou même comme nom de propriétés, bref tout texte peut être remplacé par une variable).

**EDIT**: Bon brûlé..mais pas totalement grillé par Sibelius

[oberruyer]

bon, tant pis, c'est dommage

merci de vos conseils

mais heu, je vais attendre un peu, j'y connais rien PHP, et je suis encore en apprentissage du XHTML...

A suivre...

Amitiés

Olivier

[Dudu]

Bonjour.

Oui c'est possible.

Non ce n'est pas possible.

Explication:

Nâtivement, CSS ne permet pas de définir des variables => d'où le "non pas possible"

Cela étant dit, il est possible de générer une feuille de style grâce à PHP.

Comment ça se passe:

• dans un premier temps, tu dis à ton serveur que tout ce qui a une extension .css est en fait un fichier PHP et qu'il doit donc être traité par le serveur en tant que tel.
  Ceci te permet de conserver l'extension .css sur tes fichiers de style tout en les faisant traiter par le serveur comme du PHP
  
• Tu écris ta feuille de style avec des variables, comme tu le souhaites
  
• Et il ne faut pas oublier de mentionner l'en-tête du fichier lors de l'envoi au navigateur (ce ne doit être du PHP que pour le serveur, car pour le navigateur il faut que ce soit du CSS)
  

Compliqué à mettre en oeuvre ? Pas du tout. Car non seulement tu n'es pas le seul à avoir eu cette bonne idée, mais en plus un de ceux qui y a pensé avant toi est un développeur de génie et il a créé un script tout fait. Elle est pas belle, la vie ?

CSS Server-Side Constants par l'incontournable Shaun Inman (en anglais uniquement, par contre.. mais le concept n'est pas compliqué à appréhender)

Une fois qu'on y a goûté, c'est impossible de s'en séparer..

Enjoy !

[oberruyer]

Hmmm, merci Dudu

ton explication est très claire, je comprends un peu avec le peu que je sais du php

MAIS j'ai regardé le site, et heu, je comprends rien !!

tu dis à ton serveur que tout ce qui a une extension .css est en fait un fichier PHP => comment on fait ?

il ne faut pas oublier de mentionner l'en-tête du fichier lors de l'envoi au navigateur => idem

Parce que Shaun, il ets fortiche, mais je pige pas tout !

je dois donc rajouter le script php sur mon site ?

mais il est compliqué, je ne comprends pas ce que je dois modifier dedans pour que ça marche

<?php

/******************************************************************************

CSS-SSC

v004

http://www.shauninman.com/plete/css-ssc/

Shaun Inman

http://www.shauninman.com/

******************************************************************************

Begin benchmarking

******************************************************************************/

function microtime_float() { list($s,$m) = explode(" ",microtime()); return ((float)$s + (float)$m); }

$start = microtime_float();

/******************************************************************************

Import all specified files

******************************************************************************/

$filename = "{$_SERVER['DOCUMENT_ROOT']}{$_GET['css']}";

// Prevent parsing of anything but files with an extension of .css

if (substr($filename,-3)!='css') { exit(); }

$modified = array();

$modified[] = filemtime("$filename");

$css = file_get_contents("$filename");

$css .= "/*---CSS-SSC-CACHE---*/";

// Handles server-side importing of CSS, doesn't handle ../ yet

while (preg_match_all("/@server\s+url\(([^\)]+)\);\s*/i",$css,$imports)) {

foreach ($imports[0] as $key=>$server) {

$css = str_replace($server,'',$css);

$filename = "{$imports[1][$key]}";

// Prevent parsing of anything but files with an extension of .css

if (substr($filename,-3)!='css') { continue; }

$modified[] = filemtime("$filename");

$css .= _AT_file_get_contents("$filename")."\r\r";

}

}

list($css,$cache) = explode('/*---CSS-SSC-CACHE---*/',$css);

$css = $cache.$css;

/******************************************************************************

Manage caching

******************************************************************************/

rsort($modified);

$dt = $modified[0];

header("Last-Modified: ".gmdate("D, d M Y H:i:s",$dt)." GMT");

header("ETag: ".md5($dt));

header("Cache-Control: private");

header("Content-Type: text/css");

if (!isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {

$header = apache_request_headers();

if (isset($header['If-Modified-Since'])) {

$_SERVER['HTTP_IF_MODIFIED_SINCE'] = $header['If-Modified-Since'];

}

}

if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && $dt<=strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {

header("{$_SERVER['SERVER_PROTOCOL']} 304 Not Modified");

}

/******************************************************************************

Plug in constants/variables

******************************************************************************/

if (preg_match_all("/@server\s+(?:variables|constants)\s*\{\s*([^\}]+)\s*\}\s*/i",$css,$matches)) {

$variables = array();

foreach ($matches[0] as $key=>$server) {

$css = str_replace($server,'',$css);

preg_match_all("/([^:\}\s]+)\s*:\s*([^;\}]+);/",$matches[1][$key],$vars);

foreach ($vars[1] as $var=>$value) {

$variables[$value] = $vars[2][$var];

}

}

$css = str_replace(array_keys($variables),array_values($variables),$css);

}

/******************************************************************************

Return compiled CSS

******************************************************************************/

echo "/* Processed by Shaun Inman's CSS-SSC :: http://www.shauninman.com/plete/css-ssc/ */\r";

echo "$css";

/******************************************************************************

End benchmarking

Takes under four or five thousandths of a second in my tests

******************************************************************************/

//echo "\r/* Runtime: ".(microtime_float()-$start)." */";

/******************************************************************************/

?>

tu pourrais m'aider ?

Merci !!!

Olivier

Modifié 17 Avril 2006 par oberruyer