Developpez.com

Le Club des Développeurs et IT Pro

Les Variables de plus en plus proches du CSS

WebKit commence à les supporter de manière expérimentale

Le 2012-06-19 12:31:50, par Gordon Fowler, Expert éminent sénior
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 ?

Les Nightly Builds de WebKit sont disponibles sur cette page

Plus d’informations sur le build Canary de Chrome

Source : WebKit

Et vous ?

Impatient(e) d’utiliser les variables directement dans du CSS ? Ou pas du tout ? Et pourquoi ?
  Discussion forum
9 commentaires
  • Fantastique idée, je me rejuis de faire face à encore plus de problèmes de compatibilité dans le futur.
    le 19/06/2012 à 13:17
  • leminipouce
    Membre éprouvé
    Envoyé par alex_vino
    Mais tel que pésenté je n'aime pas du tout la syntaxe:
    Code : 
    1
    2
    3
    4
    :root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); }
    devrait etre remplacé par: (comme lesscss.js)
    Code : 
    1
    2
    3
    4
    @color: blue;
div { @color: green; }
#alert { @color: red; }
* { color: @color; }
    J'imagine qu'il doit y avoir une raison, je ne comprend pas trop le but de la compilation pour le css dans le cas ou comme ici c'est le moteur (WebKit) qui implémente cette nouvelle norme, si quelqu'un a une idée ca m'intéresse
    Je rejoins les commentaires de CSS-Tricks : http://css-tricks.com/sass-vs-less/ : pas @color mais $color. @ est déjà utilisé (@media, ...).

    Perso j'adore LESS & SASS, mais c'est vrai que si leurs fonctionnalités étaient supportées en natif par CSS, ce ne serait pas un mal. Car là, la compilation, faut reconnaître qu'elle est quand même très longue ! Et c'est un peu chiant.
    ... et un langage qui n'est pas natif, n'est pas reconnu par les IDE. LESS ou SASS sur NetBeans ou Eclipse, c'est cauchemardesque. Autant développer avec VIM ou Notepad++ !
    le 19/06/2012 à 14:51
  • alex_vino
    Membre émérite
    Cool

    D'ailleurs pour compléter l'article Firefox iPad utilisera aussi WebKit.

    Cela évitera grandement de répéter des valeurs et d'avoir une meilleure organisation du code.

    Mais tel que pésenté je n'aime pas du tout la syntaxe:
    Code : 
    1
    2
    3
    4
    :root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); }
    devrait etre remplacé par: (comme lesscss.js)
    Code : 
    1
    2
    3
    4
    @color: blue;
div { @color: green; }
#alert { @color: red; }
* { color: @color; }
    J'imagine qu'il doit y avoir une raison, je ne comprend pas trop le but de la compilation pour le css dans le cas ou comme ici c'est le moteur (WebKit) qui implémente cette nouvelle norme, si quelqu'un a une idée ca m'intéresse
    le 19/06/2012 à 14:22
  • Toshy62
    Membre à l'essai
    Ne serait pas plus simple de garder ces variables en less quitte à l'intégration dans d'avantage de serveur web comme Apache ou nginx, mais en css ça risque de mettre la merde dans la compatibilité interbrowser. Sinon à quand un jquery pour le css pour avoir un css cross browser??
    le 19/06/2012 à 13:30
  • kolodz
    Modérateur
    Comportement d'un css avec des variables sur un navigateur sans cette avancé ?

    Et personnellement, je préfère la version présenté lors du google I/O 2011 :
    [ame="http://www.youtube.com/watch?v=qzA60hHca9s"]Google I/O 2011: HTML5 & What&#39;s Next - YouTube[/ame] ( à 19:10)
    Mais le plus urgent pour les CSS, c'est les "Mixins" (présenté juste après les variable css)

    Cordialement,
    Patrick Kolodziejczyk
    le 19/06/2012 à 23:21
  • leminipouce
    Membre éprouvé
    Envoyé par kolodz
    Mais le plus urgent pour les CSS, c'est les "Mixins" (présenté juste après les variable css)
    Complètement d'accord !

    Ne serait-ce que pour pouvoir gérer de manière propre et centralisée l'ensemble des préfixes HTML5 non encore officialisées... (moz-, webkit-, ...)

    On en revient à ce que je disais dans mon précédent message, j'adore LESS & SASS
    le 20/06/2012 à 9:45
  • alex_vino
    Membre émérite
    Envoyé par kolodz
    Comportement d'un css avec des variables sur un navigateur sans cette avancé ?
    C'est le meme probleme a chaque nouveauté (HTML5 + CSS3 pour anciens navigateurs) ou technologies (Flash + Silverlight si pas de plugin).

    Mais la plupart des utilisateurs ont maintenant des navigateurs qui se mettent automatiquement a jour donc cela résoud en partie un probleme, reste IE qui pose vraiment probleme a ce niveau la.

    Par contre pour des applications "internes" ca peut etre tres rapidement utilisable.
    le 20/06/2012 à 10:03
  • laffreuxthomas
    Membre éclairé
    Envoyé par leminipouce
    Perso j'adore LESS & SASS, mais c'est vrai que si leurs fonctionnalités étaient supportées en natif par CSS, ce ne serait pas un mal. Car là, la compilation, faut reconnaître qu'elle est quand même très longue ! Et c'est un peu chiant.
    Bonjour. Pour LESS CSS essayez éventuellement Less Now. Sur ma machine la compilation est quasi-instantanée (mais c'est vrai que j'ai une bonne machine).

    Envoyé par leminipouce
    ... et un langage qui n'est pas natif, n'est pas reconnu par les IDE. LESS ou SASS sur NetBeans ou Eclipse, c'est cauchemardesque. Autant développer avec VIM ou Notepad++ !
    L'éditeur CSS d'Aptana est utilisable sur du code LESS : il marque la syntaxe LESS en erreur mais l'auto-completion fonctionne malgré tout.
    le 24/08/2012 à 10:17
  • Thorna
    Membre éprouvé
    Aïe aïe aïe !
    Je fuis le javascript depuis des anénes parce que ce "langage de programmation" ne me convient pas du tout, et en outre je tente de piger le CSS3 pour faire de belles pages en HTML5/CSS3 purs. Et voilà que j'apprends que CSS va devenir aussi... folklorique que le JS ?
    Je me demande si la direction suivie dans ce domaine est vraiment la bonne !
    le 19/06/2012 à 12:57
  Poster une réponse