Variables en CSS
Par Laurentj le mercredi, avril 9 2008, 10:21 - Technologies Web - Lien permanent
Vous en avez rêvé ? Daniel et David vont l'ont fait : Les variables CSS. Pour l'instant, ce n'est que le brouillon d'un brouillon d'une future recommandation, mais les commentaires sont les bienvenu. Vous pouvez les faire sur le blog de Daniel ou ici, je transmettrai ;-).
En gros, comment ça fonctionnera (en faisant l'hypothèse que la spec ne changera pas trop :-) ) :
@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var(CorporateLogoBGColor);
}
Les variables sont définies dans un bloc d'une règle @variables. Ici la variable CorporateLogoBGColor est déclarée avec la valeur #fe8d12. Ensuite, pour l'utiliser dans les propriétés de style, on utilise l'instruction var() avec le nom de cette variable.
Alors attention, il s'agit bien d'une variable, et non pas d'une constante, puisque, cerise sur le gâteau, on peut modifier sa valeur via le DOM style. Vouloir modifier la variable CorporateLogoBGColor reviendra à faire ça :
document.styleSheets[0].cssRules[0].variables.setVariable('CorporateLogoBGColor', '#000');
PS: je vais proposer à Daniel une manière plus simple de modifier une variable, par exemple :
document.styleSheets[0].setVariable('CorporateLogoBGColor', '#000');
Commentaires
Ah oui, pratique. Vivement dans 10 ans qu'on puisse l'utiliser ! :D
Effectivement j'en ai rêvé plusieurs fois... J'espère que ça va aboutir (assez rapidement) car c'est un manque criant de CSS. L'exemple des couleurs est un très bon exemple car on se balade toujours avec des codes couleur en dur un peu partout.
@julienA : pas sûr qu'il faille attendre 10 ans ;-) Daniel, maintenant co-chairman au CSS working group, n'a pas envie que la rédaction des specs durent une éternité. Et conçernant l'implémentation, voyant la course acharnée entre les navigateurs en ce moment...
Ça c'est de la nouvelle!
Plus besoin d'user de bidouilles php/css pour avoir des feuilles de styles évolutives! "le" panard.
De ce que je comprend de la syntaxe, les variabes sont "par css", pas de mise en commun.
C'est potentiellement dommage si un site doit gérer plusieurs CSS (une principale et une en plus pour un type de page ou un type de section particulier). Ca implique de devoir changer la valeur dans chaque CSS.
Faire des variables globales à toutes les feuilles de style en laissant les gens faire un espace de nom à la main à base de préfixe aurait été mieux AMHA.
@eric : les variables sont accessibles dans les feuilles de style importée (@import), donc à toi de mieux organiser tes feuilles de styles ;-)
Il y a déjà tellement de recommandations qui ne sont pas implémentées que le temps que le retard soit rattrapé... Cela dit, celle-ci sera peut être prioritaire sur d'autres. Je vais l'ajouter à ma liste de prières quotidiennes.
Ce qui serait super utile aussi, ce serait de pouvoir faire des operations simples sur ces variables. Par exemple :
.maclass { padding: var(mavar) + 1em; }
Dommage que les variables ne soient partagées que par @import et non pas aussi avec <link>
Je précise l'existence de CleverCSS pour avoir un peu de variables (et bien d'autres choses, comme la cascade) en attendant d'avoir mieux dans nos navigateurs.
énorme... espérons que ça se concrétise
Désolé Laurent mais ça ne répond pas du tout à mon cas d'utilisation.
J'ai une CSS principale, et sur certaines pages j'ai une CSS suplémentaire (assez grosse pour que l'inclure partout ne soit pas pertinent).
Mes variables seront logiquement dans la CSS principale, et je veux pouvoir les utiliser dans ma CSS spécifique.
Le @import ne me sera d'aucune aide car si j'utilise @import ce sera dans l'autre sens (la spécifique qui inclue la principale, donc je n'aurai toujours pas accès à mes variables dans la spécifique).
Ce cas d'utilisation est suffisamment courant pour qu'une proposition qui ne le prenne pas en compte soit repensée.
Reste que l'utilisation de @import pose d'autres problèmes de performance, ce qui fait que son utilisation n'est pas fréquente.
@Eric
Il faut peut-être que tu repenses tes feuilles CSS en introduisant une CSS qui ne contient que des variables que importe ensuite dans les autres : la principale et les spécifiques.
Une variable spécifié dans une feuille importée est accessible dans celle qui importe : "the definition of a variable contained in a stylesheet B imported from a stylesheet A applies to all rules directly contained or imported into stylesheet A"
Tu as des preuves de ce que tu avances ?
Je voulais dire :
Ok, j'avais (mal) compris que les variables n'étaient héritées que dans un seul sens. Ca résouds effectivement une bonne partie du problème.
Coté perf le @import pose des problème sous IE. Le téléchargement de la CSS attend alors le téléchargement d'autres éléments et soit on délai le rendu soit on a un joli FLOUC.
Je suis en train de faire pas mal de recherches et de tests pour confirmer certaines ou compléter certaines connaissances. Je ne suis pas encore repassé sur celle là mais en attendant je fais à priori confiance aux études et résultats autant de Steve Souders et de l'équipe Performance de Yahoo! par exemple.
Enfin!
Bon, en attendant que ce soit là, je passe par des macro M4, ce qui permet aussi du calcul dessus au passage (pour les marges etc.), mais ça reste statique du coup.
Avec ça j'aurais peut être été plus efficace en CSS... Espérant que Mozilla implémente cela rapidement ;-)
On a déjà proposé des choses semblables il y a 10-12 ans: