Již podruhé se společně pokusíme dosáhnout osvícení skrze Zen Coding. Ukážeme si tvorbu dalších, složitějších struktur, různé modifikátory a mnoho postupů pro rychlejší a efektivnější kódování. A začneme rovnou tam, kde jsme minule skončili.

Práce s výchozím textem

Kolikrát při tvorbě stránky máte před sebou podobnou strukturu?

<ul>
  <li id="menu-1"><a href="#" title="Domů">Domů</a></li>
  <li id="menu-2"><a href="#" title="O nás">O nás</a></li>
  <li id="menu-3"><a href="#" title="Ceník">Ceník</a></li>
  <li id="menu-4"><a href="#" title="Kontakt">Kontakt</a></li>
</ul>

Pokud je vaše odpověď mezi 1 a ∞, pak vás Zen Coding zase osvobodí od zbytečného psaní. Ukážeme si, jak k této struktuře dojít pomocí jednoho řádku, ale pojďme hezky popořadě.

Vkládání textu

Od verze 0.7 je možné v Zen Codingu vkládat mezi elementy i text. Stačí jej umístit do množinových závorek { a }.

p{text}                  →     <p>text</p>
p>a{text odkazu}         →     <p><a href="">text odkazu</a></p>
p>{klikněte }+a{zde}     →     <p>klikněte <a href=““>zde</a></p>

Některé elementy (a, p, input, label aj.) se vždy píší na jeden řádek (inline - viz druhý a třetí řádek předchozího příkladu). Můžeme však vynutit jejich napsání na řádek nový takto:

p{}+a

Místo klasického napsání elementů na jeden řádek bude výsledkem:

<p>
  <a href=““></a>
</p>

Práce s již napsaným textem

Zen Coding má v oficiálně podporovaných editorech funkci „wrap with abbreviation“, což je něco jako „obalení“ již napsaného textu nebo kódu kódem dalším. Představme si, že budujeme navigaci. Nebylo by jednodušší vypsat si jenom kategorie a nechat ZEN, ať za nás udělá zbytek? Bylo - a tak to taky uděláme. Stačí nám tedy na samostatný řádek napsat nějaké položky, např. tyto:

Domů
O nás
Ceník
Kontakt

Pro použití musíme nejdříve celý text označit. Poté můžeme použít dříve zmiňovanou funkci. Zkratka pro tuto funkci je jiná než zkratka pro bězné expandování kódu. Je tedy třeba podívat se do nastavení nebo dokumentace pro příslušný editor. Po stisknutí příslušné zkratky nám vyskočí dialogové okno, do kterého napíšeme kód, který má být použit na vybrané elementy.

ul>li*>a

Znak * říká, že se má kód několikrát opakovat. Kolikrát, to si Zen automaticky zjistí podle počtu vybraných řádků. Pokud máme vybrány čtyři řádky, použije se tento kód na každý z nich. Vybraný text se vždy vkládá dovnitř posledního napsaného tagu. Výsledkem tedy bude:

<ul>
  <li><a href="">Domů</a></li>
  <li><a href="">O nás</a></li>
  <li><a href="">Ceník</a></li>
  <li><a href="">Kontakt</a></li>
</ul>

Máte rádi statistiky? Pak vás bude zajímat, že jsme museli napsat pouze 23 % kódu, který nám nakonec vzniknul.

Použití pseudoproměnných

Možnosti použití nám stále narůstají - a ještě dlouho budou. Každý řádek textu, který máme vybraný, se ukládá do speciální proměnné $#, kterou je pak možné opakovaně použít. Dobrým příkladem jsou např. obrázky - často je jejich atribut alt shodný s atributem title. Abychom nemuseli kód psát dvakrát, můžeme použít pseudoproměnnou. Mějme tedy např. tento výchozí text:

Obrázek města
Obrázek krajiny

Nyní si musíme tyto dva řádky označit a použít funkci „wrap with abbreviation“. Do dialogu napíšeme následující kód:

