Proposition d'écriture des Variables CSS - cssvariables (CSS, W3C)

Peut-être comme moi, vous trouvez qu'il manque cruellement d'une fonctionnalité dans les feuilles de style CSS : La possibilité de créer des variables CSS.

Voici une proposition d'écriture sur la manière de déclarer les variables CSS selon Apple, Inc. et Disruptive Innovations. :

@variables {
	LogoCouleurDeFond: #ff6600;
}

div.logo {
	background-color: var(LogoCouleurDeFond);
}

@variables { } permet de définir les différentes variables avec leurs valeurs respectives, et var( ) permet d'appeler la variable dans la feuille de style.

@variables {
	myMargin1: 2em;
}
@variables print {
	myMargin1: 5em;
}

.class1, div.class2 {
	margin-left: 30px;
	margin-left: var(myMargin1);
}

L'exemple ci-dessus nous montre comment écrire la variable CSS tout en assurant une rétrocompatibilité avec les navigateurs qui ne supporteront pas les variables CSS.
Vous noterez aussi au passage le @variables print { } qui permet de définir les variables CSS selon le type de médias.

Source : http://disruptive-innovations.com/zoo/cssvariables/

Je rappelle que cet article est une présentation de proposition d'écriture pour les variables CSS. Cette écriture n'est donc supportée par aucun navigateur web. Toutefois, cette proposition ayant notamment été faite par Apple Inc., mon petit doigt me dit que l'on risque sûrement de retrouver cette écriture dans une prochaine version de Webkit ;-)

---