HTML5 a CSS3 pro webové designéry by Zoner Press

E N C Y K L O P E D I E

W E B D E S I G N E R A

HTML5 a CSS3 pro webové designéry

Alexis Goldsteinová Louis Lazaris Estelle Weylová

HTML5 a CSS3 pro webové designéry

Alexis Goldsteinová, Louis Lazaris a Estelle Weylová

HTML5 & CSS3 for the Real World Alexis Goldstein, Louis Lazaris a Estelle Weyl © 2011, ZONER software, a.s. Authorized Czech translation of the English edition of HTML5 & CSS3 for The Real World, First Edition, ISBN 9780980846904 © 2011 SitePoint Pty. Ltd. This translation is published and sold by permision of O'Reilly Media, Inc., the owner of all rights to publish and sell the same. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from O'Reilly Media Inc. © 2011, ZONER software, a.s. Autorizovaný překlad originálního anglického vydání knihy HTML5 & CSS3 for The Real World, First Edition, ISBN 9780980846904 © 2011 SitePoint Pty. Ltd. Překlad je vydán a prodáván s výslovným svolením O'Reilly Media Inc., vlastníkem veškerých práv na vydání i prodej tohoto titulu. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení O'Reilly Media Inc.

HTML5 a CSS3 pro webové designéry Autor: Alexis Goldsteinová, Louis Lazaris a Estelle Weylová Copyright © ZONER software, a.s. Vydání první, v roce 2011. Všechna práva vyhrazena. Zoner Press Katalogové číslo: ZR1136 ZONER software, a.s. Nové sady 18, 602 00 Brno Překlad: RNDr. Jan Pokorný Odpovědný redaktor: Miroslav Kučera Šéfredaktor: Ing. Pavel Kristián DTP: Miroslav Kučera a Dan Zůda Obálka: Dan Zůda a Lenka Křížová (fotografie použitá na obálce © iStockphoto; #17509017) Zdrojové soubory ke stažení: http://zonerpress.cz/download/html5-a-css3-pro-webove-designery.zip

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: knihy@zoner.cz www.zonerpress.cz

ISBN: 978-80-7413-166-0

Stručný obsah Kapitola 1

Úvod do HTML5 a CSS3

Kapitola 2

Značkování ve stylu HTML5

Kapitola 3

Více sémantiky v HTML5

Kapitola 4

HTML5 a formuláře

Kapitola 5

HTML5 audio a video

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

Podrobný obsah O tvůrcích knihy

Alexis Goldsteinová

Louis Lazaris

Estelle Weylová

Odborný recenzent

Vydavatelství SitePoint

Poděkování

Předmluva

Úvod

Komu je tato kniha určena?

Co naleznete v této knize?

Kde hledat pomoc?

Newslettery SitePointu

Podcast SitePointu

Konvence používané v této knize

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?

Co je CSS3?

Proč bychom se měli zabývat CSS3?

Co rozumíme slovy "skutečný svět"?

Rozmanitost prohlížečů na trhu

Rostoucí mobilní trh

Jak je to v realitě

Kapitola 2

Značkování ve stylu HTML5

Představujeme "The HTML5 Herald"

Základní šablona HTML5

Deklarace doctype

6 Prvek html

Prvek head

Nastolení stejných podmínek

Zbytek je historie

Často kladené otázky k HTML5

Jak to, že HTML5 nemá problém se staršími prohlížeči?

Neměly by být všechny značky uzavřeny?

Je syntaxe HTML5 odlišná od syntaxe XHTML?

Prvky pro definici struktury stránky

Prvek header

Prvek section

Prvek article

Prvek nav

Prvek aside

Prvek footer

Vytvoření struktury pro "The HTML5 Herald"

Shrnutí

Kapitola 3

Více sémantiky v HTML5

Nový pohled na typy obsahu

Osnova dokumentu

Hlavní titulky pro The HTML5 Herald Prvek hgroup Další nové prvky a funkcionality HTML5

52 52 54

Prvky figure a figcaption

Prvek mark

Prvky progress a meter

Prvek time

Prvek details

Přizpůsobené uspořádané seznamy

Styly jen pro daný obor

Atribut async pro skripty

Změny již existujících prvků

Slovo "zavržený" bylo zavrženo

Blokové prvky uvnitř odkazů

Tučný text

Text kurzívou

7 Velký a malý text

Prvek cite

Seznamy popisů (nikoli definic)

Validace XHTML vs HTML5

Shrnutí

Kapitola 4

HTML5 a formuláře

Kód formuláře pro The HTML5 Herald

Atributy pro HTML5 formuláře

Atribut required

Atribut placeholder

Atribut pattern

Atribut disabled

Atribut readonly

Atribut multiple

Atribut form

Atribut autocomplete

Prvek datalist a atribut list

Atribut autofocus Nové formulářové vstupní typy v HTML5 Vstupní typ search

74 75 76

E-mailové adresy

Adresy URL

Telefonní čísla

Čísla

Rozsahy

Barvy

Datum a čas

Ostatní formulářové prvky v HTML5

Prvek output

Prvek keygen

Změny v existujících prvcích a atributech pro formuláře

Prvek form

Prvek optgroup

Prvek textarea

Shrnutí

8 Kapitola 5

HTML5 audio a video

Stručný výlet do minulosti

Současný stav přehrávání

Formáty kontejneru videa

Kodeky videa

Kodeky audia

Které kombinace fungují v současných prohlížečích?

Značkování pro video

Zobrazení nativních ovládacích prvků

Atribut autoplay

Atribut loop

Atribut preload

Atribut poster

Atribut audio

Podpora pro několik formátů videa

Pořadí prvků source

A co Internet Explorer 6 až 8?

Typy MIME

Kódování souborů videa pro použití na webu

Vytváření vlastních ovládacích prvků

Něco značkování a stylování pro začátek

Úvod do API mediálních prvků

Přehrávání a pozastavování videa

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

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

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/.

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á

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.

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í.

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).

