CSS. filtry, hacky a pokročilé postupy. Andy Budd ve spolupráci s Cameronem Mollem a Simonem Collisonem

Transkript

1 CSS filtry, hacky a pokročilé postupy Andy Budd ve spolupráci s Cameronem Mollem a Simonem Collisonem

2 CSS Mastery: Advanced Web Standards Solutions Andy Budd, Cameron Moll, Simon Collison Original English language edition published Apress L.P., 2560 Ninth Street, Suite 219, Berkeley, CA USA. Copyright 2005 by Apress L.P. Czech language edition copyright 2007 by ZONER software, s.r.o. All rights reserved. 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 Apress L.P. Originální anglické vydání vydal Apress L.P., 2560 Ninth Street, Suite 219, Berkeley, CA USA. Copyright 2005 Apress L.P. České vydání vydal ZONER software, s.r.o., copyright Všechna práva vyhrazena. Žá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í Apress L.P. CSS filtry, hacky a pokročilé postupy Autoři: Andy Budd, Cameron Moll, Simon Collison Copyright ZONER software, s.r.o. Vydání první v roce Všechna práva vyhrazena. Zoner Press Katalogové číslo: ZR616 ZONER software, s.r.o. Nové sady 18, Brno Překlad: Jan Gregor Odpovědný redaktor: Miroslav Kučera Šéfredaktor: Ing. Pavel Kristián DTP: Miroslav Kučera Cover foto: Jiří Heller, HELLER.CZ s.r.o, 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, s.r.o. Nové sady 18, Brno tel.: , fax: knihy@zoner.cz ISBN

3 Stručný obsah 3 Kapitola 1 Položení základů 17 Kapitola 2 Shrnutí vizuálního formátovacího modelu 43 Kapitola 3 Obrázky na pozadí a nahrazování obrázků 61 Kapitola 4 Stylování odkazů 87 Kapitola 5 Stylování seznamů a vytváření navigačních lišt 103 Kapitola 6 Stylování formulářů a datových tabulek 129 Kapitola 7 Layout 151 Kapitola 8 Hacky a filtry 173 Kapitola 9 Chyby a jejich opravy 187 Případová studie 1 Více než čmáranice 205 Případová studie 2 Web Tuscany luxury resorts 235

4 Mé nádherné přítelkyni Melanie, za všechnu její lásku a podporu za posledních 9 měsíců. Andy Budd Mámě, tátovi, Emmě, společnosti Agenzia, děkuji za vaši podporu. Simon Collinson

5 5 Podrobný obsah Předmluva 11 O autorech 12 Úvod 14 Komu je tato kniha určena? 15 Jak je tato kniha uspořádána? 15 Obecné zásady použité v této knize 16 Zdrojové soubory 16 Kapitola 1 Položení základů 17 Strukturování kódu 18 Používejte účelné značkování 18 Typy dokumentů, přepínač DOCTYPE a režimy prohlížečů 24 Aby vaše styly udeřily do správného místa 27 Běžné selektory 27 Univerzální selektory 29 Pokročilé selektory 29 Kaskáda a specifičnost 32 Dědičnost 35 Plánování, organizace a údržba stylových předpisů 36 Použití stylů v dokumentu 36 Komentování kódu 37 Průvodce styly 40 Uspořádání stylových předpisů pro snadnější údržbu 41 Shrnutí 42 Kapitola 2 Shrnutí vizuálního formátovacího modelu 43 Základní informace o modelu boxu 43 Model boxu v IE pro Windows 45 Slučování okrajů 46 Základní informace o pozicování 48 Vizuální formátovací model 49 Relativní pozicování 50 Absolutní pozicování 50 Plovoucí boxy 53 Shrnutí 59

