Depuis très longtemps, l'usage de variables en CSS a été une capacité désirée par les programmeurs Web. Voilà qu'elles sont à l'horizon dans la paysage de la norme CSS. Ça va permettre un grand nombre de simplifications dans le code et supprimer les redondances qui affligent les fichiers CSS.

CSS est un langage de programmation qui décrit le rendu de documents structurés (comme le HTML ou XML) sur l'écran, à l'impression, etc. Les énoncés CSS sont la plupart du temps inclus dans un fichier CSS mais ils peuvent prendre d'autres formes.

Actuellement, les documents volumineux du Web peuvent contenir beaucoup d'énoncés CSS et plusieurs des valeurs utilisés peuvent être des duplicats et se répéter de nombreuses fois ce qui en fait un code redondant ennuyeux à modifier, sans compter les possibilités d'erreurs.

Le concept est très intéressant pour tous ceux qui travaillent avec des langages qui supportent les variables comme PHP ou Javascript.

Par exemple, dans la conception du site www.gtro.com, j'ai utilisé des variables pour rendre les pages avec CSS. J'ai conçu le fichier gtrolayout.php qui utilise les variables $Theme et $Font_Size fourni par le moteur PHP de la page. En outre, il permet de donner des valeurs aux variables $lineStyle, $radius et $borderWidth qui sont réutilisés mainte fois dans le code PHP/CSS qui suit.

<?php
header("Content-type: text/css; charset: UTF-8");
if (isset($_COOKIE['theme'])) // is cookie('theme') there?
	$Theme = $_COOKIE['theme']; // set it
else $Theme = 'black';
if (isset($_COOKIE['font'])) // is cookie('font') there?
	$Font_Size = $_COOKIE['font']; // // set it
else $Font_Size = '12px';
  if ($Theme == 'teal')
    $Colors = array('#006633', '#66cc99', '#99ffcc');
  if ($Theme == 'blue')
    $Colors = array('#0000ff', '#6666ff', '#ccccff');
  if ($Theme == 'brown')
    $Colors = array('#663300', '#cc9966', '#ffcc99');
  if ($Theme == 'red')
    $Colors = array('#FF0000', '#ff6666', '#ffcccc');
  if ($Theme == 'black')
    $Colors = array('#000', '#888', '#ddd');
	$lineStyle = 'double'; /*solid, double, dotted, dashed, inset, outset, ridge */
	$radius = '15px';
	$borderWidth = '8px';
?>

//suivi par des énoncés CSS de la forme

#container
{
  width: 80%;
  margin: 10px auto;
  border: <?php echo $borderWidth ?> <?php echo $lineStyle ?> <?php echo  $Colors[0] ?>;
  	-moz-border-radius: <?php echo $radius ?>;
  	-webkit-border-radius: <?php echo $radius ?>;
		behavior:url(/include/border-radius.htc);
  border-radius: <?php echo $radius ?>;
  overflow: hidden;
  background: url(/include/images/back.jpg);
}

Dans le moteur PHP de la page, le fichier gtrolayout.php qui se trouve dans le répertoire /include/ du site est simplement lié comme suit

print '<link rel="stylesheet" type="text/css" href="' . $myWwwIncPath . 'gtrolayout.php" type="text/css">';

et ça marche!... mais ce n'est pas du CSS.

Le document "CSS Custom Properties for Cascading Variables Module Level 1" du W3C introduit le potentiel d'utiliser dans l'avenir des propriétés personnalisées qui serviront à définir des variables et seront acceptés par toutes les propriétés CSS.

On y définit une propriété personnalisée comme une propriété dont le nom commence par "var-" et contient au moins une autre lettre. CSS ne leur donnera jamais une signification allant au delà de ce qui est présenté dans le Module.

Les noms de propriétés qui ont var- comme préfixe (e.g. var-nom) représentent des propriétés personnalisées qui contiennent des valeurs qui peuvent être réutilisées dans tout le document en utilisant une variable. Ici, une variable est une association entre un identificateur et une valeur qui, en participant à la cascade, peut être assignée à des propriétés CSS en utilisant la notation fonctionnelle var().

Voici un exemple d'usage de variables dans un fichier CSS.

:root {var-main-color: #06c;} /* déclaration de la variable main-color */
/* The rest of the CSS file */
#foo h1 {color: var(main-color);}/* utilisation de la variable main-color */

C'est aussi simple que cela! Pas tout à fait. Il s'agît d'une proposition, pas d'une spécification. Déjà en 2012, Webkit, qui est utilisé dans Safari et Chrome, travaillaient pour implanter les variables CSS. Selon Scott Gilbertson, l'époque où l'usage des variables CSS deviendra courant est encore loin, d'autant plus que les fureteurs qui ne les supportent pas encore, ne les supporteront jamais. Ils vont tout simplement les ignorer.

Je m'arrête ici puisqu'aucun des fureteurs disponible sur mon ordinateur ne rend ces variables.

Voici maintenant quelques références additionnelles:

1. "Using CSS variables" sur le site des développeurs de Mozilla;
2. "Playing around with CSS variables - « custom properties »" par Emil Björklund (15 décembre 2013)
3. "New Awesomeness: CSS Variables";