Developpez.com

Plus de 14 000 cours et tutoriels en informatique professionnelle à consulter, à télécharger ou à visionner en vidéo.

Les Variables de plus en plus proches du CSS
WebKit commence à les supporter de manière expérimentale

Le , 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 : Sélectionner tout
1
2
3
:root { 
  var-header-color: #06c; 
}
Pour pouvoir l’appeler comme ceci :

Code : Sélectionner tout
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
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
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
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Thorna Thorna - Membre éclairé https://www.developpez.com
le 19/06/2012 à 12:57
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 !
Avatar de Jean-Georges Jean-Georges - Inactif https://www.developpez.com
le 19/06/2012 à 13:17
Fantastique idée, je me rejuis de faire face à encore plus de problèmes de compatibilité dans le futur.
Avatar de Toshy62 Toshy62 - Membre à l'essai https://www.developpez.com
le 19/06/2012 à 13:30
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??
Avatar de alex_vino alex_vino - Membre émérite https://www.developpez.com
le 19/06/2012 à 14:22
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
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
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
Avatar de leminipouce leminipouce - Membre éprouvé https://www.developpez.com
le 19/06/2012 à 14:51
Citation Envoyé par alex_vino  Voir le message
Mais tel que pésenté je n'aime pas du tout la syntaxe:
Code : Sélectionner tout
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
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++ !
Avatar de kolodz kolodz - Modérateur https://www.developpez.com
le 19/06/2012 à 23:21
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
Avatar de leminipouce leminipouce - Membre éprouvé https://www.developpez.com
le 20/06/2012 à 9:45
Citation Envoyé par kolodz  Voir le message
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
Avatar de alex_vino alex_vino - Membre émérite https://www.developpez.com
le 20/06/2012 à 10:03
Citation Envoyé par kolodz  Voir le message
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.
Avatar de laffreuxthomas laffreuxthomas - Membre confirmé https://www.developpez.com
le 24/08/2012 à 10:17
Citation Envoyé par leminipouce  Voir le message
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).

Citation Envoyé par leminipouce  Voir le message
... 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.
Offres d'emploi IT
Chef de projet technique H/F
Safran - Ile de France - Melun (77000)
Responsable de lot / architecte fpga H/F
Safran - Ile de France - Éragny (95610)
Responsable de projets - actionneurs H/F
SAFRAN - Ile de France - MASSY / MANTES

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil