Ecrire le code HTML pour un nouveau site ou page est l’une des parties du webdesign que je préfère car c’est vraiment comme poser les fondations d’une nouvelle maison ! Aussi sympa que soit cette partie, elle est tout de même assez fastidieuse. Grâce au plugin Zen coding, l’écriture du code HTML peut être grandement accélérée… Vive la productivité !
A quoi ça sert ?
Zen Coding est un plugin disponible pour un grand nombre d’éditeurs de code et permet d’accélérer grandement l’écriture de code HTML en convertissant une ligne de texte, dont la syntaxe est proche de code CSS, en markup HTML.
Pour comprendre le fonctionnement de Zen Coding considérons l’exemple suivant :
div#page>div.logo+ul#navigation>li*5>a
Cette simple ligne sera convertie automatiquement en code HTML :
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Redoutable non ?
En décomposant le fonctionnement, la ligne indique au plugin de :
- créer une div avec l’id #page (div#page) contenant (>)
- une div de classe .logo (div.logo) suivie (+)
- d’une liste non ordonnée d’id #navigation (ul#navigation) contenant (>)
- 5 objets de liste (li*5) qui contiennent (>)
- un lien (a)… ouf, rien que ça en une seule ligne !
Les possibilités du plugin
Actuellement Zen Coding propose les possibilités suivantes :
- Ajout d’attributs d’id et de class (#id.class) – les classes pouvant être chainées pour en appliquer plusieurs d’un coup.
- Ajout d’attributs sur mesure : div[title], a[title="Hello world" rel], td[colspan=2].
- La multiplication d’éléments : li*5 sera converti en 5 éléments <li>.
- La numérotation d’éléments : li.item$*3 deviendra 3 éléments <li class= »itemX »> où X est le numéro (en partant de 1) de l’élément.
- Plusieurs ‘$’ seront remplacés par des zéros : li.item$$$ deviendra <li class « item001″>.
- Des groupages qui potentiellement pourraient permettre d’écrire une page entière en une seule ligne : div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.
- Le support de filtres (voir la documentation)
Télécharger Zen Coding
Le plugin est disponible pour plusieurs éditeurs différents et téléchargeable gratuitement ici : Zen Coding. Vous y trouverez également la documentation — relativement courte puisque le plugin est très simple.
