Discussion :

[Gordon Fowler]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:root {
  var-header-color: #06c;
}

Pour pouvoir l’appeler comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Thorna]

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 !

[Jean-Georges]

Fantastique idée, je me rejuis de faire face à encore plus de problèmes de compatibilité dans le futur.

[Toshy62]

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??

[alex_vino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[leminipouce]

Mais tel que pésenté je n'aime pas du tout la syntaxe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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++ !

[kolodz]

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'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

[leminipouce]

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

[alex_vino]

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.

[laffreuxthomas]

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).

... 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.