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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Les Variables de plus en plus proches du CSS


Sujet :

CSS

  1. #1
    Expert éminent sénior

    Inscrit en
    juillet 2009
    Messages
    3 407
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 3 407
    Points : 148 792
    Points
    148 792
    Par défaut 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 : 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 ?

  2. #2
    Membre éprouvé
    Profil pro
    Inscrit en
    décembre 2004
    Messages
    581
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2004
    Messages : 581
    Points : 1 092
    Points
    1 092
    Par défaut
    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 !
    L'avis publié ci-dessus est mien et ne reflète pas obligatoirement celui de mon entreprise.

  3. #3
    Inactif  
    Inscrit en
    septembre 2011
    Messages
    100
    Détails du profil
    Informations forums :
    Inscription : septembre 2011
    Messages : 100
    Points : 122
    Points
    122
    Par défaut
    Fantastique idée, je me rejuis de faire face à encore plus de problèmes de compatibilité dans le futur.

  4. #4
    Membre à l'essai
    Inscrit en
    août 2009
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : août 2009
    Messages : 14
    Points : 17
    Points
    17
    Par défaut
    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??

  5. #5
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    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

  6. #6
    Membre éprouvé Avatar de leminipouce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    janvier 2004
    Messages
    754
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : janvier 2004
    Messages : 754
    Points : 1 287
    Points
    1 287
    Par défaut
    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 - 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++ !
    Si , et la ont échoué mais pas nous, pensez à dire et cliquez sur . Merci !

    Ici, c'est un forum, pas une foire. Il y a de respectables règles... à respecter !

  7. #7
    Modérateur
    Avatar de kolodz
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    avril 2008
    Messages
    2 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : avril 2008
    Messages : 2 208
    Points : 8 313
    Points
    8 313
    Billets dans le blog
    51
    Par défaut
    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
    Si une réponse vous a été utile pensez à
    Si vous avez eu la réponse à votre question, marquez votre discussion
    Pensez aux FAQs et aux tutoriels et cours.

  8. #8
    Membre éprouvé Avatar de leminipouce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    janvier 2004
    Messages
    754
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : janvier 2004
    Messages : 754
    Points : 1 287
    Points
    1 287
    Par défaut
    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
    Si , et la ont échoué mais pas nous, pensez à dire et cliquez sur . Merci !

    Ici, c'est un forum, pas une foire. Il y a de respectables règles... à respecter !

  9. #9
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 470
    Points : 2 368
    Points
    2 368
    Par défaut
    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.

  10. #10
    Membre confirmé

    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 624
    Points
    624
    Par défaut
    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.

Discussions similaires

  1. Réponses: 0
    Dernier message: 11/06/2014, 06h04
  2. Windows Azure : plus simple, plus flexible, plus ouvert
    Par Gordon Fowler dans le forum Microsoft Azure
    Réponses: 2
    Dernier message: 08/06/2012, 22h44
  3. Sondage : les bureaux virtuels séduisent de plus en plus les PME
    Par Idelways dans le forum Forum général Solutions d'entreprise
    Réponses: 13
    Dernier message: 15/03/2011, 11h39
  4. Réponses: 0
    Dernier message: 11/03/2011, 14h15
  5. Réponses: 4
    Dernier message: 02/08/2009, 16h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo