ObrázokNie je to ešte ani tak dávno, čo sa HTML 5 objavilo ako čerstvá novinka. A hneď sa z toho stalo buzz-word o ktorom sa veľa hovorilo ale nikto presne nevedel čo to je. Od vtedy už prešlo pár rokov a treba povedať, že aj v dnešnej dobe nie je úplne jednoduché zadefinovať. A podobne je to aj s jeho „mladším bratom“ CSS3. Ako to teda vlastne je sa môžeme teraz spolu pozrieť aj prostredníctvom knihy Beginning HTML5 and CSS3.

Myslím, že môžem povedať že web ako prostredie na vývoj aplikácie sa stal veľmi ťažko ovládateľný. Obrovská sila momentu a zotrvačnosti, ktorú predstavuje veľké množstvo stránok používajúcich staršie alebo neštandardné postupy sťažuje akýkoľvek pohyb vpred. Web so všetkými jeho technológiami je ako veľké zviera, ktoré si kráča svojou vlastnou cestou a len sem tam si nechá svoj smer korigovať niekym iným.

Aj táto neovládateľnosť bola jedna z príčin, prečo HTML5 (a ani CSS3) nie je jednoduchá špecifikácia, ktorá má svoj jasný začiatok a koniec. Namiesto toho je to sada špecifikácii, každá zameraná na určitú oblasť, pričom sa vyvíjajú nezávislé. To je forma, ktorou sa snaží HTML5 prežiť v svete nekontrolovateľného webu. A aj vďaka tejto premenlivej forme, je niekedy ťažké určiť čo to HTML5 je. Okrem samotného HTML jazyka v sebe zahŕňa aj Web Storage (lokálne kľúč-hodnota úložisko pre vašu stránku na strane klienta), Web Workers (paralelná práca vo vláknach v prehliadači) alebo Server-Sent events (áno, server kontaktuje klienta…).

Na jeden článok ale aj na knihu je toho naozaj veľa, preto sa aj autori Beginning HTML5 a CSS3 zamerali len na určité časti. Napríklad na samotný HTML jazyk. Ten, ako som už spomínal vyššie, by sa chcel vyvíjať dopredu ale zároveň nie je možné aby zahodil svoju minulosť, lebo by polovica webu prestala fungovať (pravdepodobne aj viac). Preto je opäť taký krok vpred pričom sa skôr jeho možnosti nabaľujú ako by sa vymieňali za nové. Preto sú napríklad všetky pôvodné značky z HTML 4 stále platné aj keď niektoré dostávajú trochu iný zmysel. Snaha HTML5 je pridať im viac sémantiky. Je to tak trochu posun k tomu, aby ste povedali aké údaje sú na stránke a nie ako sa majú zobrazovať. O zobrazenie (interpretáciu) údajov sa potom postará už prehliadač podľa toho v akom kontexte beží (v mobile/v počítači, pre slabo vidiacich atď).

Okrem spätnej kompatibility sú tú aj nové značky. Napríklad <section> a <article>. Tá prvá slúži na oddelenie časti text, ktorá má reprezentuje nejakú jednu tému v článku ale zároveň je súčasťou niečoho väčšieho (v podstate paragraf). To druhé na vymedzenie textu, ktorý má sám o sebe zmysel a teda môže byť napríklad presunutý v rámci stránky na iné miesto. Ako je z týchto dvoch elementov vidno, už tu naozaj nejde len o syntax ale začína sa uvažovať o zmysle a prepojeniach textov.

Ďalšie nové značky sú napríklad <header>, <footer>, <nav>, <aside> a niekoľko ďalších. Zaujímavosťou je napríklad, že značky <h1> až <h6> sú stále platné ale to číslo na konci stráca zmysel a na určenie veľkosti sa uvažuje ako je daný <h*> element vnorený v HTML štruktúre. Inak povedané, všade môžete používať <h1> ale ak dáte textu správnu štruktúru tak nadpisy sa budú postupne zmenšovať ako budú reprezentovať jednotlivé podnádpisy. Aj to je spôsob ako ostať spätne kompatibilný a pritom ísť dopredu.

Táto nerozhodnosť medzi zotrvaním a krokom dopredu spôsobuje, že sa kniha okrem téme nových značiek vo veľko venuje aj vysvetľovaniu toho, ako sa niektoré pôvodné značky interpretujú po novom. Nikde v tomto prípade nejde o radikálnu zmenu. Ale skôr len posun, ktorý je možný bez toho aby sa výrazne nenabúrala spätná kompatibilita.

Okrem toho je jednou za zaujímavých tém rozširovanie HTML5. V podstate ide o to, že do dokumentu potrebujete pridať vlastný druh informácii. Okrem <meta> elementu a class, rel, rev a profile atribútov, ktoré sa dali použiť už v HTML 4.1 pribudol <data> element , data-* atribúty a mikrodata. Zatiaľ čo <data> element a data-* atribúty predstavujú tú jednoduchšiu formu, mikrodata je spôsob ako do HTML vložiť celé štruktúry údajov. Takto obohatené HTML potom vie slúžiť pre softvér, ktorý týmto údajom naviac rozumie pre väčší prenos informácii alebo lepšie spracovanie.

A čo CSS3? (všimnite si, že nie CSS 3 ale CSS3 – bez medzery -, pričom posledná verzia bola CSS 2.1) Tak to už tiež nie je jedna špecifikácia ale sada špecifikácii, z ktorých každá ide svojou cestou a rýchlosťou. Každopádne základy CSS3 ostávajú rovnaké ako v predchádzajúcich verziách. CSS súbor definuje množina selektorov, ku ktorým sú priradené pravidla zmeny štýlu. Cele sa to potom vyhodnocuje od najmenej špecifického pravidla po najviac (preto to „cascade“ v názve).

Kniha okrem vysvetlenia CSS3 preberá základné layouti (rozloženia stránky), ktoré viete pomocou CSS dosiahnuť. Tie je dobré poznať, lebo podobne ako návrhové vzory pri programovaní, vo web dizajne tvoria akési hotové riešenia pre opakujúce sa problémy. Medzi ďalšie témy potom patria animácie a fonty. Pre človeka, ktorý nie je skúsený CSS-kár celkom zaujímavé čítanie.

Takže na záver menšie zhrnutie. Kniha je ideálna ak už ste o HTML a CSS niečo počuli ale potrebujete sa v tejto oblasti dovzdelať. Z HTML5 vysvetľuje hlavne nové (a existujúce) značky a CSS3 berie v podstate od úplného základu až k témam ako sú animácie. Je trochu staršia (rok 2012) preto treba brať informácie o tom, čo je v ktorom prehliadači ako podporované s rezervou ale obsahuje tiež odkazy na stránky, kde tieto informácie majú aktuálne. To ostatné, čo v knihe nájdete je podané celkom prijateľnou formou a preto ju môžem odporúčať.