Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele, s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí. Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software, a.s Nové sady 18, 602 00 Brno tel.: 532 190 883 e-mail: [email protected] www.zonerpress.cz
ISBN: 978-80-7413-166-0
Stručný obsah Kapitola 1
Úvod do HTML5 a CSS3
23
Kapitola 2
Značkování ve stylu HTML5
31
Kapitola 3
Více sémantiky v HTML5
49
Kapitola 4
HTML5 a formuláře
63
Kapitola 5
HTML5 audio a video
85
Kapitola 6
Úvod do CSS3
107
Kapitola 7
Gradienty a vícenásobná pozadí CSS3
125
Kapitola 8
Transformace a přechody CSS3
147
Kapitola 9
Vkládané fonty a vícesloupcové layouty
165
Kapitola 10
Geolokace, off-line webové aplikace a Web Storage
187
Kapitola 11
Canvas, SVG a Drag and Drop
219
Dodatek A
Knihovna Modernizr
259
Dodatek B
WAI-ARIA
263
Dodatek C
Microdata
267
Rejstřík
271
Mým rodičům, kteří mi stále dodávali odvahu a věřili ve mne. A mé talentované, výkonné a milující babičce Joan. Vždycky jsi mě nechala kreslit, ať už jsem měla dělat cokoliv jiného. – Alexis
Melánii, nejlepší kuchařce na celém světě. A mým rodičům, že mi zaplatili počáteční kurz, díky němuž jsem pronikl do tohoto jedinečného odvětví. – Louis
Amie, že se mnou všechno vydržela, a Spazzo a Puppers, že se ke mně tulili, když jsem se nemohla odtrhnout od práce. – Estelle
5
Podrobný obsah O tvůrcích knihy
14
Alexis Goldsteinová
14
Louis Lazaris
14
Estelle Weylová
14
Odborný recenzent
14
Vydavatelství SitePoint
14
Poděkování
15
Předmluva
16
Úvod
17
Komu je tato kniha určena?
17
Co naleznete v této knize?
17
Kde hledat pomoc?
20
Newslettery SitePointu
21
Podcast SitePointu
21
Konvence používané v této knize
21
Poděkování
Kapitola 1
Úvod do HTML5 a CSS3
Co je HTML5?
23 23
Jak jsme se sem dostali? Kdy se dočkáme opravdové specifikace HTML5?
24 25
Proč bychom se měli zabývat HTML5?
25
Co je CSS3?
26
Proč bychom se měli zabývat CSS3?
26
Co rozumíme slovy "skutečný svět"?
27
Rozmanitost prohlížečů na trhu
27
Rostoucí mobilní trh
28
Jak je to v realitě
Kapitola 2
29
Značkování ve stylu HTML5
31
Představujeme "The HTML5 Herald"
31
Základní šablona HTML5
32
Deklarace doctype
33
6 Prvek html
34
Prvek head
34
Nastolení stejných podmínek
35
Zbytek je historie
36
Často kladené otázky k HTML5
37
Jak to, že HTML5 nemá problém se staršími prohlížeči?
37
Neměly by být všechny značky uzavřeny?
38
Je syntaxe HTML5 odlišná od syntaxe XHTML?
39
Prvky pro definici struktury stránky
40
Prvek header
41
Prvek section
41
Prvek article
42
Prvek nav
43
Prvek aside
44
Prvek footer
44
Vytvoření struktury pro "The HTML5 Herald"
45
Shrnutí
47
Kapitola 3
Více sémantiky v HTML5
49
Nový pohled na typy obsahu
49
Osnova dokumentu
50
Hlavní titulky pro The HTML5 Herald Prvek hgroup Další nové prvky a funkcionality HTML5
52 52 54
Prvky figure a figcaption
54
Prvek mark
55
Prvky progress a meter
55
Prvek time
56
Prvek details
57
Přizpůsobené uspořádané seznamy
57
Styly jen pro daný obor
58
Atribut async pro skripty
58
Změny již existujících prvků
58
Slovo "zavržený" bylo zavrženo
59
Blokové prvky uvnitř odkazů
59
Tučný text
59
Text kurzívou
59
7 Velký a malý text
60
Prvek cite
60
Seznamy popisů (nikoli definic)
60
Validace XHTML vs HTML5
61
Shrnutí
62
Kapitola 4
HTML5 a formuláře
63
Kód formuláře pro The HTML5 Herald
63
Atributy pro HTML5 formuláře
65
Atribut required
65
Atribut placeholder
69
Atribut pattern
71
Atribut disabled
72
Atribut readonly
73
Atribut multiple
73
Atribut form
73
Atribut autocomplete
73
Prvek datalist a atribut list
74
Atribut autofocus Nové formulářové vstupní typy v HTML5 Vstupní typ search
74 75 76
E-mailové adresy
76
Adresy URL
77
Telefonní čísla
78
Čísla
78
Rozsahy
79
Barvy
80
Datum a čas
80
Ostatní formulářové prvky v HTML5
83
Prvek output
83
Prvek keygen
83
Změny v existujících prvcích a atributech pro formuláře
83
Prvek form
83
Prvek optgroup
84
Prvek textarea
84
Shrnutí
84
8 Kapitola 5
HTML5 audio a video
85
Stručný výlet do minulosti
85
Současný stav přehrávání
86
Formáty kontejneru videa
86
Kodeky videa
86
Kodeky audia
86
Které kombinace fungují v současných prohlížečích?
86
Značkování pro video
87
Zobrazení nativních ovládacích prvků
88
Atribut autoplay
88
Atribut loop
89
Atribut preload
89
Atribut poster
90
Atribut audio
90
Podpora pro několik formátů videa
90
Pořadí prvků source
91
A co Internet Explorer 6 až 8?
92
Typy MIME
93
Kódování souborů videa pro použití na webu
94
Vytváření vlastních ovládacích prvků
94
Něco značkování a stylování pro začátek
94
Úvod do API mediálních prvků
96
Přehrávání a pozastavování videa
97
Zapínání a vypínání audio stopy videa
100
Reakce na konec přehrání videa
101
Aktualizace času při přehrávání videa
101
Další schopnosti API mediálních prvků
103
Prvek audio
104
Přístupnější média
104
Shrnutí
105
Kapitola 6
Úvod do CSS3
Vraťme staré prohlížeče do hry Selektory CSS3
107 107 108
Relační selektory
108
Selektory atributů
109
HTML5 a CSS3 pro webové designéry
9
Pseudotřídy
110
Strukturální pseudotřídy
111
Pseudoprvky a generovaný obsah
113
Barvy v CSS3
114
RGBA
114
HSL a HSLA
115
(Ne)průhlednost
116
Dejme všechno dohromady
116
Zakulacené rohy: border-radius
118
Vržený stín: box-shadow Vnitřní stíny a několik stínů najednou Stínovaný text: text-shadow
120 122 123
Dokončení ostatních stínů
124
Shrnutí
124
Kapitola 7
Gradienty a vícenásobná pozadí CSS3
Lineární gradienty Syntaxe W3C
125 125 127
Stará syntaxe WebKitu
130
Dejme všechno dohromady
131
Lineární gradient ve formátu SVG
133
Lineární gradienty pro starší IE
135
Nástroje pro vytváření kódu gradientů
135
Radiální gradienty
136
Syntaxe W3C
136
Stará syntaxe WebKitu
138
Dejme všechno dohromady
139
Opakování gradientů
140
Vícenásobné obrázky na pozadí
141
Velikost pozadí
144
Shrnutí
145
Kapitola 8
Transformace a přechody CSS3
Transformace
147 147
Posun prvku
148
Změna velikosti
149
10 Rotace
151
Zešikmení
152
Změna počátku transformace
152
Podpora transformací pro IE8 a dřívější
153
Přechody
153
Vlastnost transition-property
154
Vlastnost transition-duration
155
Vlastnost transition-timing-function
156
Vlastnost transition-delay
157
Vlastnost transition: zkrácený zápis
157
Vícenásobné přechody
158
Animace
159
Klíčové snímky
159
Animační vlastnosti
161
Zkrácený zápis animačních vlastností
162
Shrnutí
Kapitola 9
163
Vkládané fonty a vícesloupcové layouty
Vkládané fonty s @font-face
165 165
Implementace @font-face
166
Deklarace zdrojů fontů
167
Deskriptory vlastností fontu
169
Rozsah Unicode
170
Aplikování fontu
171
Poznámky k legálnosti
171
Font Squirrel – převod fontu do různých formátů
172
Závěrem k fontům
174
Vícesloupcové layouty CSS3
175
Vlastnost column-count
176
Vlastnost column-gap
176
Vlastnost column-width
177
Zkrácený zápis s vlastností columns
178
Sloupce a vlastnost height
179
Další vlastnosti pro novinové sloupce
179
Závěrem ke sloupcům
181
Progressive Enhancement
182
Dotazy na média
182
11 Co jsou dotazy na média?
183
Syntaxe
183
Flexibilita dotazů na média
184
Podpora v prohlížečích
184
Další čtení
185
Shrnutí
Kapitola 10
185
Geolokace, off-line webové aplikace a Web Storage
API pro geolokaci
187 188
Otázka soukromí
188
Geolokační metody
189
Kontrola podpory s Modernizr
189
Získání aktuální polohy
190
Objekt Position geolokačního API
190
Získání zeměpisné šířky a délky
191
Načtení mapy
192
Starší mobilní zařízení?
196
Off-line webové aplikace
196
Jak to funguje – aplikační cache HTML5
196
Nastavení webu, aby fungoval off-line
197
Udělení povolení ukládat web off-line
199
Otestování funkčnosti
199
Jak na The HTML5 Herald dostupný off-line?
201
Limit úložiště pro off-line webové aplikace
202
Sekce FALLBACK
202
Aktualizace cache
204
Je uživatel on-line, nebo off-line?
205
Další čtení
206
Web Storage
206
Dva druhy úložišť
206
Formát dat pro Web Storage
208
Získávání a nastavování dat
208
Konverze uložených dat
208
Zkrácený zápis
209
Odstraňování položek a vyprázdnění dat
209
Limity úložiště
209
Otázky bezpečnosti
210
12 Web Storage pro The HTML5 Herald
210
Prohlídka hodnot Web Storage s nástrojem Web Inspector
214
Další zajímavá API HTML5
215
Web Workers
215
Web Sockets
216
Web SQL a IndexedDB Shrnutí
Kapitola 11
217 217
Canvas, SVG a Drag and Drop
API Canvas
219 219
Špetka historie o Canvas
220
Vytvoření prvku canvas
220
Kreslení na plátno
221
Získání kontextu
222
Namočení štětce do barvy
222
Nakreslení obdélníku na plátno
223
Souřadnicový systém plátna
224
Variace na styl výplně
224
Kreslení jiných tvarů vytvářením cest
227
Ukládání kreseb nakreslených na plátno
230
Kreslení obrázků na plátno
231
Manipulace s obrázky
233
Konverze barevného obrázku na černobílý
234
Bezpečnostní chyba u getImageData
236
Využití Canvas pro manipulaci s videi
237
Zobrazování textu na plátno
239
Přístupnost Canvas
243
Další četba
243
Formát SVG
244
Kreslení v SVG
244
Nástroj Inkscape pro snadnější vytváření SVG
247
SVG filtry
247
Knihovna Raphaël
248
Canvas versus SVG
250
API Drag and Drop
251
Krmení pro kočku WAI-ARIA
252
Atribut draggable
253
13 Objekt dataTransfer
254
Přijímání pouštěných prvků
254
Další informace
257
Shrnutí
Dodatek A
257
Knihovna Modernizr
259
Modernizr s CSS
259
Modernizr s JavaScriptem
261
Podpora pro stylování HTML5 prvků v IE8 a dřívějších
262
Další četba
262
Dodatek B
WAI-ARIA
263
Jak WAI-ARIA doplňuje sémantiku
263
Současný stav WAI-ARIA
264
Další četba
265
Dodatek C
Microdata
267
Sémantika HTML5 je nedostatečná?
268
Syntaxe Microdat
268
Co jsou páry název-hodnota?
269
Jmenné prostory Microdat
269
Další četba
269
14
O tvůrcích knihy Alexis Goldsteinová Alexis Goldsteinová se poprvé setkala s HTML někdy uprostřed devadesátých let minulého století, když navštěvovala střední školu. Poté pokračovala ve studiu na Kolumbijské univerzitě, kde absolvovala obor se zaměřením na počítačové vědy. Provozuje vlastní softwarovou vývojářskou a školicí firmu Aut Faciam LLC. Než začala Alexis podnikat, strávila sedm let v oblasti technologií na Wall Streetu, kde se u tří velkých firem zabývala peněžními vklady vlastníků a deriváty pro nákup a prodej cenných papírů. Zde se naučila mít kladný vztah k denním revizím kódu. Je lektorkou a spoluorganizátorkou Girl Develop It, což je skupina, která vede nízkonákladové programovací kurzy pro ženy a je hrdou členkou NYC Resistor v Brooklynu, stát New York. Alexis najdete na jejím webu na http://alexisgo.com/.
Louis Lazaris Louis Lazaris je webový designér na volné noze a vývojář front-endů. Pochází z Toronta v Kanadě. Problematikou webového designu se zabývá už od roku 2000. Louis pracuje na webech už od těch časů, kdy webovému designu dominovaly tabulkový layout a jednopixelové obrázky ve formátu GIF. V posledních pěti letech přijal za své webové standardy a snaží se propagovat "nejlepší doporučené postupy", které pomáhají jak vývojářům, tak i jejich klientům snadněji dosahovat cílů, které si stanovili ve svých projektech. Louis pravidelně píše články pro mnoho prvořadých blogů se zaměřením na webový design včetně svého vlastního webu s názvem Impressive Webs (http://www.impressivewebs.com/).
Estelle Weylová Estelle Weylová je front-endová inženýrka ze San Franciska, která už od roku 1999 vyvíjí dobře přístupné weby založené na standardech. Estelle si začala pohrávat s CSS3 někdy v roce 2007, kdy byl vydán první iPhone, a po čtyřech letech vývoje webových aplikací pro mobilní WebKit ví (téměř) o všech výstřednostech CSS3 na WebKitu. Má obrovské zkušenosti s implementováním komponent HTML5. Vytváří odborný blog Standardista (http://www.standardista.com/) se zaměřením na HTML5 a CSS3 (a jejich podporu v prohlížečích). Protože Estellinou vášní je vyučovat problematiku webového vývoje, na konferencích po celých USA přednáší o CSS3, HTML5, JavaScriptu a webovém vývoji pro mobily.
Odborný recenzent Russ Weakley pracuje v designu už přes 18 let, především ve webovém designu, vývoji a výuce. Russ je spolupředsedajícím Web Standards Group a zakládajícím členem Web Industry Professionals Association v Austrálii (WIPA). Russ je autorem nadšeně přijaté série tutoriálů o CSS a díky svým prezentacím a workshopům je populární i v zahraničí. Spravuje web Max Design (http://maxdesign.com.au/).
Vydavatelství SitePoint SitePoint se specializuje na publikování zábavného, praktického a snadno srozumitelného obsahu pro webové profesionály. Pokud se chcete dostat k blogům, knihám, časopisům, článkům a komunitním fórům vydavatelství SitePoint, navštivte http://www.sitepoint.com/.
15
Poděkování Mé díky zasluhují Lisa Langová, Russ Weakley a Louis Simoneau. Vaše soustředění na detaily, zodpovědnost a imponující odborná expertíza způsobily, že má práce na knize byla opravdovým potěšením. Děkuji také svým spoluautorům, Louisovi a Estelle, kteří mě neustále překvapovali svými hlubokými znalostmi, nesmírnými zkušenostmi a zázračnou schopností nalézat chyby v nejnovějších prohlížečích. Zvláštní dík patří Estelle za její povzbuzování, za něž jsem hluboce vděčná. Nakonec chci poděkovat své přítelkyni Tabathe, která nyní ví o různých API JavaScriptu pro HTML5 více než většina mých našprtaných přátel. Dík za tvou trpělivost, názory a veškerou tvou podporu. Pomohla jsi mi brát věci méně vážně, což, jak dobře ví každý, kdo mě zná, je neskonale obtížná úloha. Díky, že jsi mě vždy dokázala rozveselit. – Alexis Goldsteinová
Děkuji své ženě, že to se mnou vydržela v době, kdy jsem se dlouhé hodiny účastnil prací na tomto skvělém projektu. Děkuji svým talentovaným spoluautorkám, Estelle a Alexis, že mě poctily privilegiem mít své jméno uvedené společně s jejich. Samozřejmě také děkuji našemu odbornému recenzentovi Russovi za jeho skvělý odborný vhled, který projevoval v průběhu prací na této knize. Speciální díky patří talentovanému týmu z vydavatelství SitePoint za jejich velice profesionální zpracování tohoto projektu a za všechnu tu námahu, který je s takovým projektem vždy neodmyslitelně spojena. – Louis Lazaris
Velký dík patří celé open source komunitě. Díky volbě "Zobrazit zdrojový kód" jsem se učila od každého vývojáře, který se rozhodl při tvorbě stránky použít značkování a ne zásuvné moduly, jako je Flash. Ráda bych poděkovala zejména Jen Mei Wuové a Sandi Watkinsové, které mne vedly správným směrem, když jsem začínala svou kariéru. Děkuji také Dave Gregorymu a Laurie Vossovi, kteří mi pomáhali nacházet patřičná slova, když mi unikala. Děkuji Stephanie Sullivanové za brainstorming kódu až do časných ranních hodin. A děkuji také svým vývojářským přátelům u Opery, Mozilly a Googlu, že vytvořili fascinující prohlížeče a dali nám tak příležitost si nejenom pohrávat s HTML5 a CSS, ale také napsat tuto knihu. – Estelle Weylová
16
Předmluva Víte, kdo je Sjoerd Visscher? Troufnu si odhadnout, že nikoliv, ale to, co on sám považuje jen za drobný objev, není v zásadě nic menšího než schopnost používat HTML5 pro webové stránky už dnes. V roce 2002, v Haagu, v Holandsku, se pan Visscher snažil vylepšit výkon svého XSL výstupu. Když ale zkusil přejít od volání createElement k nastavování vlastnosti innerHTML, zjistil, že všechny neznámé prvky, které nepatří do HTML, už nebylo možné stylovat prostřednictvím kaskádových stylů. Rychle přeskočme do roku 2008, kdy HTML5 nabralo rychlý spád a kdy byly specifikovány nové prvky. V praxi se ale projevovaly problémy s Internet Explorerem verze 6, 7 a 8, které tyto nové prvky HTML5 nedokázaly rozpoznat. Tyto prvky nemohly mít dceřiné prvky a stylové předpisy na ně neměly žádný vliv. Tato deprimující skutečnost bránila tomu, aby mohlo být HTML5 akceptován v širokém měřítku. A v tuto chvíli, pět let po svém objevu, Sjoerd nenápadně zmínil svůj trik Samovi Rubymu v diskuzi na blogu HTML Working Group W3C následovně: "BTW, pokud chceš aplikovat CSS pravidla na neznámé prvky v IE, stačí k tomu document.createElement(elementName). Tohle nějakým způsobem umožňuje enginu CSS dozvědět se, že existuje prvek s daným názvem." Iana Hicksona, vůdčího editora HTML5 specifikace, něco takového velice překvapilo, stejně jako zbytek webu. Protože nikdy předtím o tom triku neslyšel, s nadšením reportoval: "Tato nenápadná informace umožňuje vybudovat kompatibilní záplatu HTML5 pro IE7 mnohem snadněji, než se původně předpokládalo." Hned další den vytvořil John Resig příspěvek, v němž se poprvé objevil termín "HTML5 shiv". A zde máte stručný časový přehled toho, co všechno se dělo dál: Leden 2009. Remy Sharp vytváří první distribuovatelný skript, který umožňuje v IE zapnout podporu
nových prvků HTML5. Červen 2009. Faruk Ateş zahrnuje HTML5 shiv do počátečního vydání knihovny Modernizr. Únor 2010. Spolupráce několika superhvězdných vývojářů JavaScriptu, mezi něž patřili Remy, Kangax,
John-David Dalton a PorneL, umožnila zredukovat velikost souboru skriptu. Březen 2010. Mathias Bynens a další si povšimli, že HTML5 shiv neovlivňuje stránky, které jsou tištěny
z IE. To byl neradostný den. Vydala se neformální výzva k vývojářům, aby našli nějaké řešení. Duben 2010. Jonathan Neal odpověděl na tuto výzvu s IE Print Protector (IEPP), který pokrýval obor
HTML5 shiv a navíc přidával podporu pro tisk prvků. Duben 2010. Remy nahrazuje poděděné řešení HTML5 shiv novým IEPP. Únor 2011. Alexander Farkas přebírá pochodeň, přesouvá projekt IEPP do GitHub, přidává sadu pro
testování, opravuje chyby a vylepšuje výkon. Duben2011. Přichází IEPP verze 2. Knihovna Modernizr a HTML5 shiv získávají tento nejnovější kód,
zatímco vývojáři již používají nové prvky HTML5 napříč prohlížeči bez jakýchkoliv potíží. Tento příběh o HTML5 shiv je pouze jednou ukázkou z mnoha, jak dokáže komunita spolupracovat pro dosažení pokroku v otevřeném webovém vývoji. Není to pouze W3C nebo výrobci prohlížečů, kteří přímo ovlivňují, jak bude web fungovat – mohou to dělat i lidé jako vy a já. Doufám, že vás tato kniha podnítí, abyste i vy přispívali v obdobném duchu. Nejlepší způsob, jak vylepšovat své dovednosti, je aktivně sdílet to, co umíte. Akceptovat HTML5 a CSS3 je dnes jednodušší než kdykoliv předtím a je to opravdu zábavné. Kniha, kterou právě držíte v ruce, obsahuje spoustu praktických informací, které by vám měly poskytnout všechno, co potřebujete znát k tomu, abyste hned teď mohli začít využívat všechny přednosti HTML5.
17 Autoři této knihy – Alexis, Louis a Estelle – jsou respektovaní weboví vývojáři, kteří vám předkládají opravdu realistickou učící křivku, abyste byli schopni snadno absorbovat nejlepší doporučené postupy vývoje se standardem HTML5. Doufám, že tato kniha vám bude dobře sloužit a že budete z nové generace webu vzrušeni a nadšeni stejně jako já. – Paul Irish jQuery Dev Relations, vůdčí vývojář Modernizr a HTML5 Boilerplate duben 2011
Úvod Vítejte v HTML5 a CSS3 pro webové designéry. Jsme rádi, že jste se rozhodli připojit se k nám na cestu, na které odhalíte něco z nejnovější a nejskvělejší technologie pro budování front-endu webů. Protože jste si zakoupili tuto knihu, přepokládáme, že o HTML a CSS patrně už něco víte. Možná jste dokonce příležitostní profíci v některých oblastech značkování, stylování či skriptování a nyní si chcete dále rozšířit své dovednosti tím, že se ponoříte do nových funkcí a technologií sdružených s HTML5 a CSS3. Učit se nové věci může být někdy obtížné. Možná nemáte času nazbyt, takže si nemůžete dovolit podrobně prostudovat oficiální dokumentaci a specifikace těchto webově založených jazyků. Možná vás také odradily některé až přespříliš odborně zaměřené knihy, které jsou sice dobré jako referenční příručky, nicméně poskytují jen málo, pokud jde o konkrétní praktické příklady ze skutečného světa. Protože cílem této knihy je učit vás tak, abyste si mohli všechno hned vyzkoušet a otestovat, poskytneme vám i praktické pokyny, které přijdou vhod, až se budete potýkat s problémy skutečného světa, jimž musíte v současnosti čelit při vytváření webových stránek – a zejména se soustředíme na problematiku HTML5 a CSS3. Kniha je ale mnohem více než návod ve stylu krok za krokem. Průběžně vám totiž poskytneme spoustu teoretických a odborných informací, abyste mohli zaplnit jakékoliv případné mezery v porozumění danému výkladu, ale současně jsme se pečlivě snažili, abychom vás nezahltili příliš velkým objemem nových skvělých schopností. Začněme tedy!
Komu je tato kniha určena? Kniha je zaměřena na webové designéry a front-endové vývojáře, kteří se chtějí dozvědět informace o nejnovější generaci technologií založených na webovém prohlížeči. Znalosti o HTML a CSS byste měli mít alespoň na mírně pokročilé úrovni, protože vůbec nebudeme ztrácet čas výkladem základů značkování a stylování. Soustředíme se na to, abychom vás naučili nové věci, které máte nyní k dispozici ve formě HTML5 a CSS3. V posledních dvou kapitolách této knihy se probírají některá z nových API JavaScriptu, která úzce souvisejí s HTML5. Tyto kapitoly samozřejmě vyžadují jisté základní povědomí o JavaScriptu, nicméně k celkovému pochopení výkladu o HTML5 nejsou nutné. Pokud nejste dobře obeznámeni s JavaScriptem, můžete je prozatím přeskočit a vrátit se k nim později, až budete na jejich zvládnutí lépe vybaveni.
Co naleznete v této knize? Kniha se skládá z jedenácti kapitol a tří dodatků. Protože většina kapitol navazuje na předchozí, bude nejlepší číst knihu od začátku do konce, nicméně si můžete tu a tam odskočit, pokud si potřebujete oživit nějaké téma.
18
Kapitola 1 – Úvod do HTML5 a CSS3 Než se začneme potýkat s probíranou látkou, uvedeme vás trochu do historie a předložíme několik pádných argumentů, proč byste měli už dnes začít používat HTML5 a CSS3. Podíváme se také na současný stav implementace těchto nových technologií do webových prohlížečů a pokusíme se vás přesvědčit, že valná většina z nich je už v takové fázi, že je můžete hned začít používat – ale samozřejmě až po zralé úvaze.
Kapitola 2 – Značkování ve stylu HTML5 V této kapitole si popíšeme některé strukturální a sémantické prvky, které jsou nové v HTML5. Také vás seznámíme s naším ukázkovým webem The HTML5 Herald, na němž budeme v průběhu celé této knihy pracovat. Myslíte si, že jsou prvky div nudné? My taky. Na HTML5 je pěkné, že vám nabízí mnohem více voleb: article, section, nav, footer, aside a header!
Kapitola 3 – Více sémantiky v HTML5 Třetí kapitola těsně navazuje na předchozí kapitolu – budeme se zde věnovat novému způsobu, jímž HTML5 konstruuje osnovy dokumentů. Poté se podíváme na několik dalších sémantických prvků, které umožňují být při značkování trochu expresivnější.
Kapitola 4 – HTML5 a formuláře Mezi nejvíce užitečné a aktuálně pro praxi i nejvíce aplikovatelné funkce v HTML5 patří formuláře. Celá řada prohlížečů už nyní zahrnuje nativní podporu pro validaci formulářových prvků určených pro zadávání e-mailů a URL adres. Některé prohlížeče dokonce nativně podporují i prvky pro výběr data (date pickers), posuvníky (sliders) a číselníky (spinner boxes). Implementace formulářů v HTML5 je už téměř v takovém stavu, že je budete kódovat s potěšením. V této kapitole se probírá vše, co potřebujete vědět pro rychlé vytváření formulářů v HTML5. Také se zde zmiňují nouzová řešení, která jsou určena pro starší prohlížeče.
Kapitola 5 – HTML5 audio a video HTML5 je vhodná technologie pro prezentaci multimediálního obsahu, což je pozice, kterou tak dlouho držel Flash. Důvodem pro toto tvrzení jsou nové prvky audio a video, které slouží jako nativní a skriptovatelné kontejnery pro vaše multimediální soubory, takže se už nemusíte spoléhat na nějaký externí plugin jako Flash. V této kapitole se dozvíte všechna pro i proti, pokud přemýšlíte o použití těchto prvků ve vašich stránkách. (Tato kapitola samozřejmě pokrývá jen základy, takže pokud to s prvky audio a video myslíte vážně, doporučujeme nahlédnout do knihy "HTML5 – audio a video, kompletní průvodce", která jde více hloubky. Kniha vyšla v roce 2011 ve vydavatelství Zoner Press, další informace viz http://zonerpress.cz.)
Kapitola 6 – Úvod do CSS3 Když jsme probrali téměř všechno, co potřebujete znát o HTML5, je načase přesunout se k jeho blízkému příbuznému, kterým je CSS3. Projížďku po CSS3 začneme tím, že se nejprve podíváme na některé nové selektory, které umožňují zacilovat se na prvky na stránce s bezprecedentní flexibilitou. Následně budeme pokračovat pohledem na některé nové způsoby pro zadávání barev v CSS3 (včetně průhlednosti). Tuto kapitolu pak zakončíme popisem několika drobností, které ale potěší snad každého webového designéra. Jedná se o stínovaný text, vržené stíny a zakulacené rohy, což jsou mimořádně užitečné funkcionality CSS3, které můžete implementovat do svých webových stránek s minimem úsilí.
19
Kapitola 7 – Gradienty a vícenásobná pozadí CSS3 Ruku na srdce – kdy jste naposledy pracovali na nějakém webu, který neobsahoval gradient nebo obrázek na pozadí? CSS3 poskytuje (pravda, trochu opožděnou) podporu vývojářům, kteří trávili až příliš mnoho času tím, že zápasili s Adobe Photoshopem, když se pokoušeli vytvořit perfektní gradienty nebo obrázky pro pozadí webové stránky a současně zajistit, aby výsledný soubor nebyl příliš velký. Nyní můžete specifikovat lineární nebo radiální gradient přímo ve svém kódu CSS a nepotřebujete k tomu žádné obrázky. Dále můžete prvkům na stránce přidělit libovolné množství obrázků na pozadí.
Kapitola 8 – Transformace a přechody CSS3 Ačkoliv animace byly dlouhodobě považovány za něco, co je zcela v kompetenci JavaScriptu, CSS3 nově umožňuje přenést něco z jejich zátěže na webový prohlížeč. Transformace umožňují otáčet, překlápět, kroutit a jinak deformovat prvky. Přechody umožňují přidat jistou nápaditost do jinak prudkých změn stavu, které běžně vídáme na webech. Kapitola je zakončena letmým pohledem do budoucna. I když u animací CSS založených na klíčových snímcích (keyframes) stále postrádáme podporu v dostatečně širokém měřítku, myslíme si, že budete rozhodně souhlasit, že jsou opravdu kouzelné.
Kapitola 9 – Vkládané fonty a vícesloupcové layouty Máte radši písmo Arial, nebo Verdana? Georgia, nebo Times? A co když nechcete ani jedno z nich? V této kapitole se podíváme, jak můžete překročit omezení "webově bezpečných fontů" z nedávné minulosti a vkládat libovolné fonty přímo do stránek, aby si je návštěvníci mohli stahovat společně s našimi stylovými předpisy a obrázky. Také se podíváme na novou slibnou funkcionalitu CSS, která umožňuje rozvrhnout obsah do několika sloupců, aniž bychom museli použít nějaké dodatečné značkování nebo tu hroznou vlastnost float.
Kapitola 10 – Geolokace, off-line webové aplikace a Web Storage Nejnovější generace webových prohlížečů je vybaveny širokým výběrem nových standardních API JavaScriptu. Ačkoliv mnohá z nich jsou specificky zaměřená na prohlížeče v mobilních zařízeních, mohou být prospěšné i pro uživatele stolních počítačů. V této kapitole se podrobněji podíváme na tři API, které jsou podle našeho názoru nejvíce vzrušující: geolokace, off-line webové aplikace a Web Storage. Stručně se zmíníme i o některých dalších API, která ale podrobně probírat nebudeme (protože mají buď nevalnou podporu, nebo omezené případy užití). Tato API ale naznačují směry, kterými byste se mohli v případě dalšího zájmu vydat.
Kapitola 11 – Canvas, SVG a Drag and Drop Závěrečnou kapitolu knihy věnujeme především dvěma do jisté míry soupeřícím technologiím pro kreslení a zobrazování grafiky. Nová v HTML5 je technologie Canvas, která poskytuje "plátno pro kreslení" a javascriptové API pro kreslení obrazců. Oproti tomu je technologie SVG k dispozici už mnoho let, teprve nyní ovšem dosáhla velmi dobré úrovně z hlediska podpory v prohlížečích, takže je to stále životaschopnější alternativa. Nakonec probereme jedno z dalších nových API JavaScriptu s názvem Drag and Drop (táhni a pusť), které poskytuje nativní rozhraní pro přetahovací akce.
Dodatek A – Knihovna Modernizr Klíčovou zbraní, která nesmí chybět za opaskem žádného superhrdiny HTML5, je Modernizr. Je to malá, ale velmi šikovná knihovna JavaScriptu, která detekuje podporu téměř všech funkcí HTML5 a CSS3 a umožňuje
20 selektivně stylovat web nebo aplikovat nouzové strategie. Rychlý úvodní kurz, jak používat Modernizr, jsme zařadili až do tohoto dodatku, přestože Modernizr používáme v průběhu celé knihy. Díky tomu ale máte stručnou referenční příručku k dispozici na jediném místě, takže v ostatních kapitolách se můžeme více soustředit na hlavní předmět našeho výkladu, kterým je HTML5 a CSS3.
Dodatek B – WAI-ARIA WAI-ARIA je samostatná specifikace, která se často jedním dechem zmiňuje společně s HTML5. Je to nejnovější sada nástrojů pomáhající zajistit, aby sofistikované webové aplikace byly přístupné i těm uživatelům, kteří používají nějakou asistenční technologii. I když je WAI-ARIA téma, které by rozhodně zasloužilo celou vlastní knihu, myslíme si, že bude prospěšné sem zařadit alespoň stručný přehled o tom, co je a co všechno umí, a samozřejmě uvést i několik odkazů, pokud byste se o ní chtěli dozvědět víc.
Dodatek C – Microdata Microdata je část specifikace HTML5, která se zabývá anotacemi ve značkování určenými pro stroje (strojově čitelné jmenovky). Ačkoliv stále ještě probíhá její vývoj, myslíme si, že už teď stojí za to ji ilustrovat na několika příkladech.
Kde hledat pomoc? Vydavatelství SitePoint má k dispozici velmi úspěšnou komunitu webových designérů a vývojářů, kteří vám mohou pomoci, pokud se dostanete do nějakých potíží. Občas také nahlédněte do seznamu s případnými opravami chyb v této knize (errata).
Fóra SitePointu Fóra SitePointu1 jsou diskusní fóra, na nichž můžete klást otázky o čemkoliv, co se nějak vztahuje k webovému vývoji a můžete samozřejmě odpovídat na i dotazy jiných. Toto je všeobecný princip diskusních fór: někteří lidé se ptají, jiní lidé jim odpovídají a většina lidí dělá oboje. Když sdílíte své znalosti, ostatní z nich mohou těžit a naopak. Tato diskusní fóra navíc sleduje mnoho zkušených webových designérů a vývojářů, kteří vám rádi pomohou, když se dostanete do nesnází. Je také dobré klást otázky, na které získáte rychle odpovědi, když se snažíte proniknout do nějaké nové problematiky související s webovým vývojem.
Webové stránky pro tuto knihu Webové stránky pro tuto knihu jsou umístěny na http://sitepoint.com/books/rw1/. Co zde naleznete?
Zdrojové kódy V průběhu práce s touto knihou se setkáte s mnoha odkazy na zdrojové kódy. Jedná se o ZIP archiv, který obsahuje veškerý zdrojový kód příkladů použitých v této knize. Pokud tedy nechcete přepisovat kódy ručně, rozhodně si jej stáhněte.2 Zdrojové kódy ke knize si můžete stáhnout i ze serveru vydavatelství Zoner Press (http://zonerpress.cz/download/html5-a-css3-pro-webove-designery.zip).
21 Aktualizace a errata Je všeobecně známo, že žádná kniha není perfektní, takže i v případě této knihy očekáváme, že pozorní čtenáři odhalí jednu či dvě chybičky, které jsme nedopatřením přehlédli. Na stránce s erraty3 naleznete informace o zjištěných typografických chybách nebo chybách v kódu.
Newslettery SitePointu Kromě knih, jako je tato, vydává SitePoint zdarma dostupné e-mailové newslettery. Abychom uvedli alespoň několik z nich, jedná se například o SitePoint Tech Times, SitePoint Tribune nebo SitePoint Design View. Dočtete se v nich o všelijakých žhavých novinkách a vydáních nových produktů. Nechybí články o různých trendech. Také v nich naleznete užitečné tipy a postupy pro všechny aspekty webového vývoje. Pokud máte zájem o jejich odebírání, můžete tak učinit na adrese http://www.sitepoint.com/newsletter/.
Podcast SitePointu Zapojte se do týmu SitePoint Podcast určeného webovým designérům a vývojářům se svými zprávami, rozhovory, výměnami názorů či zajímavými myšlenkami. Diskutujeme zde o nejnovějších tématech webového průmyslu, prezentujeme hostující řečníky a děláme zajímavé rozhovory s některými známými osobnostmi tohoto průmyslu. K nejnovějším podcastům se dostanete prostřednictvím iTunes nebo si je můžete přehrát přímo ve svém prohlížeči na adrese http://www.sitepoint.com/podcast/.
Konvence používané v této knize V knize používáme několik typografických stylů a stylů pro rozvržení, abyste mohli snadněji rozlišit různé druhy informací. Jedná se konkrétně o tyto prvky:
Příklady kódu Kód v knize zobrazujeme neproporcionálním písmem jako zde:
A Perfect Summer's Day
It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.
Pokud je kód k dispozici v archivu se zdrojovým kódy (http://zonerpress.cz/download/html5-a-css3-pro-webove-designery.zip), je nad výpisem uveden název příslušného souboru:
22 Pokud je zobrazena jen část daného souboru, je to indikováno slovem výňatek:
example.css (výňatek) border-top: 1px solid #333;
Pokud se do daného příkladu vkládá nějaký dodatečný kód, je tento nový kód zvýrazněn tučně: function animate() { new_variable = "Hello"; }
Pokud je někde potřebný kód, který byste už ale měli znát z kontextu, pro úsporu místa ho ve výpisu neopakujeme a nahrazujeme třemi tečkami: function animate() { ... return new_variable; }
Tipy, poznámky, upozornění a varování Následující prvky používáme pro všelijaké tipy, poznámky, upozornění nebo varování.
Hej, ty! Tipy připomínají užitečné drobnosti!
Ehm, promiňte … Poznámky jsou užitečné odbočky vztahující se probíranému tématu, nejsou ale kriticky důležité. Chápejte je spíše jako zajímavé informace navíc.
Nezapomeňte vždycky... … věnovat pozornost těmto důležitým bodům.
Pozor! Upozorněními zvýrazňujeme různá úskalí, na něž byste mohli narazit na své pouti.
63
KAPITOLA 4 HTML5 a formuláře V tuto chvíli víte prakticky všechno, co byste měli vědět o nových prvcích HTML5 a jejich sémantice. Než ovšem začneme pracovat na vzhledu našeho ukázkového webu (což budeme dělat v kapitole 6), udělejme rychlou odbočku od titulní stránky našich novin The HTML5 Herald a podívejme se na přihlašovací stránku, která dobře ilustruje, co všechno nabízí HTML5 v oblasti webových formulářů. HTML5 pro oblast webových formulářů představilo nové formulářové prvky, vstupní typy, atributy a další funkcionality. Mnohá užitečná vylepšení používáte ve svých rozhraních už léta – jmenujme například validaci formulářových údajů, zástupné texty a podobné věci. Rozdíl je v tom, že zatímco předtím jste se museli pro jejich vytvoření uchylovat k JavaScriptu, nyní jsou dostupné přímo v prohlížeči a nemusíte dělat nic víc, než ve svém značkování nastavit příhodný atribut. HTML5 nicméně nemyslí jenom na usnadnění práce vývojářů při vytváření formulářů. Je také lepší z hlediska koncových uživatelů. Protože validace na straně klienta je nativně zpracovávána samotným prohlížečem, bude vypadat konzistentněji napříč různými webovými stránkami a to ani nemluvíme o tom, že stránky se načtou rychleji, když nebudou obsahovat všechen ten JavaScript pro validační funkcionalitu. Pojďme s chutí na to!
Kód formuláře pro The HTML5 Herald Formuláře jsou často tím posledním, co vývojáři zařazují do svých stránek. Je to kvůli tomu, že mnozí z nich považují formuláře za příšerně otravné a nudné. Dobrá zpráva je, že HTML5 vstřikuje trochu šťávy do kódování formulářů, takže by se mělo jednat o větší zábavu. Doufáme, že po přečtení této kapitoly se začnete nedočkavě těšit, až budete moci svého značkování zařazovat patřičné formulářové prvky. Kód našeho vzorového formuláře (se základními HTML značkami) pro projekt The HTML5 Herald vypadá takto:
Soubor register.html (výňatek)
HTML5 a CSS3 pro webové designéry
65
Jak už jsme napsali dříve, tento ukázkový registrační formulář používá formulářové prvky, které máme k dispozici už od nejranějších verzí HTML. Formulář uživateli napovídá (prostřednictvím prvků label a p), jaký typ dat očekává v jednotlivých polích, takže i když vaši uživatelé používají Netscape 4.7 nebo IE5 (to měl být vtip!), formuláři porozumí a snad ho i dobře vyplní. Funguje, ale rozhodně se dá vylepšit. V této kapitole vylepšíme tento formulář tím, že do něj doplníme funkcionalitu HTML5. Standard HTML5 například poskytuje nové vstupní typy, například pro e-mailové adresy, URL, čísla, datum a další. Kromě těchto nových vstupních typů HTML5 představuje i atributy, které se mohou používat jak s novými, tak i existujícími vstupními typy. Umožňují například dodat zástupný text, označit některá pole za povinná, nebo deklarovat, jaký typ dat je akceptovatelný – a to všechno bez JavaScriptu. Všechny nově přidané vstupní typy probereme v této kapitole později. Než tak ale učiníme, podíváme se na nové atributy, které HTML5 poskytuje pro formuláře.
Atributy pro HTML5 formuláře Pokud chtěli vývojáři na straně klienta ověřovat platnost vstupních dat (například zdali uživatel vyplnil povinné položky formuláře, zdali použil správný typ dat atd.), museli si k tomu napsat vlastní skript, který by tyto kontroly prováděl. HTML5 ovšem obsahuje několik atributů, které umožňující stanovit, jaká hodnota je přijatelná, a informovat uživatele o chybách. A to bez toho, abyste museli pracovat s JavaScriptem. Prohlížeče, které podporují tyto atributy HTML5, budou porovnávat údaje zadané uživatelem na základě regulárních výrazů dodaných tvůrcem stránky. Poté zkontrolují, zda jsou všechna povinná pole opravdu vyplněná, zpřístupní výběr dalších hodnot, pokud je to povoleno atd. Ještě lepší na tom všem je, že použitím těchto atributů nijak neublížíte starším prohlížečům – ty budou prostě ignorovat atributy, jimž nerozumějí. Ve skutečnosti dokonce můžete tyto atributy a jejich hodnoty používat pro svá nouzová skriptovací řešení, nemusíte explicitně kódovat validační vzory ve svém kódu JavaScriptu, ani přidávat do značkování nadbytečné třídy. Na to, jak se dělá tohle, se podíváme později, protože nejprve musíme probrat jednotlivé nové atributy.
Atribut required Booleovský atribut required říká prohlížeči, aby odeslal formulář jen tehdy, pokud je dané pole správně vyplněno. Je evidentní, že to znamená, že pole nesmí zůstat prázdné, nicméně to také znamená (v závislosti na dalších atributech tohoto pole nebo jeho typu), že jsou akceptovatelné jen určité typy hodnot. Později v této kapitole probereme různé způsoby umožňující dát vědět prohlížeči, jaký druh dat má ve formuláři očekávat. Je-li pole s atributem required ponecháno prázdné, nebo je neplatné, formulář se neodešle a focus získá první neplatný formulářový prvek. Prohlížeče Opera, Firefox a Chrome poskytují uživateli chybové zprávy ve stylu "Please fill out this field" (Vyplňte prosím toto pole) nebo " You have to specify a value" (Musíte specifikovat hodnotu), pokud se povinné pole ponechá prázdné a zprávu "Please enter an email address" (Vložte prosím platnou e-mailovou adresu) nebo "xyz is not in the format this page requires" (xyz není ve formátu, který stránka požaduje), když je zadaný údaj nesprávného datového typu nebo nevyhovuje specifikovanému vzoru. Atribut required je možné nastavit u všech vstupních typů s výjimkou button, range, color a hidden (všechny tyto vstupní typy obecně mají nějakou výchozí hodnotu). Podobně jako u jiných booleovských atributů, s nimiž jste se doposud setkali, je jeho syntaxe buď prostě required, nebo v případě použití XHTML required="required".
Kapitola 4 – HTML5 a formuláře
66
Focus? Toto je vhodná chvíle na osvěžení vědomostí: prvek formuláře získá focus (někdy se říká, že je aktivní) tehdy, když uživatel klikne kurzorem myši na tento prvek formuláře nebo se na toto pole dostane s klávesou tab. U prvků input se při následném psaní na klávesnici zadávají data do tohoto prvku. V terminologii JavaScriptu se událost focus odpálí na prvku formuláře tehdy, když získává focus, a událost blur, když focus ztratí. V CSS lze prvky, které mají focus, stylovat pseudotřídou :focus.
Přidejme nyní atribut required do našeho přihlašovacího formuláře. Za povinné položky prohlásíme jméno, e-mailovou adresu, heslo a datum, od kdy chcete zahájit své předplatné:
register.html (výňatek)
aria-required="true"
aria-required="true"
(at least 6 characters, no spaces)
aria-required="true"
aria-required="true"
Povšimněte si, že vždy, když jsme použili atribut required, přidali jsme i atribut aria-required="true", který slouží pro vylepšení přístupnosti. Ačkoliv mnoho čtenářů obrazovky (screen readers) stále postrádá podporu pro nové atributy HTML5, mnohá tato zařízení podporují role WAI-ARIA, takže existuje jistá šance, že přidáním této role budou schopny dát uživateli na vědomí, že je dané pole povinné. Stručný úvod do této problematiky naleznete v příloze B. Efekt atributu required poté, co se pokusíte formulář odeslat nevyplněný, vidíte na obrázcích 4.1, 4.2 a 4.3.
Obrázek 4.1. Validační zpráva pro povinné pole v prohlížeči Firefox 4.
Obrázek 4.2. Takhle vypadá v prohlížeči Opera.
Obrázek 4.3. A tohle je Google Chrome.
Kapitola 4 – HTML5 a formuláře
68
Stylování povinných formulářových polí Formulářové prvky, které jsou označeny jako povinné, můžete ostylovat pomocí pseudotřídy :required. Dále je možné ostylovat pole, která obsahují platné nebo neplatné hodnoty prostřednictvím pseudotříd :valid a :invalid. S využitím těchto pseudotříd a pár kouzel CSS dokážete poskytnout vizuální vodítka vidomým uživatelům, protože jim dáte najevo, která pole jsou povinná, a současně jim poskytnete i nesmírně cennou zpětnou vazbu, zda se jim podařilo pole vyplnit úspěšně: input:required { background-image: url('../images/required.png'); } input:focus:invalid { background-image: url('../images/invalid.png'); } input:focus:valid { background-image: url('../images/valid.png'); }
Pro povinná pole formuláře zde přidáváme na obrázek v pozadí, což je obligátní hvězdička. Další obrázky na pozadí jsou určeny pro správně a nesprávně vyplněná vstupní pole. Změna se ovšem projeví pouze tehdy, pokud dané pole formuláře získá focus, aby se formulář nestal příliš nepřehledným.
Pozor na výchozí styly Připomínáme, že Firefox 4 aplikuje na neplatné prvky formuláře své vlastní stylování (červený stín), viz obrázek 4.1 uvedený výše. Nativní vržený stín můžete odstranit prostřednictvím tohoto CSS: :invalid { box-shadow: none; }
Zpětná kompatibilita Ačkoliv starší prohlížeče s největší pravděpodobností nebudou podporovat pseudotřídu :required, s využitím selektoru atributu je přesto možné poskytnout žádané styly: input:required, input[required] { background-image: url('../images/required.png'); }
Tento atribut můžete i využít jako tzv. hák (hook), na který zavěsíte validaci formuláře pro webové prohlížeče, které nepodporují HTML5. Váš kód JavaScriptu může u prázdných polí zkontrolovat, zda je přítomen atribut required, a odmítnout odeslání formuláře, pokud nějaké takové pole najde.
147
KAPITOLA 8 Transformace a přechody CSS3 Naše stránka je dost statická. Vlastně je zcela statická. V kapitole 4 jste se dozvěděli něco málo o tom, jak lze prostřednictvím pseudotříd :invalid a :valid měnit vzhled formuláře na základě jeho stavu. Co kdybychom ale skutečně chtěli něco někam přemístit? A co když chceme změnit vzhled prvků – třeba je otočit nebo zkosit? Celá léta se weboví designéři spoléhali na JavaScript, pokud chtěli mít ve stránce nějaké animace, přičemž jediný způsob, kterým bylo možné zobrazit text v nějakém úhlu, bylo použít obrázek. To mělo k ideálu hodně daleko. V CSS3 je to ale jinak. Jeho prostřednictvím můžete prvky snadno naklánět, měnit jim měřítko, přesouvat je nebo dokonce je překlápět. A to všechno bez JavaScriptu nebo dodatečných obrázků. Pojďte se podívat, jak se to dělá.
Transformace Vlastnost transform z CSS3, kterou podporuje Firefox 3.5+, Opera 10.5, WebKit od verze 3.2 (Chrome 1) a dokonce i Internet Explorer 9, umožňuje posunout, natočit, zkosit nebo změnit měřítko libovolného prvku na stránce. I když některé z těchto efektů bylo možné udělat s využitím již dříve existujících funkcionalit CSS (jako bylo relativní a absolutní pozicování), CSS3 vám poskytuje bezprecedentní kontrolu nad mnoha dalšími aspekty vzhledu prvku. Se vzhledem prvku manipulujeme pomocí transformačních funkcí. Hodnota vlastnosti transform je jedna nebo více transformačních funkcí oddělovaných mezerami, které se budou aplikovat v tom pořadí, v jakém jsou uvedeny. V této knize probereme všechny dvourozměrné transformační funkce. Ačkoliv jádro WebKit podporuje i transformace prvků v trojrozměrném prostoru – tzv. 3D transformace – toto téma dalece přesahuje zaměření této knihy. Pro ilustraci toho, jakým způsobem transformace fungují a jak se používají, budeme pracovat s dalším reklamním blokem z novin The HTML5 Herald, viz obrázek 8.1.
148
Kapitola 8 – Transformace a přechody CSS3
Obrázek 8.1. Tento reklamní blok využijeme k předvádění CSS3 transformací.
Posun prvku Posouvací funkce umožňují přesouvat prvky doleva, doprava, nahoru nebo dolů. Tyto funkce mají obdobné chování jako deklarace position: relative, kde deklarujete top a left. Když použijete nějakou posouvací funkci, přesouváte prvky, aniž by to mělo nějaký dopad na tok dokumentu. Na rozdíl od position: relative je možné pozicovat prvek oproti jeho aktuální pozici, rodiči nebo jinému předkovi. Prvek může byt posunut pouze relativně vzhledem k jeho aktuální pozici. Funkce translate(x,y) posune prvek o x zleva a o y shora: -webkit-transform: translate(45px,-45px); -moz-transform: translate(45px,-45px); -ms-transform: translate(45px,-45px); -o-transform: translate(45px,-45px); transform: translate(45px,-45px);
Chcete-li prvek posunout pouze svisle nebo pouze vodorovně, použijte translatex nebo translatey: -webkit-transform: translatex(45px); -moz-transform: translatex(45px); -ms-transform: translatex(45px); -o-transform: translatex(45px); transform: translatex(45px); -webkit-transform: translatey(-45px); -moz-transform: translatey(-45px); -ms-transform: translatey(-45px); -o-transform: translatey(-45px); transform: translatey(-45px);
Předpokládejme, že v naší reklamě chceme přesunout slovo "dukes" (zaťaté pěsti) doprava, když na něj uživatel najede kurzorem myši. Ve značkování máme toto:
Put your <span>dukes up sire
Požadovaný efekt vytvoříme tak, aby se projevil vždy, když se najede kurzorem myši na h1. Díky tomu bude pravděpodobnější, že uživatel tento efekt najde, než kdyby se spouštěl pouze při najetí kurzorem myši na slovo "dukes", které je obklopeno v prvku span.
Efekt bude funkční ve většině prohlížečů, s výjimkou prohlížečů založených na WebKitu. Proč? Jádro WebKit totiž povoluje pouze transformace blokových prvků – řádkové (inline) prvky jsou mimo. Tohle lze ovšem snadno napravit přidáním display: inline-block k prvku span.
Obrázek 8.2. Výsledek naší první transformace. Pěkné! Pojďme to ještě vylepšit a ukažme si, jak změnou měřítka zařídíme, aby se text zároveň zvětšil.
Změna velikosti Funkce scale(x,y) slouží ke změně velikosti prvku ve vodorovném a svislém směru podle nadefinovaných parametrů. Je-li uvedena pouze jedna hodnota, použije se pro x i y. Například scale(1) ponechá prvek v původní velikosti, scale(2) zdvojnásobí jeho rozměry, scale(0.5) je zmenší na polovinu atd. Když uvedete dvě různé hodnoty, prvek se zdeformuje, přesně podle očekávání: -webkit-transform: scale(1.5,0.25);
Podobně jako tomu bylo u funkce translate, i zde používáme funkce s názvy scalex(x) nebo scaley(y). Mění pouze vodorovné, resp. svislé rozměry. Znamenají totéž co scale(x,1), resp. scale(1,y). Prvek, jemuž jste změnili rozměry, se buď zvětšuje směrem ven od svého středu, nebo se zmenšuje dovnitř ke svému středu. Jinak řečeno, když se mění rozměry prvku, střed prvku zůstává vždy na stejném místě. Chcete-li změnit toto výchozí chování, můžete zařadit vlastnost transform-origin, kterou probereme za chvíli. Přidejme teď našemu prvku span transformaci scale:
Povšimněte si, že není potřeba deklarovat novou transformaci – novou transformační funkci jednoduše přidáte do již existující deklarace a oddělíte mezerou. Stojí za to si také zapamatovat, že změna velikosti prostřednictvím scale (podobně jako posun) nemá žádný dopad na tok dokumentu. To znamená, že pokud změníte velikost textu, například ho zvětšíte, okolní text se neodsune a neudělá mu místo. Obrázek 8.3 ukazuje, jaké potíže to může způsobovat. V případech, jako je tento, zkuste spíše pouvažovat, zdali by místo transformace velikosti nebylo lepší patřičně upravit výšku nebo šířku prvku nebo eventuálně změnit velikost písma (nicméně si uvědomte, že tyto vlastnosti ovlivňují prostor, který prohlížeč pro prvek alokuje).
Obrázek 8.3. Aplikujete-li funkci scale na inline text, může to mít nežádoucí výsledky. V našem příkladu ovšem chceme, aby text v reklamě svým zvětšením upoutal pozornost, přičemž nechceme měnit tok okolního textu, takže transformace pro změnu velikosti dělá přesně to, co zde potřebujeme udělat. Obrázek 8.4 (na protější stránce knihy) ukazuje, jak to vypadá, když uživatel najede kurzorem myši na reklamu poté, co jsme k již existujícímu posunu (translateX) přidali transformační funkci scale. Vypadá to dobře, ale stále se dá leccos přidat.
HTML5 a CSS3 pro webové designéry
151
Obrázek 8.4. Dva transformační efekty současně – posun a změna velikosti.
Rotace Funkce rotate() otočí daný prvek kolem bodu počátku (standardně se jedná o střed prvku, jako tomu bylo u u scale) o specifikovaný úhel. Úhly se obvykle deklarují ve stupních. Kladné hodnoty znamenají otáčení po směru hodinových ručiček, záporné pak proti směru hodinových ručiček. Kromě stupňů lze hodnoty zadávat v gradech, radiánech nebo otočkách – my zde vystačíme se stupni. Přidejme ke slovu "dukes" ještě transformaci rotate: #ad3 h1:hover span { color: #484848; -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); -moz-transform:rotate(10deg) translateX(40px) scale(1.5); -ms-transform:rotate(10deg) translateX(40px) scale(1.5); -o-transform:rotate(10deg) translateX(40px) scale(1.5); transform:rotate(10deg) translateX(40px) scale(1.5); }
Prostřednictvím tohoto pravidla definice natočíme span o deset stupňů po směru hodinových ručiček – přidáváme tím efekt, který vyjadřuje, že text právě dostal od boxera děsnou ránu pěstí, až se zakymácel. Rotaci deklarujeme před translate, aby se aplikovala jako první – zapamatujte si, že transformace se aplikují v tom pořadí, v jakém jsou uvedeny. Někdy na pořadí nezáleží, jindy ale ano, takže pokud je efekt vašich transformací jiný, než jste původně očekávali, možná postačí upravit pořadí nadefinovaných transformací. Finální transformovaný text vidíte na obrázku 8.5.
Obrázek 8.5. Text jsme posunuli, změnili mu velikost a ještě ho natočili – to je pořádná rána.
152
Kapitola 8 – Transformace a přechody CSS3
Existuje ovšem ještě jeden typ transformace, kterou ještě poctíme svou návštěvou. Ačkoliv v našich novinách The HTML5 Herald tuto transformaci nepoužíváme, přesto vám ji předvedeme.
Zešikmení Funkce skew(x,y) specifikuje zešikmení podle osy X a osy Y. Jak asi předpokládáte, x specifikuje zešikmení na ose X, y pak zešikmení na ose Y. Není-li uveden druhý parametr, k zešikmení dojde pouze na ose X: -webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);
Pokud bychom styly uvedené výše aplikovali na nějaký nadpis, jeho zešikmená podoba by mohla vypadat jako na obrázku 8.6.
Obrázek 8.6. Text, na který jsme aplikovali transformaci skew. Podobně jako tomu bylo u tranformací translate a scale, i v tomto případě existují transformace, které jsou specifické pro jednotlivé osy. Jak jste asi uhodnuli, jedná se o skewx() a skewy().
Změna počátku transformace V jednom příkladu výše jsme už naznačili, že máte kontrolu nad počátkem, od něhož se odvíjejí transformace. Slouží k tomu vlastnost transform-origin, která má stejnou syntaxi jako background-position. Výchozí je střed objektu, takže změny velikosti a rotace se standardně dějí kolem středu boxu. Předpokládejme, že chcete transformovat kružnici. Protože výchozím nastavení transform-origin je střed kružnice, transformace rotate nebude mít na kružnici žádný viditelný účinek. Kružnice otočená o 90 stupňů vypadá přesně stejně jako původní nenatočená kružnice. Když ovšem pro tuto kružnici specifikujete vlastnost transform-origin s hodnotami 10% 10%, povšimnete si už zřetelného natočení kružnice. Efekt můžete vidět na obrázku 8.7.
Obrázek 8.7. Rotace kružnice je viditelná jen tehdy, pokud změníme počátek transformace.
HTML5 a CSS3 pro webové designéry
153
Vlastnost transform-origin se podporuje s prefixy výrobce v prohlížečích WebKit, Firefox a Opera: -webkit-transform-origin: 10% 10%; -moz-transform-origin: 10% 10%; -o-transform-origin: 10% 10%; transform-origin: 10% 10%;
Podpora transformací pro IE8 a dřívější Protože transformace CSS nejsou podporovány v IE6, IE7 a IE8, můžete tyto efekty napodobit jinými vlastnostmi CSS, včetně filtrů. Pro "posun" použijte position: relative s hodnotami top a left: .translate { position: relative; top: 200px; left: 200px; }
Velikost prvku je možné změnit úpravou jeho šířky (vlastnost width) a výšky (vlastnost height). Zapamatujte si ovšem, že zatímco transformované prvky pořád zabírají na stránce stejný prostor, jaký zabíraly před transformací změny velikosti, když změníte jejich šířku a výšku pomocí width a height, změníte tím i velikost prostoru, který prohlížeč alokoval pro prvek, což může mít vliv na layout webu jako takový. V Internet Exploreru můžete k rotaci dokonce použít filtry, je to ale dost ošklivé: .rotate { transform: rotate(15deg); filter: progid:DXImageTransform.Microsoft.Matrix( sizingMethod='auto expand', M11=0.9659258262890683, M12=-0.25881904510252074, M21=0.25881904510252074, M22=0.9659258262890683); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix( M11=0.9659258262890683, M12=-0.25881904510252074, M21=0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand')"; zoom: 1; }
Myslíme si, že nemá cenu se pouštět do podrobnějšího výkladu syntaxe tohoto filtru pro rotace. Pokud chcete otáčet prvky i v Internet Exploreru, navštivte stránku http://css3please.com/, která podle vašich požadavků vytvoří kód pro požadovanou rotaci, která bude fungovat napříč prohlížeči. Prostě editujte jednu z hodnot pro CSS funkci rotate a ostatní části kódu pro ostatní prohlížeče se už aktualizují automaticky.
Přechody Přechody (transitions) umožňují, aby se hodnoty CSS vlastností průběžně měnily v čase, což umožňuje vytvářet jednoduché animace. Pokud má například odkaz měnit barvu, když na něj uživatel najede kurzorem
Alexis Goldsteinová, Louis Lazaris, Estelle Weylová
HTML5 a CSS3 PRO WEBOVÉ DESIGNÉRY
Kniha HTML5 a CSS3 pro webové designéry (v originále HTML5 & CSS3 for the Real World) je praktickým zdrojem informací o nejnovější generaci technologií webového vývoje. V prvních kapitolách 1–5 se dozvíte vše důležité o HTML5 – od nezbytného úvodního představení tohoto nového standardu a detailního popisu všech nových značek přes záležitosti týkající se sémantiky až k novinkám v oblasti webových formulářů a práce s multimédii (nové prvky
