L’équipe de WebKit, le moteur de rendu utilisé entre autres par Chrome et Safari, va supporter de manière expérimentale une des avancées les plus attendues (et fondamentales ?) du CSS : les variables.Jusqu’ici, seules des alternatives (comme less.js) permettaient d’utiliser ces variables dans des feuilles de style. Problème, ces « tours de passe-passe » demandent une phase de compilation.
La solution du W3C, qui sera donc très prochainement supportée par le build Canary de Chrome et plus largement par les Nightly Builds de Webkit, est beaucoup plus simple.
Elle consiste à définir une variable comme suit :
| Code : | Sélectionner tout |
1 2 3 | :root {
var-header-color: #06c;
} |
| Code : | Sélectionner tout |
h1 { background-color: var(header-color); }
| Code : | Sélectionner tout |
1 2 | one { var-foo: 10px; }
two { var-bar: calc(var(foo) + 10px); } |
| Code : | Sélectionner tout |
1 2 3 4 | :root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); } |
| Code : | Sélectionner tout |
1 2 3 4 5 6 | <p>I inherited blue from the root element!</p> <div>I got green set directly on me!</div> <div id='alert'> While I got red set directly on me! <p>I'm red too, because of inheritance!</p> </div> |
Une des applications indirectes de ces « var » - si elles viennent à être supportées par Gecko (Firefox), Trident (IE) et Presto (Opera) - sera de discriminer de fait les navigateurs les plus récents des autres.
Une manière plus pérenne et économique que l’instauration d’une taxe (comme celle lancée par un site australien sur IE7) pour faire migrer les utilisateurs ?
Les Nightly Builds de WebKit sont disponibles sur cette page Plus d’informations sur le build Canary de ChromeSource : WebKit
Et vous ?
Impatient(e) d’utiliser les variables directement dans du CSS ? Ou pas du tout ? Et pourquoi ? 
Envoyé par alex_vino