6 6 Kapitola 3 Obrázky na pozadí a nahrazování obrázků 61 Základy pro obrázky na pozadí 61 Boxy se zaoblenými rohy 64 Box s pevnou šířkou a zaoblenými rohy 64 Box s proměnlivou šířkou a zaoblenými rohy 67 Barva pro zaoblené rohy pomocí CSS 69 Vržený stín 71 Jednoduché stínování pomocí CSS 72 Vržený stín á la Clagnut 75 Rozostřený stín, varianta 1 75 Rozostřený stín, varianta 2 79 Nahrazování obrázků 81 Fahrnerova metoda (FIR) 82 Metoda Phark 82 Gilderova/Levinova metoda 83 Inmanova metoda nahrazení flashem a rozšiřitelná Inmanova metoda nahrazení Shrnutí 85 Kapitola 4 Stylování odkazů 87 Jednoduché stylování odkazu 87 Legrace s podtržením 89 Efektní podtržení odkazů 89 Zvýraznění různých typů odkazů 90 Zvýraznění odkazů s dokumenty ke stažení 93 Vytváření tlačítek a rolloverů 94 Jednoduché rollovery 95 Rollovery s obrázky 95 Rollovery ve stylu Pixyho 96 Styly pro navštívené odkazy 97 Bublinová nápověda pomocí CSS 99 Shrnutí 101 Kapitola 5 Stylování seznamů a vytváření navigačních lišt 103 Základní stylování seznamů 103 Vytváření vertikální navigační lišty 105 Zvýraznění aktuální stránky v navigační liště 107 Vytváření vodorovné navigační lišty 109

7 7 Zjednodušená záložková navigace pomocí metody "posuvných dveří" 111 Obrazové mapy pomocí CSS 114 Obrazové mapy ve stylu flickr.com 117 Vzdálené rollovery 122 Krátké zastavení u definičních seznamů 126 Shrnutí 127 Kapitola 6 Stylování formulářů a datových tabulek 129 Návrh datové tabulky 129 Prvky tabulky 131 Struktura datové tabulky 133 Základní styl tabulky 134 Přidání vizuálního stylu 134 Zbývající drobnosti 136 Návrh jednoduchého formuláře 137 Užitečné prvky formuláře 137 Základní layout 139 Další prvky formuláře 140 Zbývající drobnosti 142 Layout složitějšího formuláře 144 Přístupné pole formuláře 145 Zatrhávací políčka ve dvou sloupcích 146 Zpětná vazba ve formuláři 149 Shrnutí 150 Kapitola 7 Layout 151 Vycentrování designu 151 Vycentrování designu pomocí automatických okrajů 152 Vycentrování designu pomocí pozicování a záporných okrajů 154 Základy tvorby layoutů 154 Dvousloupcový layout 155 Třísloupcový layout 158 Layout s pevnou šířkou, plovoucí layout a pružný layout 160 Plovoucí layout 161 Pružný layout 163 Zkombinování obou technik 165 Obrázky v pružném nebo plovoucím layoutu 166

8 8 Falešné sloupce 168 Shrnutí 171 Kapitola 8 Hacky a filtry 173 Úvod do hacků a filtrů 173 Varování ohledně hacků a filtrů 174 Rozumné používání hacků 175 Filtrování oddělených stylových předpisů 176 Podmíněné komentáře Internet Exploreru 176 Filtry Tanteka Çelika 178 Filtrování individuálních pravidel a deklarací 180 Hack selektoru potomka 180 Hack selektoru atributu 180 Hvězdičkový HTML hack 182 Komentovaný hack se zpětným lomítkem pro IE/Mac 182 Únikový hack vlastnosti 183 Tantekův hack modelu boxu 184 Zjednodušený hack modelu boxu 184!important a podtržítkový hack 185 Owen hack 186 Shrnutí 186 Kapitola 9 Chyby a jejich opravy 187 Hon na chybu 187 Časté problémy v CSS 188 Základy honu na chybu 191 Izolování problému 192 Vytvoření malého zkušebního případu 193 Opravujte problémy, nikoliv příznaky 193 Nebojte se požádat jiné o pomoc 194 Prvky "mající návrh" 194 Význam konceptu návrhu 195 Jak se schopnost "mít návrh" projevuje? 196 Nejčastější chyby v prohlížečích a jejich opravy 197 Dvojnásobný okraj u plovoucích prvků 197 Podivné odsazení textu o velikosti 3 px 198 Duplikace znaků v IE Hra na schovávanou (peek-a-boo) v IE 6 201

