Du CSS dynamique
J'adore le CSS, c'est un fait. L'avènement du CSS 3 est encore loin d'être vraiment ancré dans les consciences mais je ne désespère pas. Cela dit, je butte souvent sur la syntaxe parfois trop verbeuse du CSS. J'ai donc fouillé un peu à droite à gauche... et j'ai trouvé 2 projets intéressant dont un qui m'a littéralement conquis !
Le premier projet se base sur deux langage de style possible. Attendez ne partez pas en courant tout de suite. Ces langages sont le SASS et SCSS. En fait ce ne sont que des sur-couches à CSS. Donc si vous connaissez un peu le CSS vous n'allez pas trop avoir de mal.
Ce premier projet que j'ai utilisé est donc compass. C'est un outil en ligne de commande (qui a dit "beurk" ?) qui compile des fichier scss ou sass en CSS. Propre, puissant... il permet même de sortir du CSS compressé, compacté... bref une belle usine. Inutile que je continue, je ne vais même pas vous montrer la syntaxe parce que mon dévolu est jeté sur le second projet.
Le second projet, qui est celui que je regarde plus sérieusement, se nomme less.js. Vous l'avez compris dans le nom... c'est du javascript. Non arrêtez ne partez pas !!! Laissez moi finir :)
Non, vous n'allez pas taper du javascript, on reste dans du style. Encore un langage mais quel langage ! le LESS. Ce langage est complètement compatible à CSS, donc en renommant vos fichiers en ".less" ça continuera de fonctionner comme avant. L'intérêt se trouve dans la méthode de parsing, ce n'est plus le moteur interne du navigateur mais le moteur JS qui se charge de tout !
Avant de crier au scandale, je vais vous expliquer pourquoi ça ne change presque rien.
- d'abord, le script est raisonnablement petit pour être clairement insignifiant dans le poids d'une page standard
- le temps de parsing JS est ridicule, j'ai fait un test avec un fichier .less qui a pas mal de choses un peu bizarre... 98ms de calcul sur Firefox, 82ms sur Chrome (oui bon ba j'ai pas IE hein)
- Mon fichier .less est largement plus petit que le .css ! et c'est là la force de cette solution
En fait, si vous vous penchez sur le temps de traitement d'un CSS lourd comme c'est pas permis, et le traitement d'un .less en js, le temps est quasiment identique. Sauf que:
- le temps de développement est réduit
- vous avez une plus grande souplesse dans vos styles
Maintenant que je vous ai donné mon avis technique, je vous montre comment ça fonctionne. Récupérez en premier lieu le fichier "js" nécessaire: http://github.com/cloudhead/less.js/raw/master/dist/less-1.0.33.js Renommez le en "less.js" puis on va travailler.
On commence par ajouter deux balise dans l'entête de notre page:
<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>
Vous avez remarqué ? "stylesheet/less". L'intérêt ici est que vous avez toujours un code standard xhtml mais que le navigateur ne va pas se charger de ce fichier. C'est le JS qui va faire un appel Ajax pour le lire.
Ce fameux "main.less" est un fichier CSS standard ou presque. D'ailleurs vous pouvez faire du CSS simple et habituel. Mais vous allez pouvoir profiter d'une part de la syntaxe less, de l'autre des accès JS.
Prenons un exemple CSS:
#header {
color: #AAEEFF;
font-size: 1.1em
}
#header p {
font-size: 0.85em;
}
Bon, vous vous dites que c'est standard, ça l'est... mais moi ça m'énerve toujours de devoir redéfinir ce "#header" en dessous. Voilà ce que permet less:
#header {
color: #AAEEFF;
font-size: 1.1em;
p {
font-size: 0.85em;
}
}
Pour moi c'est plus joli, plus lisible, plus maintenable... non ? Mais mieux encore, laissez moi vous montrer:
@couleur_speciale: #D21245;
a {
color: @couleur_speciale;
}
/* ... */
#header {
border: 1px solid @couleur_special
}
Et oui, on peut déclarer des variables. Je vous assure que quand vous avez une couleur prédominante à changer dans tout un site, c'est un régal!
Mais on peut aller plus loin, avec des macros:
.round_border (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
padding: @radius * 2
}
Alors là deux chose:
- .nom_de_macro (@variable: valeur-par-defaut) ⇒ assez simple selon moi
- padding: @radius * 2 ⇒ et hop on peut calculer en plus !
Reste à utiliser la macro:
p {
.round_border;
}
/* ou en passant un paramètre */
p.big {
.round_border(10px);
}
Il y a des dixaines de possibilités, mais pensez aussi à une chose, dans les fichiers less on peut importer des fichiers... cela évite d'ajouter des balises de styles.
@import "fichier css ou less"
Et enfin, je vous le disait, on peut travailler avec des variables js:
p {
.round_border;
font-size: 'window.innerHeight' * 0.12
}
Voilà, pour ma part je commence à me pencher de plus en plus sur ce projet... il fonctionne parfaitement bien sur firefox, opera, chrome et (on me l'a dit) sur IE 6, 7 et 8. Pour ces derniers je vais devoir relancer des machines virtuelles un de ces quatre.
Bref, en espérant que je vous ai montré un truc cool :) je vous laisse !
[Edit]
En fait il existe des implémentation de less dans différents langages comme PHP ou .net
Pour PHP, allez voir par ici http://leafo.net/lessphp/
Pas de commentaire pour le moment
Trackbacks
Pour ajouter un trackback (retrolien) sur ce ticket, utilisez cette adresse: http://www.metal3d.org/index.php/trackback/default/tb?id=blog%2F265