1 2

http://www.sitepoint.com/forums/ http://www.sitepoint.com/books/rw1/code.php

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: <h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>

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:

example.css .footer { background-color: #CCC; border-top: 1px solid #333; }

http://www.sitepoint.com/books/rw1/errata.php

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.

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) <form id="register" method="post">

Kapitola 4 – HTML5 a formuláře

64 <hgroup>

<h1>Sign Me Up!</h1> <h2>I would like to receive your fine publication.</h2> </hgroup> <ul> <li> <label for="register-name">My name is:</label> <input type="text" id="register-name" name="name"> </li> <li> <label for="address">My email address is:</label> <input type="text" id="address" name="address"> </li> <li> <label for="url">My website is located at:</label> <input type="text" id="url" name="url"> </li> <li> <label for="password">I would like my password to be:</label> <p>(at least 6 characters, no spaces)</p> <input type="password" id="password" name="password"> </li> <li> <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label> <input type="text" name="rating" id=rating"> </li> <li> <label for="startdate">Please start my subscription on:</label> <input type="text" id="startdate" name="startdate"> </li> <li> <label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> copies of <cite> The HTML5 Herald</cite>.</label> </li> <li> <label for="upsell">Also sign me up for <cite>The CSS3 Chronicle</cite></label> <input type="checkbox" id="upsell" name="upsell"> </li> <li> <input type="submit" id="register-submit" value="Send Post Haste"> </li> </ul> </form>

HTML5 a CSS3 pro webové designéry

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

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) <ul> <li> <label for="register-name">My name is:</label> <input type="text" id="register-name" name="name" required aria-required="true"> aria-required="true" </li> <li> <label for="email">My email address is:</label> aria-required="true" <input type="text" id="email" name="email" required aria-required="true"> </li> <li> <label for="url">My website is located at:</label> <input type="text" id="url" name="url"> </li> <li> <label for="password">I would like my password to be:</label> <p>(at least 6 characters, no spaces)</p> <input type="password" id="password" name="password" required aria-required="true"> aria-required="true" </li> <li> <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label> <input type="text" name="rating" type="range"> </li> <li> <label for="startdate">Please start my subscription on: </label> <input type="text" id="startdate" name="startdate" required aria-required="true"> aria-required="true" </li> <li> <label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> copies of <cite> The HTML5 Herald</cite>