9 9 Absolutní pozicování v relativním kontejneru 202 Konec s posmíváním se Internet Exploreru 203 Shrnutí 204 Případová studie 1 Více než čmáranice 205 O této případové studii 206 Ovládání oblasti pro obsah pomocí selektoru potomka 207 XHTML 207 Třísloupcové rozvržení 208 Dvousloupcové rozvržení 210 Jednosloupcové rozvržení 210 Odstranění nežádoucích sloupců 211 Plovoucí sloupce 212 Výpočty 213 Umístění sloupců na správné místo 214 Zvýraznění aktuální stránky pomocí třídy v body 215 Tvorba obsahu pro sloupce 217 Pravoúhlé nebo zaoblené rohy vyberte si 218 Klasické pravoúhlé rohy 218 A nyní něco speciálního 219 Vlastní průhledné rohy a orámování 220 Obrázky 221 CSS kód 221 Vícenásobné třídy pro cílené akce 223 Třídy pro obrázky 225 Výchozí styl pro obrázky 226 Styly pro obrázky v boxech 226 Větší obrázky 226 Vylepšení odkazů 228 Pár slov o odkazech v postranní liště 229 Zvýraznění již navštívených odkazů 229 Zvýraznění externích odkazů 232 Plovoucí vržený stín 232 Vytvoření stínů 233 Plovoucí obrázky 234 Shrnutí 234

10 10 Případová studie 2 Web Tuscany luxury resorts 235 O této studii 235 Dynamicky přizpůsobivý layout 236 Tělo a kontejner 238 Hlavní grafická část (tiráž) 238 Obsah a postranní pruh 239 Zápatí 242 Problémy s dynamicky přizpůsobivým layoutem 243 Umisťování prvků pomocí absolutního pozicování 244 Vlastnosti left, right, top a bottom 244 Úroveň překrývání prvků (z-index) 246 Techniky pro obrázky na pozadí 248 Rozdělení horní části na tři 248 "Neprůstřelné" pozadí 250 Nahrazování obrázků 252 Nahrazení obrázku loga 252 Nahrazení písmena L v úvodním nadpisu 254 Dynamicky přizpůsobivé obrázky 255 Značkování pro dynamicky přizpůsobivé obrázky 256 Čistý kód navigačního menu 257 Kód menu 258 Shrnutí 261

11 Předmluva V našem krásném světě webdesignu je způsobů jak dosáhnout stejného cíle. Přibližně. A toto absolutně fiktivní číslo se zvyšuje každým dnem. Namísto jednoho správného způsobu řešení specifického problému jsme jak požehnáni, tak i prokleti hojnými možnostmi, které jako weboví designéři máme. A právě tyto možnosti jsou to, co dělá navrhování pro web zábavným a poutavým, a zároveň ohromujícím. Ovládnutí CSS nám pomůže vyléčit onu ohromujičnost (slovo, které jsem si právě vymyslel). Andy Budd už léta píše, navrhuje a mluví o webdesignu založeném na standardech a nyní máme to štěstí spatřit jeho jasný a záživný způsob učení nezbytných technik CSS shrnutých právě v této knize. Výsledkem je praktický seznam nepostradatelných řešení, triků a tipů, které by webovému profesionálovi, jakým jste vy, neměl chybět. Nikdy jsem nebyl nakloněn publikacím, které doporučovaly jediný správný způsob jak dosáhnout nějakého cíle a Andy dělá právě úplný opak tím, že nabízí několik metod pro řešení úloh, jako jsou stylování odkazů, vytváření záložkových navigací, nebo vytváření sloupcových layoutů (abych zmínil alespoň některé). Vyzbrojeni těmito populárními a stylovými postoji k běžným prvkům designu budete lépe připraveni udělat svá vlastní zasvěcená rozhodnutí. A jako by toho nebylo dost, Andy šel ještě dál a povolal na pomoc dva nenapodobitelné designéry, aby mu pomohli dát vše dohromady, ukazujíce, jak mohou tyto nezbytné techniky vzájemně spolupracovat. Jsem už dlouho příznivcem Cameronovy a Simonovy tvorby a vidět dvě případové studie, které zahrnují jak plovoucí, tak i mimořádně stabilní designy (a v neposlední řadě také pružné layouty) to je prostě úžasný bonus. Takže pusťte se do toho a začněte louskat oněch způsobů jak zvládnout CSS. 11 Dan Cederholm Salem, Massachusetts Autor knihy Webdesign s webovými standardy

