- Smashing Magazine a consacré récemment un tutoriel sur le sujet ;
- quelques curieux s’y essayent en ce moment sur Twitter.
Suffisamment d’éléments pour donner envie d’en parler un peu ici. Il faut dire aussi que je suis plutôt convaincu par les possibilités offertes.
De quoi s’agit-il exactement ?
Zen-coding propose simplement quelques automatisations qui viennent se greffer sur votre éditeur habituel.
La fonctionnalité principale (implémentée en premier sur les éditeurs) est basée sur la syntaxe des sélecteurs CSS : idéal pour ne pas être dérouté.
Par exemple si j’entre :
div#content>p.intro+ul>li*3>a
J’obtiens immédiatement :
<div id="content">
<p class="intro"></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
On joue donc entre les sélecteurs enfants et adjacents pour construire sa structure d’une ligne.
Les « abréviations » permettent également donc de générer un grand nombre d’éléments HTML pré-construits ainsi que des propriétés CSS.
Tout cela est très efficace, d’autant qu’une fois le code généré, il suffira de tabuler pour que l’éditeur fasse passer votre curseur sur les endroits où du contenu doit être ajouté.
Sur l’exemple précédent, c’est :
<div id="content">
<p class="intro">ici,</p>
<ul>
<li><a href="ici,">ici,</a></li>
<li><a href="ici,">ici,</a></li>
<li><a href="ici,">et ici.</a></li>
</ul>
</div>
Autre fonctionnalité intéressante : la possibilité de sélectionner de manière progressive des portions de code. Toujours en reprenant l’exemple précédent, et en supposant que je place mon curseur entre « et » et « ici. », à chaque fois que je déclenche la fonctionnalité je sélectionne :
et ici.;<a href="ici,">et ici.</a>;<li><a href="ici,">et ici.</a></li>;- etc.
Et bien sûr la sélection est faite de manière à pouvoir supprimer le bloc proprement d’un coup.
Arrive également la possibilité d’ajouter autour de la structure sélectionnée une nouvelle abréviation.
Je peux par exemple facilement produire en quelques raccourcis claviers :
<div id="content">
<p class="intro">ici,</p>
<div class="blocs ajoutes par la suite">
<div class="blocs">
<ul>
<li><a href="ici">ici,</a></li>
<li><a href="ici">ici,</a></li>
<li><a href="ici">et ici.</a></li>
</ul>
</div>
</div>
</div>
Tout cela sans devoir à aucun moment revoir mes indentations.
Pour les utilisateurs avancés, il est également possible de (re)définir finement de nouveaux modèles, en précisant syntaxes, positions du curseurs, etc.
Plongez-vous également dans les filtres de sortie qui semblent eux aussi très puissants.
Parfait ?
Pratique en tout cas. Il faudra cependant prendre le temps d’appendre les raccourcis clavier propres à votre éditeur pour en profiter pleinement. Et surtout croiser les doigts pour que votre éditeur favori supporte le plugin convenablement.
Difficile de se défaire de nos petites habitudes acquises au jour le jour pour en adopter d’autres… mais il semblerait que ça vaille le coup d’essayer.