img[alt=$# title=$#]*+{}

Pro jistotu si popíšeme, co jsme právě udělali. Máme element img, kterému nastavujeme atributy alt a title tak, jak jsme si ukazovali v minulém díle - tedy pomocí hranatých závorek. Obsahem obou těchto hodnot bude pseudoproměnná $#, která na obě místa doplní text z vybraného řádku. Nesmíme zapomenout na hvězdičku na konci, která říká, že se má tato syntaxe několikrát opakovat. Jako poslední máme přidané prázdné množinové závorky, díky kterým se oba elementy napíšou na samostatný řádek. Kdyby tam tento doplněk nebyl, byly by oba elementy na řádku stejném. Náš výsledek vypadá takto:

<img src="" alt="Obrázek města" title="Obrázek města">
<img src=““ alt="Obrázek krajiny" title="Obrázek krajiny">

Pseudoproměnnou lze vkládat také místo textu, tedy dovnitř { a } (viz příklad na konci článku).

Modifikátory

Modifikátory - jak již název napovídá - nám nějakým způsobem mění vlastnosti elementů, se kterými jsou společně použity. Pro přehlednost si je rozdělíme na modifikátory obecné a konkrétní.

Obecné modifikátory

U tohoto typu je naprosto jedno, v jakém kontextu je použijeme. Stále dělají to samé, ať jsou použity jakkoliv - více pochopíte později. Modifikátory jsou vždy aplikovány pouze na element, za kterým bezprostředně následují.

Modifikátor '*'

Začneme starou dobrou hvězdičkou *, na kterou jsme již narazili. Jedná se o prosté násobení. Pokud nepoužíváme funkci „wrap with abbreviation“, pak musíme za hvězdičku napsat číslo - kolikrát se má element opakovat. Tento modifikátor se zvláště hodí pro tvorbu listů (navigace, seznam atd.).

ul>li*3>a

Výsledkem nám bude:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Modifikátor '$'

Jedná se v podstatě o další pseudo-proměnnou, ale je zmíněna mezi modifikátory, neboť se vždy používá ve spojení s *.

Společně s * se za $ dosadí číslo elementu. Viz příklad:

ul>li#menu-item-$*3>a

Dostaneme:

<ul>
  <li id="menu-item-1"><a href=""></a></li>
  <li id="menu-item-2"><a href=""></a></li>
  <li id="menu-item-3"><a href="></a></li>
</ul>

Toto se zvláště hodí, pokud chceme přiřadit jedinečné identifikátory tak, jak vidíme v příkladu. Můžeme použít také více znaků $ v řadě, kdy se pak místo dalšího čísla za $ doplňují nuly a je tak možné získat trochu jiný formát číslování. Kdybychom v našem příkladu místo jednoho $ použili $$$, vznikne nám následující:

<ul>
  <li id="menu-item-001"><a href=""></a></li>
  <li id="menu-item-002"><a href=""></a></li>
  <li id="menu-item-003"><a href=""></a></li>
</ul>

Specifické modifikátory

Nazval jsem je specifickými proto, že se vždy vážou k určitému danému prvku a mohou mít pouze některé předem dané hodnoty. Pro tyto modifikátory je společný znak : (dvojtečka), za kterou pak dosazujeme specifické hodnoty. Možností je mnoho, proto zde budou zmíněné jen ty nejpoužívanější. Podpora těchto modifikátorů se navíc napříč editory liší, proto nemusí modifikátor vždy fungovat.

html:[5, 4t, 4s, xt, xs, xxs]

Začneme elementem html, který vytvoří základní strukturu dokumentu. Za dvojtečku si dosazujeme verzi doctype. Po napsání např. html:5 dostaneme následující:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

Místo html:5 lze použít také např. html:4t nebo html:4s pro HTML4 Transitional resp. HTML4 strict, nicméně v době HTML5 už použití těchto doctypů ztrácí význam.

input:[submit, radio, color, range, checkbox, ...]

U elementu input za dvojtečku dosazujeme typ (můžeme vybírat z klasických možností, jako button, submit, radio aj.). Bez modifikátoru se automaticky dosadí type="text".

input           →   <input type="text">
input:button    →   <input type="button">

script:[src]

Určuje, zda ke scriptu přidat atribut src.

script        →    <script type="text/javascript"></script>
script:src    →    <script type="text/javascript" src=""></script>

a:[link, mail]

Modifikátor může upravit hodnotu, která bude předepsaná v atributu href.

a         →    <a href=""></a>
a:link    →    <a href="http://"></a>
a:mail    →    <a href="mailto:"></a>

cc:[ie6, ie, noie]

Vytvoří podmínku, která slouží k zaměření prohlížeče. cc je použitelný pouze dohromady s některým z modifikátorů.

cc:ie     →   <!--[if IE]><![endif]-->
cc:ie6    →   <!--[if lte IE 6]><![endif]-->
cc:noie   →   <!--[if !IE]><!--><!--<![endif]-->

Dokončení příkladu ze začátku

Po přečtení tohoto článku byste měli alespoň tušit, jak vytvořit strukturu zmíněnou na začátku. Podívejme se ale na řešení společně. Nejlepší bude použít funkci „wrap with abbreviation“. Napíšeme si tedy jednotlivé kategorie pod sebe:

Domů
O nás
Ceník
Kontakt

Poté použijeme příslušnou zkratku spolu s následujícím kódem:

ul>li#menu-$*>a[href=# title=$#]{$#}

Rozebereme si nyní krok po kroku, co jsme udělali. Máme element ul, který bude mít nějaké potomky li. Tyto elementy li budou mít přiřazeno unikátní id ve tvaru "menu-" a číslo elementu (tj. 1 až 4), které reprezentuje pseudoproměnná $. Poté následuje hvězdička, která značí, že se má kód provést pro každý označený řádek. Uvnitř nalezneme odkaz, který má nastaveny dva atributy - href, který je pro všechny "#", a také title, který má jako hodnotu vždy označený text na daném řádku. Jako poslední musíme ještě určit, jaký text bude uvnitř odkazu, což uděláme uzavřením naší pseudoproměnné do množinových závorek.

Závěr

Znovu zde přikládám odkaz na editor CodeMirror, ve kterém si můžete nově nabyté poznatky vyzkoušet bez toho, abyste museli Zen Coding instalovat. http://zen-coding.ru/codemirror/ [ http://zen-coding.ru/codemirror/ ]

Dnes jsme pokryli další významnou část Zen Codingu. Stále však máme před sebou ještě jeden díl, kde se dozvíme jak si upravit nastavení, jak přidat vlastní snippety (tj. kusy kódu) či jak použít tzv. filtry, které nám výsledný kód ještě nějak upraví. Můžete se také těšit na interaktivní test, který prověří vaše znalosti.

Pokud máte nějaký dotaz, rád jej zodpovím v komentářích. Pro tuto chvíli se s vámi loučím a doufám, že vám Zen Coding pomohl a již nepíšete HTML "špatně".