12 12 O autorech Andy Budd je zkušený návrhář a vývojář webových standardů žijící a pracující v Brightonu, Anglie. Andy, jako výtvarný ředitel poradenství pro webový design Clearleft ( má zálibu v budování přitažlivých, dostupných a standardům vyhovujících webových prezentací. Jeho online domov můžete najít na kde píše o moderních praktikách webového designu. Andy je pravidelným mluvčím na mezinárodních konferencích o designu, seminářích a školeních a byl organizátorem první webové konference 2.0 ve Spojeném Království ( Andy, náruživý ve věci kvality vzdělání v oboru, vede bezplatná komunitní školení a síťové projekty SkillSwap ( Andy také pomohl založit Web Standards Awards ( což je projekt zaměřený na ocenění webových prezentací pro jejich použití jako webových standardů. Když nepracuje na webových prezentacích, je vášnivým fotografem na cestách. Andy, nejšťastnější při potápění u nějakého korálového ostrova, je také kvalifikovaný PADI instruktor potápění a honák žraloků v důchodu. Cameron Moll, uznávaný jako jeden z nejvyváženějších designérů nových médií v oboru, je odborníkem ve funkčním webovém designu, elegantních rozhraních a čistém značkování. Cameron je zapojen do designu a redesignu množství webových prezentací a jeho praktické techniky našly přízeň v kruzích po celém webu. Cameronova práce je respektována uznávanými organizacemi jako jsou National Public Radio (NPR), Communication Arts a Veer. Jeho osobní stránky CameronMoll.com podávají rady "jak na to" ve formě poutavé konverzace a žertování nad tématem. Zdrojové soubory se sablonami jsou samozřejmě ke stažení. Simon Collison je přední webový vývojář v Agenzia ( a pracoval na několika webových projektech pro vydavatelství, slavných umělců a výtvarných umělců a ilustrátorů, včetně The Libertines, Black Convoy a Project Facade. Simon také dohlíží na výrobní linku webových prezentací podniků, veřejnosti a dobrovolného sektoru a vášnivě dohlíží na to, aby vše, co vytvoří, bylo dostupné a použitelné, a že to odpovídá současným standardům. Pravidelně recenzuje webové prezentace založené na CSS pro Stylegala a dělá vše pro to, aby svůj vysoce populární blog ( udržel aktualizovaný vším tím povykem o webových standardech, muzice, filmu, cestování a dalších webových standardech. V ojedinělých případech, kdy není u počítače, můžeme Simona najít v hospodě nebo při pokusech získat volnou vstupenku na představení od svých klientů. Jelikož je poněkud příliš posedlý muzikou, je velmi pravděpodobné, že vás bude nudit svým nejnovějším hudebním žebříčkem Top 100, nebo vám nabídne stručnou historii hudební scény Spojeného Království od roku 1979 až do současnosti. Simon žil v mnoha městech včetně Londýna a Reykjavíku, ale nyní žije šťastně v Nottinghamu s Emmou a kočkou Ziggy.

13 O technickém recenzentovi Molly E. Holzschlag je dobře známou stoupenkyní webových standardů, instruktorkou a autorkou. Tento populární človíček je vedoucím skupiny pro Web Standards Project (WaSP) a expertem pozvaný do pracovní skupiny GEO při World Wide Web Consortium (W3C). Její poslední kniha (kterých vydala skutečně mnoho) je The Zen of CSS Design, jejímž spoluautorem je Dave Shea. Tato kniha obratně představuje nejprogresivnější designy z csszengarden.com. Blog Molly najdete na Poděkování Andy Budd Děkuji všem, kdo napomohli vzniku této knihy, ať přímo či nepřímo. Chrisovi za to, že mě vedl v průběhu psaní a za pomoc při přeměně mých nápadů do reality. A všem ve vydavatelství Apress, kteří neúnavně pracovali na tom, aby tato kniha byla publikována včas. Vysoce oceňuji vaši obětavost a profesionalitu. Mým přátelům a kolegům z Clearleftu ( Jeremymu Keithovi (adactio.com) a Richardu Rutterovi ( za poskytnutí podpory a zpětné vazby v průběhu psaní této knihy. Dále Molly E. Holzschlagové za propůjčení zkušeností a šíře znalostí této knize. Tvá podpora a rady byly neocenitelné a stále nechápu, kde zvládáš najít všechen ten čas. Jamiemu Freemanovi a Jo Acresovi za poskytnutí dokonalého prostředí, v němž jsem mohl rozšířit své znalosti. Brzy se stavím na čaj a koblihy. Díky také vývojářské komunitě v Brighton obecně a zvláště všem na seznamu adres na BNM a SkillSwap. Všem mým kolegům, kteří pokračují ve sdílení svého bohatství znalostí, aby byl web lepším místem pro všechny Tato kniha by nebyla možná bez předchozí práce mnoha lidí, z nichž několik budu jmenovat: Cameron Adams, John Allsopp, Nathan Barley, Holly Bergevin, Douglas Bowman, The BritPack, Dan Cederholm, Tantek Çelik, Joe Clark, Andy Clarke, Simon Collison, Mike Davidson, Garrett Dimon, Derek Featherstone, Nick Fink, Patrick Griffiths, Jon Hicks, Shaun Inman, Roger Johansson, Ian Lloyd, Ethan Marcotte, Drew McLellan, Eric Meyer, Cameron Moll, Dunstan Orchard, Veerle Pieters, D. Keith Robinson, Jason Andrew Andrew Santa Maria, Dave Shea, Ryan Sims, Virtual Stan, Jeffrey Veen, Russ Weakley, Simon Willison a Jeffrey Zeldman. Všem čtenářům mého blogu a všem, které jsem potkal na konferencích, seminářích a školeních za poslední rok. Vaše diskuse a nápady napomohly podpořit obsah této knihy. Velké díky Melovi za korigování každé kapitoly a snášení mě v posledních 9 měsících. A nakonec děkuji vám za čtení. Doufám, že vám tato kniha pomůže dostat vaše dovednosti v CSS na vyšší úroveň. 13

14 14 Cameron Moll Chtěl bych předat vděk všem, kdo přispěli k mé případové studii. Velká poklona patří Ryanu Parmanovi, jehož skript byl použit k vygenerování denní/měsíční časové známky v pravém horním rohu layoutu webu Tuscany. Kopii jeho skriptu si můžete stáhnout zde: A nekonečné díky Veerovi za poskytnutí úžasných obrázků použitých v tomto layoutu. Bez jejich pomoci by web Tuscany Luxury Resorts byl vizuální šeď. Z nějakých důvodů, bez selhání, Veer vždy dodává unikátní fenomenální vizuální prvky fotografie, písmo a další které jsou daleko za všedními. Jeho sbírka je dostupná zde: Simon Collison Musím poděkovat neuvěřitelnému Jonovi Burgermanovi ( Richardu Mayovi ( a všem mým ostatním přátelům z Black Convoy ( za to, že mi pro tuto případovou studii dovolili použít jejich obrázky a jména a v podstatě sebrat smetanu z jejich talentu. Velký dík také bezvadnému Švédovi Rogeru Johanssonovi ( za to, že mi dovolil použít jeho zaoblené rohy a že mi loni v létě koupil drink. Design More Than Doodles byl vytvořen rychle a efektivně díky brilantnímu systému šablon na vydavatelské platformě ExpressionEngine ( což je nástroj, bez kterého bych se neobešel. A nakonec díky chlapcům z Agenzie ( že přimhouřili oči nad mým horečnatým psaním knihy do pozdních hodin. Úvod Počet zdrojů o CSS kolem nás stále stoupá, přesto se pouze stačí podívat na seznam ů v různých konferencích a zjistíte, že se neustále objevují ty samé otázky. "Jak vycentruji design?" "Která technika boxů s kulatými rohy je nejlepší?" "Jak vytvořím třísloupcový layout?" Pokud sledujete společenství zabývající se designem v CSS, stačí si pouze pamatovat, na které webové prezentaci je daný článek nebo technika uvedena. Pokud jste ovšem v CSS nováčkem, nebo nemáte čas číst všechny ty blogy, může být složité tyto informace najít. Dokonce i lidé zběhlí v CSS naráží na problémy spojené s více nejasnými aspekty CSS jako jsou pozicovací model a specifičnost. To proto, že většina vývojářů jsou samoukové, kteří sbírají triky z článků a kódů jiných lidí, aniž by chápali specifikaci. A není se čemu divit, neboť CSS specifikace je komplexní a často rozporuplná, psaná pro výrobce prohlížečů a ne pro vývojáře. Pak jsou tu prohlížeče, se kterými je třeba bojovat. Chyby prohlížečů a jejich nekonzistence jsou jedním z největších problémů pro moderního vývojáře CSS. Bohužel většina z těchto chyb je chabě zdokumentována a jejich opravy jsou na hraně zákona. Jako designér víte, že něco musíte udělat určitým způsobem, jinak se to roztříští v tom, či onom prohlížeči. Pouze si nepamatujete ve kterém, nebo jak se to roztříští.

15 Tak vznikl nápad vytvořit knihu. Knihu, která sdružuje ty nejužitečnější metody CSS na jednom místě, jež se zaměřuje na problémy prohlížečů v reálném světě, a která pomáhá zaplnit mezery ve znalostech lidí o CSS. Kniha, která vám pomůže poskočit po křivce učení a pomocí níž budete ve velmi krátkém čase kódovat jako experti. 15 Komu je tato kniha určena? Ovládání CSS je zaměřeno na kohokoli se základní znalostí (X)HTML a CSS. Pokud jste právě nedávno nahlédli do světa designu CSS, nebo jste již několik let vývojářem ryzích webových prezentacích v CSS, bude v této knize něco pro vás. Tato kniha pro vás bude ovšem nejužitečnější, pokud již nějakou dobu používáte CSS, ale ještě se nepovažujete za znalce. Tato kniha je plná praktických rad a příkladů z reálného světa a pomůže vám ovládnout moderní CSS design. Jak je tato kniha uspořádána? První dvě kapitoly o základních konceptech a nejlepších praktikách CSS vám umožní pozvolna proniknout do knihy. Naučíte se, jak strukturovat a komentovat kód, dozvíte se o zvláštnostech pozicovacího modelu CSS a zjistíte, jak fungují plovoucí prvky a vlastnost clear. Z tohoto již možná mnoho znáte, ale třeba najdete věci, které jste vynechali, nebo jimž jste zcela neporozuměli. Jako takové jsou první dvě kapitoly nejen základem CSS, ale i rekapitulací toho, co již znáte. Jakmile jsou základy za námi, dalších pět kapitol pokrývá hlavní techniky CSS, jako jsou manipulace s obrázky, odkazy a seznamy, design formulářů a datových tabulek, čistý CSS layout. Každá kapitola začíná jednoduše a postupně se dostává ke složitějším příkladům. V těchto kapitolách se naučíte vytvářet boxy se zakulacenými rohy, obrázky s průhledným stínováním, lišty s navigací ve formě záložek, rollovery ve stylu webu flickr.com. Pokud chcete zkoušet příklady uvedené v této knize, všechny zdrojové kódy si můžete stáhnout z této adresy: Chyby v prohlížečích jsou prokletím mnoha vývojářů CSS, a proto se všechny příklady v této knize zaměřují na vytváření technik, které fungují napříč mnoha prohlížeči. Navíc má tato kniha celé dvě kapitoly věnované hackům, filtrům, chybám a opravám chyb. V těchto kapitolách se dozvíte o některých nejpoužívanějších filtrech, kdy je použít a kdy ne. Také se dozvíte o technikách pátrání po chybách a jak najít a opravit běžné chyby předtím, než začnou působit problémy. Dokonce se dozvíte, co ve skutečnosti způsobuje mnoho ze zdánlivě náhodných chyb CSS v Microsoft Internet Exploreru. Poslední dvě kapitoly jsou takovou třešničkou na dortu. Simon Collison a Cameron Moll, dva nejlepší designéři CSS v mém okolí, zkombinovali všechny tyto techniky do dvou vynikajících případových studií. Takto se dozvíte nejenom to, jak tyto techniky pracují, ale také jak je využít v praxi u reálného webového projektu. Tuto knihu můžete přečíst od začátku do konce, nebo může být položena vedle vašeho počítače jako taková příručka moderních rad, triků a technik. Volba je na vás.

16 16 Obecné zásady použité v této knize V této knize je použito pár obecných zásad, které stojí za povšimnutí. Napříč touto knihou jsou použity následující výrazy: Slovo (X)HTML se vztahuje jak na jazyk HTML, tak i na XHTML. Pokud není uvedeno jinak, CSS se vztahuje ke specifikaci CSS 2.1. IE 5.x/Win znamená Internet Explorer verze 5.0 a 5.5 pro Windows. IE a nižší ve Windows se vztahuje na Internet Explorer od 5.0 po verzi 6.0 ve Windows. Předpokládá se, že všechny příklady (X)HTML v této knize jsou uzavřeny v <body> platného dokumentu, zatímco CSS je pro pohodlnost obsaženo v sekci <head> dokumentu. Příležitostně bylo (X)HTML a CSS umístěno do jednoho příkladu kódu. Ve skutečném dokumentu musí ovšem přijít do příslušných míst, aby správně fungovaly. p {color: red;} <p>i m red</p> A nakonec, u příkladů (X)HTML, které obsahují nějaká se opakující data, byl namísto vypisování všech řádků použit znak vynechávky ( ), abych tak označil pokračující kód: <ul> <li>red</li> <li>yellow</li> <li>pink</li> <li>green</li>... </ul> Zdrojové soubory Zdrojové soubory k této knize je možné stáhnout z následující adresy: Velikost souboru je 688 kb.