HTML5 a CSS3 pro webové designéry

</label> </li> <li> <label for="upsell">Also sign me up for <cite>The CSS3 Chronicle</cite></label> <input type="checkbox" id="upsell" name="upsell"> </li> <li> <input type="submit" id="register-submit" value="Send Post Haste"> </li> </ul>

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

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: <h1>Put your <span>dukes</span> up sire</h1>

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.

HTML5 a CSS3 pro webové designéry

149

css/styles.css (výňatek) #ad3 h1:hover span { color: #484848; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform:translateX(40px); transform: translateX(40px); }

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.

css/styles.css (výňatek) #ad3 h1 span { font-size: 30px; color: #999999; display:inline-block; ...

Výsledek vidíte na obrázku 8.2.

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);

150

Kapitola 8 – Transformace a přechody CSS3

-moz-transform: scale(1.5,0.25); -ms-transform: scale(1.5,0.25); -o-transform: scale(1.5,0.25); 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:

css/styles.css (výňatek) #ad3 h1:hover span { color: #484848; scale(1.5) -webkit-transform: translateX(40px) scale(1.5); scale(1.5); -moz-transform: translateX(40px) scale(1.5) scale(1.5); -ms-transform: translateX(40px) scale(1.5) -o-transform: translateX(40px) scale(1.5) scale(1.5); scale(1.5); transform: translateX(40px) scale(1.5) }

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 <audio> a <video>; této problematice je věnována samostatná publikace z produkce Zoner Press: HTML5 – audio a video, kompletní průvodce).

ZONER software, a.s. významný producent softwaru v oblasti digitální fotogra¿e, poþítaþové gra¿ky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Následující kapitoly 6–9 se věnují blízkému příbuznému HTML5, kterým není nic jiného než CSS3. Projížďka pro CSS3 začíná nezbytným úvodem, v němž se mj. popisují nové selektory či vlastnosti umožňující implementovat stínovaný text, vržené stíny nebo zakulacené rohy. Kniha se samozřejmě věnuje i dalším funkcionalitám v CSS3, což jsou například gradienty, vícenásobná pozadí, transformace, vkládané fonty, přechody nebo vícesloupcové layouty. Poslední dvě kapitoly opouštějí oblast HTML5 a CSS3 a věnují se trochu pokročilejším (a stále velmi užitečným) záležitostem, jako je geolokace, off-line webové aplikace, Web Storage, Canvas, SVG či Drag and Drop. Tři dodatky na konci knihy zahrnují informace o knihovně Modernizr, specifikaci WAI-ARIA a specifikaci Microdata. x Vkládané fonty a vícesloupcové layouty x Geolokace, offline webové aplikace a Web Storage x Canvas, SVG a Drag and Drop x Knihovna Modernizr x WAI-ARIA x Microdata

Zdrojové soubory ke stažení www.zonerpress.cz/download/html5-a-css3-pro-webove-designery.zip

E N C Y K LO P E D I E

W E B D E S I G N E R A

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na vydavatelský plán a výhody, které můžete získat, se informujte na adrese vydavatelství.

Zoner Press tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz ZONER software, a.s., Nové sady 18, 602 00 Brno

Seznam kapitol x Úvod do HTML5 a CSS3 x Značkování ve stylu HTML5 x Více sémantiky v HTML5 x HTML5 a formuláře x HTML5 audio a video x Úvod do CSS3 x Gradienty a vícenásobná pozadí CSS3 x Transformace a přechody CSS3

DOPORUČENÁ CENA: 369 KČ KATALOGOVÉ ČÍSLO: ZR1136

ISBN 978-80-7413-166-0

9 7 8 8 0 7 4 1 3 1 6 6 0