IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Gordon Fowler

5PARTAGES

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

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de 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.
2  0 
Avatar de 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++ !
2  0 
Avatar de 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
1  0 
Avatar de 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??
0  0 
Avatar de 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&#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
0  0 
Avatar de 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
0  0 
Avatar de 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.
0  0 
Avatar de laffreuxthomas
Membre éclairé 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.
0  0 
Avatar de Thorna
Membre éprouvé 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 !
1  4