Les Variables de plus en plus proches du CSS
Les Variables de plus en plus proches du CSS
WebKit commence à les supporter de manière expérimentale
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:
1
2
3
| :root {
var-header-color: #06c;
} |
Pour pouvoir l’appeler comme ceci :
Code:
h1 { background-color: var(header-color); }
Il est possible d’intégrer une variable dans une autre, de faire des opérations (non cycliques) :
Code:
1
2
| one { var-foo: 10px; }
two { var-bar: calc(var(foo) + 10px); } |
Ou de donner des valeurs différentes à une même variable en la « contextualisant » :
Code:
1
2
3
4
| :root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); } |
L’exemple ci-dessus donnera par exemple ce résultat
Code:
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> |
Autant de nouveautés encore très expérimentales (explicitées et listées par le W3C) dont la syntaxe peut encore changer radicalement mais qui permettent déjà d’imaginer de nouvelles mises en page directement dans la feuille de style.
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 ?
:fleche: Les Nightly Builds de WebKit sont disponibles sur cette page
:fleche: Plus d’informations sur le build Canary de Chrome
Source : WebKit
Et vous ?
:fleche: Impatient(e) d’utiliser les variables directement dans du CSS ? Ou pas du tout ? Et pourquoi ?
