1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Tomáš Koudelka Využití jazyka CSS3 ...
Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze
Tomáš Koudelka
Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací Bakalářská práce
2012
Prohlášení Prohlašuji, že jsem bakalářskou práci na téma „Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací“ vypracoval samostatně a použil pouze zdrojů, které cituji a uvádím v seznamu použité literatury.
V Praze dne 14. května 2012
.......................................... Podpis autora
Poděkování Děkuji Ing. Kateřině Jeníčkové za ochotné vedení mé bakalářské práce a poskytnutí svého cenného času. Dále děkuji Ing. Davidu Klimánkovi Ph.D. za to, že celý rezervační systém naprogramoval a dal mi tak možnost si toto zajímavé a mně blízké téma vybrat. Děkuji také všem, kdo mě při psaní práce podporovali.
Abstrakt Práce se zabývá počítačovým programovacím jazykem CSS3 (Cascading Style Sheets, česky kaskádové styly), který slouží pro definování vzhledu webových stránek. Shrnuje novinky a výhody, které CSS3 přináší oproti minulé verzi (CSS 2.1), zabývá se jednotlivými funkcemi, jejich syntaxí a aktuální podporou v internetových prohlížečích. Věnuje se také možnostem emulace některých funkcí ve starších prohlížečích, které CSS3 nepodporují. V druhé části práce je využití CSS3 prakticky demonstrováno, a to v rámci popisu postupu při redesignu rezervačního systému bakalářských a absolventských prací na Vyšší odborné škole informačních služeb v Praze.
Klíčová slova CSS3, kaskádové styly, redesign, webdesign
Abstract This thesis deals with computer programming language CSS3 (Cascading Style Sheets) that is used to define the appearance of web pages. It summarizes the news and the benefits of the CSS3 compared to the previous version (CSS 2.1), describing various functions, their syntax and support in current web browsers. In addition, it shows possibilities of emulation in older browsers that do not have support for CSS3. In the second part of the thesis the use of CSS3 is practically demonstrated by description of redesign the reservation system of bachelor and graduate thesis at Vyšší odborná škola informačních služeb in Prague.
Obsah
Obsah ........................................................................................................ 5 Úvod .......................................................................................................... 6 1 Teoretická část ..................................................................................... 7 1.1
Základní informace o CSS3 ........................................................... 7
1.1.1 Podpora v prohlížečích ............................................................. 7 1.1.2 Možnosti emulace .................................................................... 9 1.2
Klíčové moduly a vlastnosti CSS3 ............................................... 10
1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 2
Selektory ............................................................................... 10 Barvy..................................................................................... 15 Obrázková pozadí .................................................................. 18 Barevné přechody .................................................................. 20 Rámečky a stíny ..................................................................... 23 Animace a přechody ............................................................... 25 Další moduly ......................................................................... 28
Praktická část ..................................................................................... 29 2.1 2.2 2.3
Cíl praktické části ........................................................................ 29 Popis výchozího stavu systému .................................................... 29 Popis postupu redesignu .............................................................. 31
Použité technologie a kompatibilita ........................................ 31 Celkový layout ....................................................................... 33 Základní společné prvky......................................................... 35 Hlavička stránek .................................................................... 40 Úvodní stránka ........................................................................ 47 Tabulkové výpisy témat a konzultací ...................................... 49 Ostatní podstránky ................................................................. 55 Patička stránek ....................................................................... 57
Shrnutí ........................................................................................ 59 Vlastní přínos práce ..................................................................... 62
Závěr ....................................................................................................... 63 Seznam použité literatury.......................................................................... 64 Seznam obrázků ....................................................................................... 66 Seznam grafů ........................................................................................... 67 Seznam příloh .......................................................................................... 68 Přílohy ..................................................................................................... 69
5
Úvod Internet v dnešní době neustálé získává na důležitosti, informací na této celosvětové síti stále přibývá a jeho uživatelé u něho tráví více a více času. Jsou také čím dál náročnější, a ať se nám to líbí nebo ne, kladou kromě obsahu stále větší důraz na formu a vzhled webových stránek. Webů je takové množství, že zaujmout návštěvníka je mnohem náročnější než dříve. Je k tomu třeba nových technologií, které by přinesly nové možnosti. Byl to právě jazyk CSS (kaskádové styly), který internet před lety polidštil, zkrášlil ho, dal mu podobu a design. Nyní přichází nová verze tohoto jazyka označována jako CSS3. To, co se dříve dělalo složitými postupy při grafickém návrhu a kódovaní stránek, by díky ní mělo jít zapsat jednou definicí, jedním řádkem kódu. Rozšíření a vývoj CSS3 jsou však postupné a šířka problematiky, kterou se zabývá, je obrovská. Chtěl bych v této práci dokázat, že přestože zdaleka ne každý internetový prohlížeč tuto novou verzi kaskádových stylů podporuje, má pro návrháře webů smysl je již v dnešní době začít používat. I prohlížeče se totiž vyvíjejí rychleji než dřív, jejich aktualizacím je přikládán větší význam - ať už kvůli zabezpečení, či rychlejšímu surfování (aby uživatelé ušetřili čas). Několik stěžejních oblastí, ve kterých CSS3 přináší novinky, je popsáno v této práci. Jednotlivé kapitoly obsahují výčet vlastností (funkcí), jejich popis a případně ukázku. Je zde také popsána kompatibilita v nejpoužívanějších prohlížečích a alternativy, kterými lze funkce CSS3 emulovat. Maximum z těchto teoreticky popsaných možností CSS3 jsem se pokusil demonstrovat v praktické části práce, kde je rozebrán postup redesignu rezervačního systému bakalářských a absolventských prací na VOŠIS. Výsledná redesignovaná verze systému je dostupná online z http://bp.tkoudy.cz, a to ve dvou barevných provedeních - v zelené, která je laděna k webovým stránkám školy, a v modré.
6
1 Teoretická část 1.1
Základní informace o CSS3
CSS (Cascading Style Sheets, česky kaskádové styly) je jazyk pro definování vzhledu webových stránek. Umožňuje nastavovat uspořádání webu, velikosti objektů, barvy, fonty a mnoho dalšího. Odděluje vzhledové definice od samotného obsahu webu (HTML) a dovoluje tak například použít jednotný styl pro více stránek, čímž také zpřehledňuje zdrojový kód dokumentů 1. Jazyk CSS byl vytvořen na půdě konsorcia W3 (W3C) a tato instituce se také dále stará o jeho vývoj. Verze CSS3 je momentálně vyvíjena v několika směrech, tzv. modulech. Každému modulu (pozadí, layout, formátování textu apod.) se věnuje zvláštní pracovní skupina, která jej postupně standardizuje a aktualizuje jeho specifikaci až do finální podoby. Tyto jednotlivé moduly jsou ve značně rozdílném stádiu vývoje (W3C je označuje jako „Working Draft“ (WD), „Candidate Recommendation“ (CR), „Proposed Recommendation“ (PR) a finální „W3C Recommendation“ (REC)) 2, a proto se liší i jejich podpora v prohlížečích. Pod pojmem CSS3, se má většinou na mysli několik základních modulů, které jednotlivě popíši dále.
1.1.1 Podpora v prohlížečích Základní otázkou při použití CSS3 vlastností je vždy jejich podpora v prohlížečích. V jednotlivých prohlížečích byla zavedena alespoň minimální podpora CSS3 v těchto verzích: Firefox 3.6, Opera 9.5, Internet Explorer 9 a Safari 5.0 3. Prohlížeč Google Chrome podporuje základní CSS3 od samotného počátku, jelikož jeho první verze vznikla teprve v roce 2008. Naopak stále poměrně hojně používané starší verze Internet Exploreru (7 a 8) CSS3 vůbec nepodporují. Způsoby, jakými v nich lze jeho efekty do určité míry emulovat jsou popsány v další kapitole.
W3C. 7 W3C Technical Report Development Process: Maturity Levels. World Wide Web Consortium (W3C) [online]. 2005 [cit. 2012-03-20]. Dostupné z: http://www.w3.org/2005/10/Process20051014/tr#maturity-levels When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-03-28]. Dostupné z: http://caniuse.com/ 3
7
Níže je uveden graf podílu prohlížečů na českém internetu v březnu roku 2012: Podíl prohlížečů (vykreslovacích jáder) v ČR 31,71%
29,41%
15,42% 10,78% 6,46%
4,23%
Graf 1 - podíl prohlížečů na českém internetu za březen roku 2012. Zdroj: autor, data: http://www.toplist.cz/stat/?a=history&type=1
Pro upřesnění je třeba uvést, že vykreslovací jádro WebKit používají především prohlížeče Google Chrome, Safari a Maxthon 3 a jádro Gecko používá Firefox. Podpora CSS3 v novějších verzích jednotlivých prohlížečích se vyvíjí silně různorodě a její popis by vydal na samostatnou práci. Proto je podpora vlastností zmíněných v této práci uvedena vždy na konci dané kapitoly. Obecně však platí, že při implementaci nových CSS3 funkcí výrobci prohlížečů používají tzv. vendor prefixy. To znamená, že například vývojáři Firefoxu si přejmenují vlastnost boxshadow
na –moz-box-shadow a prohlížeč pak ve stylopisu čte tuto vlastnost s daným
prefixem (předponou) –moz-. Tato technika se používá proto, že vývojáři prohlížečů často implementují vlastnosti, které se ještě ve specifikacích W3C mohou měnit. Z tohoto důvodu má každý výrobce prohlížečů svůj prefix 4: -webkit- (či –apple- nebo –khtml-) (Chrome, Safari) -moz- (Mozilla Firefox) -ms- (Internet Explorer) -o- (Opera) 4
V praxi je tedy často nutné použít pro zapsání jedné vlastnosti několik definic, aby byla zajištěna kompatibilita v maximálním množství prohlížečů: background:-webkit-gradient(linear, left top, left bottom, from(#598299), to(#264F66)); /* Saf4+, Chrome */ background:-webkit-linear-gradient(top, #598299, #264F66); /*Chrome 10+, Saf5.1+ */ background:-moz-linear-gradient(top, #598299, #264F66); /* FF3.6 */ background:-ms-linear-gradient(top, #598299, #264F66); /* IE10 */ background:-o-linear-gradient(top, #598299, #264F66); /* Opera 11.10+ */ background: linear-gradient(top, #598299, #264F66); (W3C Spec)
Pro zjednodušení tyto „přídavné“ části kódu v práci většinou dále neuvádím, ačkoli při samotném redesignu systému (praktické části práce) byly použity. Výčet všech vendor prefixů je možné nalézt v příloze.
1.1.2 Možnosti emulace Jak už jsem zmínil, podpora CSS3 v Internet Exploreru 7 a 8 je nulová, což je dáno stářím obou prohlížečů. Existují však určité techniky a nástroje, které dovedou některé efekty CSS3 přenést i do těchto prohlížečů. Asi nejjednodušší je použití filtrů. Jedná se o speciální funkce Internet Exploreru, které Microsoft implementoval, přestože se nikdy nestaly součástí žádné CSS specifikace, dá se tedy říct, že se jedná o jakési rozšíření CSS ze strany Microsoftu. Pomocí filtrů lze do určité míry simulovat poloprůhlednost, barevné přechody, stíny a rotaci objektů. Druhou možností je využít různé skripty v jazyce JavaScript. Existuje například plugin pro javascriptovou knihovnu jQuery, který dokáže v IE simulovat stín u textu
5
nebo
Selectivizr, který v IE verze 6 až 8 implementuje CSS3 selektory 6. Třetím typem simulace jsou skripty, které využívají zvláštní CSS vlastnost behavior. Jedná se například o CSS3Pie, který do IE implementuje poměrně široké množství novinek z CSS3 7, nebo Curved-corner, který se specializuje na zaoblené rohy 8. Všechny tyto
5
CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online]. 2010 [cit. 2012-03-21]. Dostupné z: http://coding.smashingmagazine.com/2010/04/28/css3-solutions-forinternet-explorer/ 6
Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online]. 2012 [cit. 2012-03-21]. Dostupné z: http://selectivizr.com/ 7
CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online]. 2010 [cit. 2012-03-21]. Dostupné z: http://coding.smashingmagazine.com/2010/04/28/css3-solutions-forinternet-explorer/
9
techniky mají však své nevýhody. Použití některých je blíže popsáno v praktické části práce. Na závěr kapitoly ještě zajímavá myšlenka: Měly by weby opravdu vypadat shodně ve všech prohlížečích a systémech? Po léta je právě toto snahou snad všech webdesignérů a web kodérů. V poslední době se však stále častěji vyskytuje otázka „proč vlastně?“ 9.
1.2
Klíčové moduly a vlastnosti CSS3
1.2.1 Selektory Celý jazyk CSS je založen na přiřazování vlastností objektům zapsaným v HTML, tedy tagům. Aby toto přiřazování bylo možné, je nutné nějakým způsobem určit, která CSS vlastnost se přiřadí kterému HTML tagu (objektu na stránce). Toto určení cílového prvku, na který styl aplikujeme, se provádí pomocí tzv. selektorů. Selektory jsou základem CSS, umožňují efektivně vybrat objekt, s jehož vzhledem chceme pracovat. Přestože samy o sobě nijak neovlivňují vzhled stránky, CSS by bez nich prakticky nemohlo existovat, jelikož by nebyl způsob, jak propojit zápis stylu s HTML kódem. V současném CSS existuje čtyřicet dva selektorů
10
, zmíním zde tedy ty
základní, a dále ty, které nově přináší CSS3. Základní selektory Základním a nejjednodušším selektorem je výběr dle názvu elementu (tagu). Mějme následující HTML kód:
Text v prvním odstavci
Text ve druhém odstavci
A CSS zápis: p {color: #fff}
Websites Shouldn't Look The Same Across Different Browsers…Here Is Why. Noupe: The Curious Side of Smashing Magazine [online]. 2011 [cit. 2012-03-21]. Dostupné z: http://www.noupe.com/design/websites-shouldnt-look-the-same-across-differentbrowsers%E2%80%A6here-is-why.html 9
10
Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
10
Selekor p vybere všechny (oba) výskyty odstavců v HTML kódu a nastaví jim bílou barvu písma. Jeho použití se hodí pouze při globálních úpravách, protože ovlivní všechny tagy daného druhu 11. O něco specifičtější je výběr pomocí potomka. Zápis div p {color: #fff} vybere pouze ty odstavce, které mají mezi rodiči element div, tedy pouze první odstavec v příkladu 12. Zcela jinými selektory už jsou výběry podle třídy a identifikátoru. Třída je vlastně libovolné klíčové slovo, kterým pojmenujeme určitou sadu pravidel, která budou aplikována na libovolný prvek. Jedná se o velmi častý selektor, v CSS je uvozen tečkou a do HTML se pak zapíše pomocí atributu class 13. Příklad: HTML
Styl třídy warning se v tomto případě projeví jak na prvním odstavci, tak na slově „chybná“ v druhém odstavci. Použití identifikátoru je obdobné, s tím rozdílem, že v CSS je označen znakem # a párování s HTML probíhá díky atributu id . Z tohoto důvodu se element s daným identifikátorem může na každé stránce vyskytovat pouze jednou
14
a jeho použití je tedy typické ve dvou případech. Tím
prvním je označení základních prvků stránky – hlavičky, obsahu, menu, patičky: HTML
id=“header“>...
id=“menu“>...
id=“content“>...
id=“footer“>...
11
SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s. 169. ISBN 978-143-0240-419. 12
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 121. ISBN 978-098-0846-904. 13
SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s. 170. ISBN 978-143-0240-419. 14
SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s. 171. ISBN 978-143-0240-419.
Druhým častým použitím je případ, kdy je prvek nějakým způsobem napojen na JavaScript. Ten totiž k elementům přistupuje nejčastěji právě pomocí atributu id a jeho hodnotu se tedy rovnou vyplatí použít i jako selektor pro definování vzhledu. Novinky v CSS3 Patrně největším přínosem CSS3 v oblasti selektorů jsou ty, které umožňují cílit na prvek pomocí pořadí jeho výskytu na stránce. Výrazně tak rozšiřují tento druh selektorů, jelikož v CSS2 se nacházel prakticky pouze :first-child, který vybere prvního potomka daného elementu
15
. Tedy například li:first-child
pouze první položku v následujícím seznamu:
první položka
druhá položka
CSS3 tyto možnosti výrazně rozšiřuje, zavádí totiž celou sadu podobných selektorů. V první řadě jsou to další čtyři, které pracují s potomkem elementu. :last-child, :nth-child(n), :nth-last-child(n), :only-child
Selektor :last-child slouží k výběru posledního potomka, v předchozím příkladě tedy druhé položky seznamu. Je-li třeba vybrat prvek či prvky mezi prvním a posledním potomkem, je ideálním řešením :nth-child(n). Za n lze totiž dosadit výraz, který určí, na které prvky, jež jsou potomky, se styl aplikuje. Například tr:nth-child(2n) child(2n+1)
reprezentuje každý sudý řádek tabulky, naopak tr:nth-
každý lichý řádek. Lze samozřejmě použít i opačné znaménko,
například li:nth-child(10n-1) vybere devátou, devatenáctou, dvacátou devátou atd. položku seznamu, li:nth-child(-n+5) naopak pouze prvních pět. Kromě výrazů lze použít také dvě klíčová slova even (sudý) a odd (lichý), která mají stejný efekt jako první dva uvedené matematické výrazy. Opakem je selektor :nth-last-
15
Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
12
child(n),
který funguje obdobně, ovšem dokument prochází od konce. tr:nth-
last-child(-n+2)
se tedy aplikuje na poslední dva řádky tabulky. Speciálním
případem z této skupiny je selektor :only-child, který se používá pro výběr elementu, který je jediným potomkem rodiče 16. :first-of-type, :last-of-type, :nth-of-type(n), :nth-last-oftype(n), :only-of-type
Tyto selektory fungují na stejném principu jako sada předcházejících, s jediným rozdílem. Berou v úvahu pouze elementy stejného typu, nikoli jakékoli potomky.
Tedy zatímco
říká
p:nth-child(2)
„vyber
druhého
potomka
rodičovského elementu, pokud je to odstavec“, p:nth-of-type(2) se dá popsat jako „vyber druhý odstavec rodičovského elementu“ 17. :not(s)
Jedná se o selektor, pomocí kterého můžeme vybrat prvky, jež nevyhovují jinému selektoru dosazenému za s. Tedy například z HTML kódu
...
můžeme CSS zápisem tr:not(:first-child) vybrat všechny řádky tabulky, kromě prvního. CSS3 dále rozšiřuje takzvané atributové selektory, jejichž podstatou je výběr elementu podle jeho HTML atributů. Základní selektor ve tvaru např. input[type=”password”]
(vybere všechny tagy input s atributem password, tedy
formulářová pole pro hesla) se objevil v CSS2
18
, stejně jako několik dalších. CSS3
přidává následující dva: [att$="value"] a [att*="value"]. Jejich použití je jednoduché. První z nich vybere prvky, jejichž hodnota atributu att končí řetězcem value. Druhý
16
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 35-42. ISBN 15-932-7286-3 17
COYIER, Chris. The Difference Between :nth-child and :nth-of-type. CSS-Tricks [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ 18
Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
13
pak prvky s atributem att, v jejichž hodnotě se vyskytuje řetězec value. Příkladem použití může být stylování odkazů podle stránek, na které vedou: HTML článek na IHNED.czčlánek na IDNES.cz
Zvláštní kategorií CSS3 selektorů jsou ty, které umožňují vybrat prvek podle určitého stavu, ve kterém se aktuálně nachází. Jedná se o jakési rozšíření starších selektorů z oblasti odkazů (:hover, :active, :focus apod). :enabled, :disabled, :checked a ::selection
Tyto selektory umožňují specifický výběr formulářových prvků. :enabled vybere formulářové prvky, do kterých je možné zapisovat. Naopak :disabled zacílí na ty, do kterých je zápis zakázán, tedy jsou neaktivní. Selektor :checked dovoluje pracovat s objektem, který je zaškrtnut (jedná se tedy o dva formulářové prvky radio přepínač a zaškrtávací pole). Typicky by tedy zápis vypadal takto: input:checked {}.
Ve starších specifikacích CSS selektorů se objevoval také
selektor ::selection, pomocí kterého bylo možné ovlivňovat vzhled vybraného textu (ve Windows typicky modré podbarvení myší či klávesnicí označeného objektu). Přesto, že se v aktuální specifikaci nenachází
19
, jeho podpora
v prohlížečích je poměrně dobrá 20. :target
Velmi zajímavý selektor, pomocí kterého je možné ovlivnit vzhled cíle odkazu ve stránce. Ukázka kódu řekne více: HTML
Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 20
CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://kimblim.dk/css-tests/selectors/
14
Výhody CSS3
CSS #nadpis3:target {background-color: #ff0000}
Po přechodu na nadpis Výhody CSS3 (kliknutím na odkaz „níže“) se tento podbarví červeně (tedy ve chvíli, kdy na něj bude zacíleno). Tento selektor lze tedy dobře využít k tomu, aby se uživatel při přesunu ve stránce odkazem neztratil. :empty
Styl cílený pomocí tohoto selektoru se aplikuje na prázdné elementy. To jsou takové, které nemají žádné potomky ani textový obsah, tedy například prázdný odstavec: . Podpora v prohlížečích Podpora CSS3 selektorů v prohlížečích je obdobná jako u jiných CSS3 prvků. Prohlížeče s jádrem WebKit (Chrome, Safari) s nimi nemají téměř žádný problém, stejně tak prohlížeče Firefox a Opera. Horší je situace u Internet Exploreru, který jejich plnou podporu nabízí až od verze 9
21
. Podrobná tabulka podpory je v příloze
této práce.
1.2.2 Barvy Již specifikace CSS1 přinesla tři základní způsoby, jak vyjádřit barvu prvku různými zápisy. Jednalo se o jména šestnácti základních barev (blue, black, white apod.), hexadecimální zápis (#00f či #0000ff) a RGB zápis (rgb(0,0,255) či rgb(0%, 0%, 100%)) 22. CSS3 přichází se dvěma zásadními novinkami. Tou první je rozšíření RGB zápisu o míru průhlednosti na tzv. RGBA. Druhou inovací je zcela nový způsob zápisu pomocí modelu HSL a k němu opět varianta s průhledností – HSLA23. RGBA Způsob zápisu je obdobný jako u RGB (zůstávají tedy dvě možnosti zápisu hodnot – celým číslem v rozsahu 0 až 255, nebo procenty), jediným rozdílem je 21
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 24. ISBN 15-932-7286-3. 22
Cascading Style Sheets, level 1. W3C. World Wide Web Consortium (W3C) [online]. 1996 [cit. 2012-04-02]. Dostupné z: http://www.w3.org/TR/REC-CSS1/#COLOR-UNITS 23
CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 201204-02]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-color-20110607/
15
přidání čtvrté hodnoty, která reprezentuje průhlednost (alfa kanál). Ta je zapsána jako desetinné číslo v rozsahu 0.0 (zcela průhledná barva) až 1.0 (zcela neprůhledná barva) 24. Následující čtyři CSS zápisy jsou tedy shodné, jelikož „plně zelené“ barvě je nastavena „plná neprůhlednost“: p p p p
Použití průhlednosti je však typické spíše pro barevné pozadí prvku. To umožňuje částečnou viditelnost prvku „pod“ ním: HTML
...
Odstavec s poloprůhledným modro-červeným pozadím
...
CSS div {background-image: url(„image.png‟)} p {background-color: rgba(50,0,100,0.5)}
HSL a HSLA Barevný model HSL nepracuje se složkami základních barev jako RGB model, nýbrž s odstínem (hue), sytostí (saturation) a jasem či světlostí (lightness). Pokud jde o teorii, nejedná se o žádnou novinku, modely byly vyvinuty v sedmdesátých letech minulého století a běžně se používají nejen v grafických programech 25. Konsorcium W3C se rozhodlo pro implementaci této možnosti zápisu proto, že je údajně intuitivnější a pro člověka příjemnější než RGB zápis26. Způsob zápisu hodnot je shodný s RGB zápisem, ovšem rozsah hodnot se liší. Odstín je totiž definován jako úhel na barevném kruhu, kde červená barva=0°=360° a ostatní barvy jsou rovnoměrně rozmístěny (zelená=120°, modrá 240°). Sytost a světlost jsou pak
24
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 131. ISBN 978-098-0846-904. 25
HSL and HSV. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-04-02]. Dostupné z: http://en.wikipedia.org/wiki/HSL_and_HSV 26
CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 201204-02]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-color-20110607/
16
míry vyjádřené procenty27. (Následující příklad je převzat přímo ze specifikace W3C28): * * * * *
red */ lime */ dark green */ light green */ pastel green, and so on */
Zápis ve variantě HSLA je shodný, pouze přidává míru průhlednosti, obdobně jako RGBA: p {background-color: hsla(0, 100%, 50, 0.5)}
Hodnoty transparent a currentColor Kromě výše zmíněných existují ještě dva zvláštní zápisy barev v CSS. První z nich je pomocí klíčového slova transparent. Udává, že prvek bude mít zcela průhledné (tedy v podstatě žádné) pozadí. CSS3 specifikace uvádí, že hodnota je vypočtena jako průhledná černá, tedy jako by bylo zapsáno rgba(0,0,0,0) . Hodnota currentColor byla zavedena z důvodu chybějícího klíčového slova pro počáteční hodnoty vlastností definujících barvy. Výchozí barvou je totiž barva nastavená vlastností color (přebírají ji) 1px 1px 3px currentColor}
29
. Zápis p {color: #f00; box-shadow:
tedy určí, že stín odstavce převezme barvu od jeho
písma (červenou). Vlastnost opacity Speciální vlastností, která s barvami souvisí, je opacity. Nabývá opět hodnot 0.0 až 1.0 a určuje míru průhlednosti celého prvku, tedy včetně jeho obsahu, nikoli pouze jeho barvy pozadí. Pokud tedy uvnitř prvku bude například obrázek, aplikuje se tato míra průhlednosti i na něj
30
. Přestože vlastnost opacity existuje již delší
dobu, oficiálně je zahrnuta právě až v CSS3.
27
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 125-126. ISBN 15-932-7286-3. 28
CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 201204-02]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-color-20110607/ 29
CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 201204-02]. Dostupné z: http://www.w3.org/TR/2011/REC-css3-color-20110607/ 30
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 133-134. ISBN 978-098-0846-904.
17
Podpora v prohlížečích Všechny uvedené vlastnosti jsou podporovány v prohlížečích Chrome a Safari, ve Firefoxu od verze 3, Opery od verze 10 a Internet Exploreru od verze 9 31.
1.2.3 Obrázková pozadí Práce s pozadím prvků patřila vždy k základním funkcím kaskádových stylů. CSS3 modul background nyní přichází s několika novými vlastnostmi, díky kterým bude možné zjednodušit dosud používané techniky, především pokud jde o tzv. více násobná pozadí. Vlastnost background-image totiž nově podle specifikace CSS3 umožňuje definovat více obrázkových pozadí elementu 32. Zápis je jednoduchý: background-image:
url(img1.png),
url(img2.png),
url(img3.png).
Přičemž platí, že první obrázek bude vykreslen „nejblíže k uživateli“ (jako by měl nejvyšší z-index), poslední nejdále. S každým obrázkem lze pak obdobným zápisem pracovat ve všech dalších vlastnostech pozadí, kromě background-color, tam zůstává zápis stejný, jako v CSS2, tedy např. background-color: #fff. Takto definovaná barva pozadí bude vždy vykreslena pod případnými obrázky určenými v background-image. CSS3 dále rozšiřuje hodnoty vlastnosti background-repeat o round a space33. Vztaženo na předcházející příklad s background-image, zápis background-repeat:
repeat,
round,
space
by za podmínky, že velikost
elementu bude větší než velikost obrázků na pozadí, znamenal následující: obrázek img1.png bude jednoduše opakován v horizontálním i vertikálním směru, dokud nevyplní celý prostor elementu (repeat). Obrázek img2.png bude také opakován, ovšem pokud šířka a výška elementu není dělitelná šířkou a výškou obrázku (tzn. obrázek se do elementu nevejde přesně x krát), pak dojde k jeho zdeformování, aby se tak stalo (round). Podobné je to u obrázku img3.png, ale místo zdeformování se mezi jednotlivými výskyty obrázků udělají mezery 34. Následující obrázek ukazuje interpretaci těchto hodnot v Internet Exploreru 9:
31
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 130. ISBN 15-932-7286-3. 32
CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, s. 86-88. Book apart, no. 2. ISBN 978-098-4442-522 33
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 102. ISBN 15-932-7286-3. CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online]. 2010 [cit. 2012-04-08]. Dostupné z: http://interval.cz/clanky/css-3-jak-na-stylovani-pozadi-elementu/ 34
18
Obrázek 1 - srovnání hodnot repeat, round a space vlastnosti background-repeat. Zdroj: autor
Zcela novou vlastností v modulu CSS3 Backgrounds je background-size. Jak je patrné již z názvu, umožňuje nastavit velikost obrázku na pozadí. K určení rozměrů lze použít pixely nebo procenta, zápis background-size: 100px 100px říká, že obrázek na pozadí bude mít šířku i výšku 100 pixelů, ať už je jeho skutečný rozměr a poměr stran jakýkoli. Kromě přesných rozměrů lze užít také dvě klíčová slova contain
a cover. První z nich nastaví obrázku maximální možnou velikost (při
zachování poměru stran) tak, aby se celý vešel do pozadí elementu. Hodnota cover nastaví nejmenší možnou velikost (při zachování poměru stran), při které obrázek pokryje celé pozadí elementu 35. Dobře je to patrné z obrázku:
Obrázek 2 - srovnání hodnot auto, contain a cover vlastnosti background-size. Zdroj: autor
Novinkami v CSS3 jsou i vlastnosti background-clip a background-origin, které mohou obě nabývat shodných hodnot border-box, padding-box a content-box . Background-clip
určuje, pod kterými části elementu se pozadí zobrazí. Výchozí
hodnotou je border-box, tedy že pozadí se bude vykreslovat pod celým elementem. Při hodnotách padding-box a content-box dojde k oříznutí obrázku tak, aby se zobrazoval jen na odpovídající části elementu. Background-origin dovoluje nastavit pomyslný počátek souřadnic, od něhož se bude počítat hodnota background-position,
tedy zda to bude od kraje rámečku (border-box), paddingu
(vnitřního okraje - padding-box), nebo samotného obsahu elementu (contentbox)
36
. Posledním rozšířením, které v oblasti pozadí z CSS3 zmíním je obohacení
vlastnosti background-position o dvě hodnoty. Nově je tedy možné rozšířit zápis background-position:
center
bottom
například na background-position:
35
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 172-173. ISBN 978-098-0846-904. 36
CSS3: background-origin and background-clip. CSS3 . Info: All you ever needed to know about CSS3 [online]. 2009 [cit. 2012-04-08]. Dostupné z: http://www.css3.info/preview/background-originand-background-clip/
19
center 20px bottom 30px,
který zajistí, že obrázek na pozadí se vykreslí 30 pixelů
od dolního okraje elementu a 20 pixelů od jeho horizontálního středu 37. Podpora v prohlížečích Podpora v prohlížečích se liší vlastnost od vlastnosti. Více obrázků na pozadí podporují Chrome a Safari, Firefox od verze 3.6, Opera od verze 10.5 a Internet Exploreru od verze 9 38. Vlastnosti background-clip –origin a -size jsou plně podporovány až ve Firefoxu 4, v Opeře od verze 10.5, v IE od verze 9 39. Podpora dalších vlastností je uvedena v příloze.
1.2.4 Barevné přechody Barevné přechody (anglicky gradients) patří k těm novinkám CSS3, které by měly ušetřit webdesignérům nejvíce práce. Dříve bylo nutné jakýkoli barevný přechod ve stránce - typicky pozadí nějakého prvku či třeba celé stránky - řešit vyrobením obrázku v nějakém grafickém editoru. CSS3 přichází s mnohem rychlejším a flexibilnějším řešením. Zavádí několik funkcí, které definují barevné přechody jako obrázky a lze je tedy použít všude tam, kde je možné použít obrázek (typicky vlastnost background, ale třeba také list-style-image) 40. Je třeba poznamenat, že dokument, který gradienty specifikuje, je označen jako Working Draft a může se tedy ještě značně měnit. Základním typem přechodu je lineargradient,
který umožňuje přechod jedním libovolným směrem i přes více barev.
Směr je možno zadat klíčovými slovy left, right, top a bottom, nebo úhlem ve stupních (zkratka deg). Výchozím směrem je top, což odpovídá 270deg či -90deg , kdy je směr přechodu shora dolů 41. Barvy se pak dají zapsat klasickými CSS3
CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online]. 2010 [cit. 2012-04-08]. Dostupné z: http://interval.cz/clanky/css-3-jak-na-stylovani-pozadi-elementu/ 37
38
CSS3 Multiple backgrounds. When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-09]. Dostupné z: http://caniuse.com/#feat=multibackgrounds 39
Comparison of layout engines (Cascading Style Sheets). In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-04-09]. Dostupné z: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) 40
CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-04-12]. Dostupné z: http://www.w3.org/TR/2011/WD-css3-images20110217/ 41
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 150-151. ISBN 978-098-0846-904.
20
způsoby a je u nich navíc možno určit, do jaké části přechodu budou zasahovat. Konkrétní barevný přechod pak může vypadat třeba takto: background: linear-gradient(left, #f00 0%, #0f0 50%, #00f 100%);
Obrázek 3 - ukázka tříbarevného přechodu pomocí linear-gradient. Zdroj: autor
Jde o přechod zleva doprava, který začíná červenou barvou. Na 50% šířky je dosaženo zelené barvy, která dále přechází do modré. Funkcí, která tento obyčejný gradient rozšiřuje je repeating-lineargradient.
Jak název napovídá, dovoluje tato funkce daný přechod opakovat na
pozadí prvku, čehož je možné využít, pokud je k určení barevných hranic (tzv. colorstops42) použita absolutní jednotka – pixely. background: repeating-linear-gradient(left, #f00 0px, #0f0 100px, #00f 200px, #f00 300px);
V tomto případě jde přechod od červené přes zelenou a modrou zpět k červené a při dvojnásobné šířce objektu (600 px) vypadá výsledek takto:
Obrázek 4 - ukázka tříbarevného přechodu pomocí repeating-linear-gradient. Zdroj: autor
Okrajově zmíním ještě přechody radiální (kruhové či elipsové). U nich je syntaxe o něco složitější, kromě barev je totiž možné specifikovat jejich polohu středu a velikost (tvar). Jelikož na podrobnější rozbor zde není prostor, ukážu alespoň několik možností použití na příkladech. background: background: background: background:
radial-gradient(left top, red,green,blue); radial-gradient(center center, circle, red,green,blue); radial-gradient(center, 60px 100px, red,green,blue); radial-gradient(50px 80px, 20px 20px, red,green,blue);
42
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 135. ISBN 15-932-7286-3.
21
Obrázek 5 - ukázka tříbarevného přechodu pomocí radial-gradient. Zdroj: autor
V zápisu je nejprve určeno místo, kde bude střed přechodu, dále velikost přechodu a jeho barvy. K určení velikosti a tvaru je možno využít několik - v CSS3 jinde nepoužitých - klíčových slov, ovšem jak poznamenává Working Draft, tato se mohou změnit43. Obdobně jako repeating-linear-gradient existuje také repeatingradial-gradient.
Jeho použití je ilustrováno na následující ukázce, která
Obrázek 6 - ukázka tříbarevného přechodu pomocí repeating-radial-gradient. Zdroj: autor
Podpora v prohlížečích Všechny prohlížeče zatím podporují přechody pouze při zápisu se svým vendor prefixem. Firefox od verze 3.6, Internet Explorer od verze 10, Google Chrome od verze 10 (do té doby podporoval jiný, velmi nestandardní zápis). Opera umí lineární přechody od verze 11.1, radiální až od 11.644.
43
CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-04-12]. Dostupné z: http://www.w3.org/TR/2011/WD-css3-images20110217/ When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-13]. Dostupné z: http://caniuse.com/ 44
22
1.2.5 Rámečky a stíny Mezi nejpoužívanější CSS3 vlastnosti patří patrně následující tři: borderradius, box-shadow
a text-shadow. První z nich umožňuje vykreslit u objektu
zaoblené rohy. Základní zápis je opravdu snadný, border-radius: 20px zakulatí všechny rohy objektu v poloměru 20 pixelů. Různý poloměr zaoblení lze nastavit buď samostatnými hodnotami border-top-left-radius, border-top-rightradius, border-bottom-right-radius
a border-bottom-left-radius, anebo
zkráceným zápisem, např. border-radius: 40px 30px 20px 10px. Použití lomítka
(border-radius:
20px/40px)
dovoluje
nastavit
různý
poloměr
horizontálního a vertikálního zaoblení 45. Všechny tři varianty jsou zobrazeny v následující ukázce:
Obrázek 7 - použití vlastnosti border-radius v různých variantách. Zdroj: autor
Vlastnost box-shadow slouží k vykreslení stínu u objektu. Její hodnotou může být jeden či více stínů, jejichž definici uvedu na příkladě box-shadow: 3px 8px 0px 2px #000.
První hodnota je posun doprava (+) či doleva (-), druhá dolů (+)
či nahoru (-). Třetí hodnota určuje poloměr rozostření a čtvrtá rozptyl (vzdálenost, do níž je stín vržen). V zápisu by mohlo být použito ještě klíčové slovo inset, které by indikovalo, že stín je vržen směrem do objektu a nikoli od něj 46. Možnosti stínů jsou krátce shrnuty na následujících příkladech, posledních z nich ukazuje aplikaci i více stínů najednou. box-shadow: box-shadow: box-shadow: box-shadow: box-shadow:
CSS Backgrounds and Borders Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-04-15]. Dostupné z: http://www.w3.org/TR/2012/WD-css3-background20120214/ 46
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 143. ISBN 978-098-0846-904.
23
Obrázek 8 - příklady použití vlastnosti box-shadow. Zdroj: autor.
Téměř stejné určení stínů používá i vlastnost text-shadow, pomocí níž je možné vykreslit stín u textu. Jediným rozdílem je nemožnost použití čtvrté hodnoty (rozptylu) a klíčového slova inset. Jinak i zde platí možnost aplikace více stínů, nevrchněji pak bude ten, jenž je zapsaný jako první 47. text-shadow: 1px 1px 2px #333; text-shadow: 0 0 4px red; text-shadow: 0 0 4px green, 0 0 6px blue; text-shadow: -10px 0px 3px yellow, 10px 0px 3px green, 0px -10px 3px blue, 0px 10px 3px red;
Obrázek 9 - ukázka použití text-shadow. Zdroj: autor
Okrajově zmíním ještě vlastnosti, pomocí nichž lze nechat vykreslit rámeček (border) z obrázku. Jedná se o sadu několika vlastností. Border-image-source určuje klasickým způsobem cestu ke zdrojovému obrázku. Ten je pomocí borderimage-slice
„naporcován“ na části (hodnotou vlastnosti jsou vzdálenosti přímek od
krajů obrázku, které jej rozdělují). Border-image-width nastavuje tloušťku rámečku a border-image-outset umožňuje jeho rozšíření mimo prvek. Způsob zobrazení obrázku lze ještě ovlivnit pomocí border-image-repeat (hodnoty stretch, repeat, round
či space) 48. Všechny tyto vlastnosti se dají zapsat zkráceně
jako border-image v pořadí, v jakém jsou zde představeny. Příklad použití: border-image-source: url(border.png); border-image-slice: 20 20 20 20; border-image-width: 13px; 47
CSS Text Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-04-21]. Dostupné z: http://www.w3.org/TR/css3-text/#text-shadow 48
GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 111-114. ISBN 15-932-7286-3.
24
border-image-repeat: repeat; /* shodné s border-image: url(border.png) 20 / 13px repeat; */ border-image: url(border.png) 20 border-image: url(border.png) 20 /* za druhým lomítkem je použito border-image: url(border.png) 20
Obrázek 10 - zdrojový obrázek (border.png) s průhledným pozadím. Zdroj: autor Obrázek 11 - ukázky použití vlastností border-image. Zdroj: autor
Podpora v prohlížečích Vlastnost box-shadow podporuje Google Chrome od verze 10 (předtím s prefixem), Firefox 4+ (3.5 a 3.6 s prefixem), Opera od verze 10.5 a IE až od verze 10 49. Stín u textu je podporován bez prefixu ve všech prohlížečích z poslední doby, výjimkou je IE, kde funguje až od verze 10 50. U obrázkových rámečků je podpora horší. Bez prefixu a plně je podporuje jen Google Chrome od verze 16 (ovšem dle mých zkušeností s určitými bugy - neumí například round a space). Internet Explorer je nepodporuje vůbec, Firefox od verze 3.5 a Opera od 10.5, ovšem oba pouze ve zkráceném zápisu border-image a s prefixem51.
1.2.6 Animace a přechody Tyto moduly přinášejí do CSS3 možnosti animace a mají potenciál nahradit dosud používanou technologii Flash, ačkoli jsou oba teprve ve fázi Working Draft 52. Přechody (transitions) umožňují plynulou změnu stavu objektu, respektive změnu jeho vlastností. Zápis může vypadat následovně: a{color: black; text-shadow: 0 0 3px rgba(100,100,100,0.4); transition-delay: 0s; When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-22]. Dostupné z: http://caniuse.com/#search=box-shadow 49
When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-22]. Dostupné z: http://caniuse.com/#search=text-shadow 50
When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-22]. Dostupné z: http://caniuse.com/#search=border-image 51
52
CSS3 Module Status. CSS3 . Info: All you ever needed to know about CSS3 [online]. 2012 [cit. 2012-04-21]. Dostupné z: http://www.css3.info/modules/
Výsledkem je, že při najetí myší na odkaz se všechny jeho měněné vlastnosti (barva textu a pozadí, stín, velikost) překreslují plynule po dobu jedné vteřiny, jak ilustruje následující obrázek:
Obrázek 12 - nástin animace pomoci CSS3 transitions. Zdroj: autor
Pomocí vlastnosti transition-delay lze nastavit prodlevu mezi akcí, která animaci spouští, a animací samotnou. Transition-duration určuje délku animace, transition-timing-function
umožňuje definovat, jaký bude její průběh (lineární,
s rychlejším začátkem apod.), a to buď klíčovými slovy, nebo vzorcem. Transition-property
dovoluje nastavit, na které vlastnosti se bude animace
vztahovat, je možné tedy animovat třeba změnu velikosti53. Všechny tyto vlastnosti lze zapsat zkráceně do transition, jak je také uvedeno v příkladu. Animace jsou o něco silnějším nástrojem, jelikož umožňují přímo pohyb objektů a především jednoduché definování vlastního procesu animace. Tím pádem je zápis o něco delší: @keyframes mojeanim { 25% {height: 150px} 50% {opacity:0.5; width: 300px; margin-left: 100px} 75% {height: 50px} } #animovat:hover { animation-name: mojeanim; animation-delay: 0s; animation-direction: normal; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function:ease; 53
CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, s. 17-25. Book apart, no. 2. ISBN 978-098-4442-522
Při najetí na objekt s id „animovat“ se spustí animace s názvem „mojeanim“, která je definována klíčovými snímky (pravidlo @keyframes). V @keyframes je tedy zapsán průběh animace, kterou je možno rozdělit na libovolné množství částí a v nich určit jednotlivé změny vlastností 54. U výše uvedeného příkladu tedy dojde v první čtvrtině animace ke změně výšky objektu na 150 pixelů, v polovině animace k 50% zprůhlednění, změně šířky na 300 pixelů a posunutí objektu o 100 pixelů doprava (zvětšením levého okraje). Nakonec ve třetí čtvrtině animace bude výška přenastavena na 50 pixelů. Ostatní nastavení animace je dáno vlastnostmi přímo svázanými s objektem. Tři z nich jsou obdobné jako u přechodů - animation-delay , animation-duration animation-name,
a
animation-timing-function.
Další
vlastnost,
pochopitelně určuje, jaká animace se má spouštět (může jich
existovat více). Pomocí animation-iteration-count je možné nastavit počet opakování animace (zde je nastaveno nekonečno). Hodnota vlastnosti animationdirection
udává směr animace (kromě obráceného – reverse – lze použít také
alternate
či alternate-reverse pro střídání směrů při opakování animace) 55.
Všechny tyto vlastnosti se dají zapsat do jedné s názvem animation, jak je naznačeno na konci příkladu. Podpora v prohlížečích Všechny prohlížeče podporují oba moduly pouze s vendor prefixy. Google Chrome umí přechody i animace od počátku, naopak Internet Explorer až od verze 10. Firefox vykresluje přechody od verze 4, animace od verze 5. Opera podporuje přechody od verze 10.5, podpora animací přijde pravděpodobně až s verzí 1256 57.
54
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 191-192. ISBN 978-098-0846-904. 55
GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s. 192-195. ISBN 978-098-0846-904. When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-25]. Dostupné z: http://caniuse.com/#feat=css-transitions 56
When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-25]. Dostupné z: http://caniuse.com/#feat=css-animation 57
27
1.2.7 Další moduly CSS3 dále rozpracovává a specifikuje mnoho dalších oblastí, kterým se věnují jednotlivé moduly. Z těch nejdůležitějších jsou to například specifikace layoutu (fáze Candidate Recommendation), fontů (Working Draft) či jmenných prostorů (Recommendation). Zajímavostí může být modul týkajících se běžících textů, které se hojně vyskytovaly v začátcích HTML. Ten je ve stádiu Candidate Recommendation 58.
58
CSS3 Module Status. CSS3 . Info: All you ever needed to know about CSS3 [online]. 2012 [cit. 2012-04-25]. Dostupné z: http://www.css3.info/modules/
28
2 Praktická část 2.1
Cíl praktické části
Cílem praktické části práce jsou dva hlavní body, které spolu úzce souvisí. Zatímco první z nich je vidět na první pohled, ten druhý nikoli, avšak bez něho nelze prvního docílit. Jedná se zaprvé o přepracování vzhledu uživatelského rozhraní: Cílem je především použitelnost a intuitivní ovládání. Velký důraz je kladen na optimalizaci pro různé typy a verze prohlížečů. Díky CSS3 je dále možné dodat webu moderní a svěží vzhled, což ocení především mladší uživatelé, tedy studenti. Vzhled systému by měl být relativně jednoduchý, ne však strohý. Mělo by z něho být patrné, že se jedná o originální aplikaci, která vznikla přímo na VOŠIS a do jisté míry ji i reprezentuje. Druhým bodem jsou potřebné úpravy HTML kódů. Aby bylo možné v CSS3 vytvořit vzhled, který by splňoval podmínky výše, je jednoznačnou podmínkou mít moderní, čistý a správně strukturovaný HTML kód. Jak vyplývá už z názvu, kaskádové styly jsou založeny právě na dobře logicky strukturovaném HTML kódu stránky, díky kterému lze jednotlivé prvky pohodlně stylovat. Styly lze sice aplikovat i na zastaralé stránky, avšak s mnohem menší efektivitou, a proto je prvotním cílem přepracovat hlavní části zdrojového HTML kódu stránek a na něj pak aplikovat vzhled pomocí CSS3.
2.2
Popis výchozího stavu systému
Zdrojový kód systému v původní podobě je značně nekonzistentní a nepřehledný, jeho strukturovanost je špatná. Používá již velmi zastaralý, tzv. tabulkový layout, při kterém je celá stránka definována jako tabulka a jednotlivé prvky (hlavička, menu, obsah…) jsou zasazeny v jejich buňkách. Tento způsob tvorby webu má mnohé nevýhody59 a je dnes již překonaný. Na zdrojovém HTML kódu je patrné, že není ručně psaný, tedy že je generovaný tzv. WYSIWYG editorem (WYSIWYG je v angličtině zkratkou slov What You See Is What You Get, tedy
volně přeloženo „Co vidíte, to dostanete“. Jedná se o „schopnost DTP programů a textových procesorů pracovat v interaktivním režimu, při kterém se dokument zobrazuje na obrazovce v podobě, jakou bude mít při tisku, a veškeré zásahy v upravovaném dokumentu se ihned promítají do jeho zobrazení.“60). Autor tedy nemusí psát přímo zdrojový kód webových stránek, ale jednotlivé prvky je možno přímo umisťovat na stránku bez znalosti programovacích jazyků. Výsledný kód je tudíž generován programem a zpravidla nelze docílit jeho úplné „čistoty“ a validity, nemluvě o přehlednosti. Dalším důvodem horší přehlednosti HTML kódu je už sama podstata stránek – jedná se totiž o webovou aplikaci v PHP, kde je nemalá část obsahu generována právě tímto programovacím jazykem. To opět snižuje přehlednost výsledného kódu. Jednotlivé podstránky systému jsou si dost podobné, obsahují prakticky totožnou hlavičku (záhlaví, tedy logo a ovládací prvky) a patičku (zápatí se stručnými informacemi). Právě hlavička je z pohledu vzhledu a zdrojového kódu patrně nejslabší částí aplikace. Obsahuje obrovské množství přebytečného HTML kódu, jehož přítomnost a interpretace nemá žádný smysl. Aplikace je tvořena celkem 347 soubory, ne všechny jsou však ve skutečnosti nutné k jejímu provozu, neboť je stále vyvíjena a některé tak slouží jen k testování, případně se jedná o starší verze. Celková velikost všech těchto souborů činí 3,1MB. Celkově je na systému znát, že při jeho tvorbě byla na prvním místě funkčnost, které bylo třeba dosáhnout v krátkém čase a na vzhled nebyl kladen tak velký důraz.
Obrázek 13 - náhled původní domovské stránky rezervačního systému. Zdroj: autor
BALVÍNOVÁ, Alena. WYSIWYG. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, 2003- [cit. 2012-03-26]. Dostupné z: http://aleph.nkp.cz/F/?func=direct&doc_number=000000275&local_base=KTD. 60
30
2.3
Popis postupu redesignu
V této kapitole jsou rozebrány jednotlivé fáze a části změn, které jsem v systému provedl. Je zde popsán jejich význam a přínos oproti původnímu stavu aplikace.
2.3.1 Použité technologie a kompatibilita Při návrhu vzhledu webové stránky je vždy důležité mít na paměti otázku kompatibility napříč prohlížeči. Tento problém se většinou týká starších prohlížečů, v kontextu CSS3 jde především o Internet Explorer verze 7 a 8. Jejich podpora CSS3 je prakticky nulová a obsahují chyby i v podpoře některých starších vlastností CSS. V teoretické části jsem okrajově zmínil nástroje, pomocí kterých lze podporu určitých funkcí doplnit a zde uvedu jejich konkrétní použití při redesignu systému. Prvním z takových nástrojů je skript Selectivizr. Jedná se o plugin, který ve spolupráci s javascriptovou knihovnou (např. jQuery) dovede do Internet Exploreru 6 až 8 implementovat funkce CSS3 selektorů. Ačkoli právě jQuery je již na webu použita pro zajištění správné funkčnosti menu, nelze ji v tomto případě použít pro spolupráci se Selectivizrem. Jak totiž uvádí tabulka podpory, ve spojení s jQuery nefungují selektory založené na pořadí prvků, které jsem při redesignu ve značné míře použil. Z tohoto důvodu jsem se rozhodl pro knihovnu NWMatcher, která je podporována plně 61. Samotné použití skriptu je velmi snadné, stačí vložit jeho inicializaci do hlavičky stránky. Konkrétně tedy vypadá kód takto:
První a poslední řádek jsou takzvané podmíněné komentáře v IE, pomocí kterých je možné určit, že na kód mezi nimi bude brát zřetel pouze Internet Explorer od verze 6 do verze 8 včetně, ostatní prohlížeče jej budou ignorovat jako komentář. Díky tomu budou skript načítat pouze ty prohlížeče, kterým je určen. Druhý řádek načítá javascriptovou knihovnu, která zajišťuje chod pluginu, a třetí samotný plugin. Ten pak v CSS souboru vyhledá definice, u kterých je použit CSS3 selektor a vybere daný prvek na stránce náhradním způsobem - pomocí javascriptu. 61
Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online]. 2012 [cit. 2012-03-27]. Dostupné z: http://selectivizr.com/
31
Druhým externím skriptem použitým při redesignu pro zajištění podpory ve starších IE je CSS3Pie. Ten dokáže v IE simulovat několik CSS3 vlastností, především grafických efektů. Podstatou se tedy liší od Selectivizru, který zajišťuje, aby se na starší IE dané vlastnosti vůbec aplikovali. CSS3Pie dané vlastnosti (efekty) přímo vykresluje pomocí externího .htc souboru, který rozšiřuje CSS soubor přes vlastnost behavior 62. Mezi simulované vlastnosti, použité při redesignu patří následující: border-radius, box-shadow a linear-gradient. Ukázka kódu vypadá takto: .topnav ul li ul {... border-radius:5px; box-shadow: 0px 0px 3px #000; behavior: url(soubory/styl/pie/PIE.php); }
Jsou zde klasické definice dvou CSS3 vlastností a na posledním řádku následuje zavolání skriptu. Ten detekuje, zda jsou v definici nějaké CSS3 vlastnosti a následně je vykreslí. CSS3Pie používá ještě vlastní speciální vlastnost –pie-background, do které je možné vložit hodnotu linear-gradient: input[type="submit"] {... background: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); behavior: url(soubory/styl/pie/PIE.php); }
V tomto případě se tedy postará o vykreslení hodnoty druhé vlastnosti. Třetí použitou technikou jsou filtry, konkrétně filtr barevného přechodu a průhlednosti. Opět platí, že se jedná o nástroj dostupný pouze v IE, což je v dané situaci ideální. Nastavení filtrů se zapisuje přímo do CSS souboru, jejich syntaxe je však značně odlišné od běžného CSS. Příkladem budiž následující ukázka: #content h2 {... background: #598299; background: -webkit-gradient(linear, left top, left bottom, from(#598299), to(#264F66)); /* Saf4+, Chrome */ background: -webkit-linear-gradient(top, #598299, #264F66); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -moz-linear-gradient(top, #598299, #264F66); /* FF3.6 */
Prohlížeče, které podporují linear-gradient, vykreslí barevný přechod v pozadí elementu dle hodnot uvedených v daném background, zatímco v IE 6-9 se aplikuje filtr. Výsledek je téměř totožný. Obecně platí, že při snaze o maximální podobnost webu ve starších IE a moderních prohlížečích je nutné být opatrný. Filtry často nadměrně zatěžují prohlížeč, externí nástroje zase nemusí být vždy stoprocentně kompatibilní (např. CSS3Pie má mnoho omezení63). Je tedy na místě zamyslet se, zda je ona funkčnost či efekt ve starém IE opravdu potřeba. A pokud ano, pak ji pečlivě vyzkoušet.
2.3.2 Celkový layout Před samotným začátkem redesignu bylo třeba položit si otázku, jak má vlastně web celkově vypadat, jaké má být rozložení jednotlivých objektů. Tradiční layout stránky tvoří hlavička, navigační prvky, obsah a patička. Samotné uspořádání samozřejmě závisí na typu stránky a množství obsahu. Některé jednoúčelové (například reklamní) weby se snaží o maximální originalitu a překvapení uživatele, a tak tuto zaběhnutou tradici boří, celkově ale platí, že tohoto klasického rozdělení se drží drtivá většina webových stránek. Hlavním důvodem je pravděpodobně to, že uživatelé jsou na to takto zvyklí již od dob používání rámců (zastaralá technika pro definování layoutu stránky pomocí tagů frame). Z výše uvedených základních částí webu je patrně nejvariabilnější menu (či obecně navigační prvky). Jeho umístění, velikost a styl se odvíjí především od množství položek, které obsahuje, potažmo tedy od velikosti webu. Vzhledem k tomu, že předmětem redesignu je webová aplikace používaná určitou skupinou lidí a není tudíž primárním účelem zaujmout návštěvníka a Known Issues. CSS3 PIE: CSS3 decorations for IE [online]. 2011 [cit. 2012-03-27]. Dostupné z: http://css3pie.com/documentation/known-issues/ 63
33
originálním vzhledem ho přimět k další návštěvě, rozhodl jsem se pro zachování klasického rozložení. Důležité je totiž především přehlednost systému a rychlá orientace v něm. Hlavní otázkou bylo tedy umístění menu. Rozhodl jsem se ho zachovat jako horizontální lištu, jako tomu bylo v původním vzhledu systému, ovšem mým záměrem bylo udělat z něj spíše součást hlavičky. Umístění menu do hlavičky považuji v tomto konkrétním případě za vhodné ze dvou hlavních důvodů. Prvním je fakt, že základ menu tvoří poměrně málo položek (jejich počet se mění podle role přihlášeného uživatele), které obsahují podpoložky. Situování takto větveného menu do strany by výrazně zmenšovalo prostor pro obsah webu a vzhledem k tomu, že ten je z drtivé většiny tvořen širokými tabulkami, by bylo takové umístění velmi nepraktické. Volba horizontálního menu v původním vzhledu mi tedy připadá logická a vhodná. Je však třeba mít na paměti fakt, že velké množství uživatelů používá v dnešní době zařízení se širokoúhlou obrazovkou. Konkrétně tzv. netbooky (především první modely) disponují rozlišením pouhých 1024x600 pixelů, přitom jsou u studentů poměrně oblíbené. Je tedy třeba maximálně omezit i výšku obsahově méně podstatných částí webu, jako je hlavička. Proto jsem se rozhodl do ní přímo vložit zmíněné horizontální menu a celkovou výšku hlavičky s menu snížit z původních 204 pixelů na 150 pixelů, jak ukazuje následující obrázek:
Obrázek 14 - porovnání výšky hlaviček před a po redesignu. Zdroj: autor
Pro podobnou minimalizaci jsem se rozhodl i u patičky, jelikož obsahuje naprosté minimum obsahu (prakticky jen jméno školy): Došlo u ní ke zmenšení ze 106 pixelů na 48 pixelů výšky. Co se týče celkové šířky layoutu, přihlédl jsem opět k stále ne bezvýznamnému množství uživatelů s šířkou rozlišení 1024 pixelů (podle statistik
34
největšího českého serveru měřícího statistiky návštěvnosti je to kolem 15% 64) a nastavil proto její minimální hodnotu na 1000 pixelů. Protože však systém obsahuje velké množství tabulkových výpisů, které jsou na šířku náročné, je při vyšším rozlišení šířka celého webu počítána relativně, konkrétně jako 80 % z šíře okna prohlížeče. V souvislosti s tímto rozměrovým rozvržením webu je klíčový fakt, že dosavadní HTML tabulkový layout, zmíněný v popisu výchozího stavu systému, bude předělán na HTML layout složený z několika málo tagů div, jejichž struktura vypadá následovně:
Základem je oddíl pojmenovaný „page“, kterým je obalen celý web. To umožňuje nastavit některé globální vlastnosti, které jsou podrobněji popsány dále v kapitole Základní společné prvky. Obsahem oddílu jsou tři základní části webu („header“, „content“ a „footer“, menu je součástí headeru, tedy hlavičky), které jednoduše následují pod sebou.
2.3.3 Základní společné prvky V této kapitole postupně popíši prvky, které jsou společné pro jednotlivé podstránky systému. Tím základním je celkové pozadí stránky. Jedná se o fotografii školy, upravenou tak, aby nepůsobila rušivě a přitom vzhled webu oživovala. Symbolizuje fakt, že se jedná o rezervační systém, který vznikl přímo na této škole a měl by vzhledu dodávat originalitu a osobitost. Fotografie má velikost 80 Kb - je optimalizována tak, aby nebyla náročná na datové přenosy. Pomocí CSS zápisu body {background: url('bg.jpg') center top no-repeat fixed;}
je umístěna na
horizontální střed obrazovky, díky čemuž se volně přizpůsobuje rozlišení (čím vyšší rozlišení, tím větší část z ní je vidět). Definice fixed určuje, že se při posunu posuvníkem nehýbe společně se stránkou, ale zůstává na jednom místě.
Jak už jsem zmínil výše, layout je postaven na hlavním oddíle, který obsahuje jednotlivé části stránky. Díky této technice lze jednoduše nastavit šířku webu a jeho zarovnání na střed prohlížeče. Tyto věci samozřejmě zajistí CSS, konkrétně tento zápis:
% šíře okna prohlížeče (minimálně však 1000 pixelů), automatické vypočítaní levého a pravého okraje (v praxi ono vystředění) a dále nastavuje pomyslný počátek souřadnic, vzhledem ke kterému bude počítáno případně absolutní pozicování. CSS3 vlastnost box-shadow ještě určí, že kolem celého těla stránky bude vykreslen stín, pokud prohlížeč tuto možnost podporuje. Protože efekty stínů jsou jednou z nejpříjemnějších novinek CSS3, rozhodl jsem se je použít ve větší míře. V designu je využita například technika přidávání efektu (v tomto případě stínu) pomocí CSS selektoru :before 65. Jedná se o následující kus kódu: body:before {content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; z-index: 100; box-shadow: 0px 0px 10px rgba(0,0,0,.8); }
Selektory :before a :after byly uvedeny již v CSS2 a jedná se o způsob, jak pomocí CSS přidávat na stránku obsah (vlastnost content) před či za určitý prvek. Dají se však dobře použít i pro přidávání efektů, jako jsou právě stíny. Ani v tomto konkrétním případě nepřidáváme obsah žádný (uvozovky jsou prázdné), pouze určíme, že prvek bude mít šířku přes celou stránku, výšku 10 pixelů, nebude posunován společně se stránkou a to hlavní – že bude vrhat stín. To celé se děje na úplném začátku stránky, ještě před tagem body. Vzniká efekt, při kterém je stránka jakoby zapuštěna pod úrovní ovládacích prvků prohlížeče, jak dokládá následující obrázek:
Obrázek 15 - ukázka stínu vloženého pomocí body:before. Zdroj: autor
Jedním z nejvýraznějších prvků webu je nadpis aktuální stránky. Tvoří předěl mezi hlavičkou a obsahem jednotlivých podstránek. Nese důležitou informaci o tom, kde se uživatel právě nachází, a proto by pod graficky nápadnou hlavičkou neměl 65
How to create slick effects with CSS3 box-shadow. RedTeamDesign [online]. 2011 [cit. 2012-0405]. Dostupné z: http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
36
zapadnout. Z těchto důvodů je na něj aplikováno hned několik CSS3 prvků, které jsou vidět v následujícím kódu: #content h2 { background: #598299; background: linear-gradient(top, #598299, #264F66); box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); text-shadow: 0px 1px 1px #739CB2; ... }
První CSS3 vlastností, která je na nadpis aplikována, je barevný přechod (anglicky gradient, výraz se někdy používá i v češtině) v jeho pozadí. Uvedená hodnota vlastnosti určuje, že se jedná o lineární přechod shora dolů za použití dvou barev - počáteční a koncové (CSS3 specifikace umožňuje použití i více barev 66). Pro případ, že by prohlížeč barevný přechod nepodporoval, je zde ještě definice background: #598299,
která zajišťuje alespoň jednolitou barvu pozadí. Dále jsou
zde na pozadí nadpisu použity tři stíny. První je obyčejný černý poloprůhledný, vržený směrem dolů. Druhý a třetí obsahují klíčové slovo inset, které indikuje, že se jedná o vnitřní stín, tedy směrem dovnitř prvku. Zatímco druhý je bílý, ze tři čtvrtin průhledný, třetí je černý s podobnou průhledností. Kombinace těchto stínů způsobuje plastický efekt, při kterém celý působí vypoukle a nápadněji. Poslední CSS3 vlastností, která je zde použita je text-shadow, která zajišťuje stín samotného textu. Nastavením jeho barvy na světlejší odstín než má samotné písmo a pozadí je dosaženo také zajímavého efektu, při kterém je text jakoby vytlačen do hloubky. Celý nadpis pak vypadá například takto:
Obrázek 16 - nadpis s použitím efektů CSS3. Zdroj: autor
66
CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2011 [cit. 2012-04-05]. Dostupné z: http://www.w3.org/TR/2011/WD-css3-images20110217/
37
Mezi společné prvky patři bezesporu i pozadí obsahu podstránek, tedy oddílu content.
Je zvoleno tak, aby pod ním lehce prosvítala fotografie na úplném pozadí
stránky, ale přitom byla zachována maximální přehlednost. Toho je docíleno nastavením barevného přechodu z téměř neprůhledné modré do téměř úplně průhledné modro-šedé (v druhé variantě jde o zelené odstíny). #content {... background: linear-gradient(top, rgba(145, 187, 208,0.9), rgba(38, 79, 102,0.1)); }
Výsledek vypadá v kombinaci s nadpisem takto:
Obrázek 17 - náhled pozadí hlavní části podstránky. Zdroj: autor
Dalším prvkem, který se v systému poměrně často vyskytuje, jsou formulářová pole. I k jejich stylování je výrazně využito CSS3. Definici jejich vzhledu lze rozdělit do dvou částí. První z nich je aplikována na všechna textová pole, zaškrtávací políčka i odesílací tlačítka (tagy input a textarea) a nastavuje jim nejprve jednopixelový vystouplý rámeček a třípixelový vnitřní okraj a dále CSS3 vlastnosti. Těmi jsou zaoblené rohy, stín pod polem a přechod z bílé do světle šedé (pokud toto prohlížeč nepodporuje, zůstane u načtení obrázku bg-form.png, který tento přechod simuluje). Po najetí myší, či zaměření prvku klávesou TAB (:focus ) se pozadí změní na bílou a rámeček „promáčkne“. input, textarea {border: 1px outset #aaa; padding: 3px;
Toto nastavení je částečně přepsáno následujícím kódem, který se však aplikuje pouze na odesílací tlačítka (tedy tagy input, jež mají v atributu hodnotu submit). input[type="submit"] {color: #0D364C; text-shadow: 0px 1px 1px #739CB2; font-weight: bold; position:relative; padding: 5px 15px; border: none; background: #598299; background: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); behavior: url(soubory/styl/pie/PIE.php); } input[type="submit"]:hover, input[type="submit"]:focus {-piebackground: #638CA3; background: #638CA3; border: none;}
Zajišťuje přebarvení na modrý (ve druhé variantě zelený) přechod, a to i ve starších IE pomocí CSS3Pie. Mění také barvu textu tlačítek a přidává stejný stín textu, jaký je použit u nadpisů úrovně h2. Při aktivování je pozadí tlačítka změněno na světle modrou barvu.
Obrázek 18 - ukázka formulářových prvků nastylovaných s využitím CSS3. V prvním řádku výchozí zobrazení, ve druhém při aktivaci myší (:hover). Zdroj: autor
Posledním společným prvkem, který zde zmíním, jsou běžné odkazy. I na ně jsou použity CSS3 efekty, konkrétně nenápadný stín (jednopixelový) a vlastnost transition,
která zajistí plynulý dvouvteřinový přechod stavu při najetí na odkaz
myší (tedy postupné „rozsvícení“ z tmavě modré barvy do bílé). Zdrojový kód je následující: a {color: #002940; text-shadow: 0 0 1px rgba(100,100,100,0.4); transition: all 0.2s ease-in-out; }
Z popisu obecných prvků designu je to vše a dále se věnuji jednotlivým větším částem.
2.3.4 Hlavička stránek Jak už jsem naznačil v popisu výchozího stavu systému, hlavička každé stránky je obsažena přímo v daném souboru přesto, že je prakticky všude stejná. V moderních PHP aplikacích bývá zvykem v takovém případě využít možnosti tzv. includování (vkládání jednoho souboru do druhého). To umožňuje mít na serveru jeden soubor, ve kterém je uložena hlavička webu, který se vkládá do všech podstrání. Hlavní výhodou je nejen úspora místa (hlavička je na serveru pouze jednou), ale především snadná editace – potřebnou změnu stačí udělat na jednom místě a projeví se všude. Tato metoda includování stejných či podobných částí stránek zde není použita, v rámci změn zdrojového kódu ji budu implementovat. Na samotném kódu hlavičky je nejvíce znát použití zmiňovaného WYSIWYG editoru. Tato jednoduchá část stránky, která obsahuje prakticky jen pozadí, logo, přihlašovací formulář a menu je totiž kódována jako tabulka s několika desítkami buněk. Přitom použití tabulky není nutné a už vůbec ne vhodné. Vykreslení takové tabulky trvá prohlížeči o mnoho déle než vykreslení tzv. „DIV layoutu“67, který je i mnohem úspornější na zápis zdrojového kódu. Původní kód hlavičky měl zhruba 170 řádků, velikost 9kB a jeho část vypadala například takto:
Obrázek 19 - původní zdrojový kód hlavičky – část. Zdroj: autor
), které obsahují pouze obrázek (). Ten je však průhledný, prázdný a nemá na vzhled stránky žádný vliv. Všechny tyto prvky však musí prohlížeč zpracovat a vykreslit, což prodlužuje dobu načítání stránky. Z těchto důvodů jsem HTML kód celé hlavičky přepsal do následující (značně jednodušší) podoby:
Obrázek 20 - nový zdrojový kód hlavičky. Zdroj: autor
Včetně skrytého PHP kódu má hlavička necelých 40 řádků a velikost 1,3kB. Místo tabulky je definován oddíl header, který obsahuje logo (id logo), odkazy na externí zdroje (sks.cz a klimanek.sks.cz) a generátor nových hesel (id extlink-box). Dále je pomocí PHP kódu vkládán buď přihlašovací formulář, nebo nick přihlášeného uživatele (id login-box), a nakonec menu dle oprávnění role uživatele (class topnav). Kromě zmíněných úprav HTML je nutné provést ještě některé související funkční úpravy PHP kódu. Soubory aplikace se nacházejí v různých podadresářích (například /student či /ucitel). Aby bylo možné vkládat do každého ze souborů stále stejný soubor s hlavičkou, je nutné v ní zadat adresy v takovém tvaru, aby byly funkční pro různé úrovně adresářů. V původní verzi aplikace je toto zanedbáno, a proto při prohlížení souboru v podadresáři student (např. seb.sks.cz/student/ucet.php) a kliku na logo dojde k nenalezení hlavní stránky index.php. Systém se ji totiž pokouší najít v podadresáři student, místo v kořenovém adresáři. Tento problém lze odstranit absolutní adresací (tedy zapsaní odkazu s celou doménou), což však není vhodné z důvodu možné změny doménového jména. Lepším řešením je použití PHP
41
proměnné $_SERVER[„HTTP_HOST‟], která název aktuální domény obsahuje. Takto pozměněný kód hlavičky jsem vložil do souboru header.php a uložil jej do podadresáře soubory. Vložení do každé stránky pak zajistí následující PHP kód, který je třeba zapsat do všech souborů, kde se má hlavička objevit: .
Nyní je s upraveným kódem hlavičky možno naplno využít sílu CSS. Vzhled celého oddílu s hlavičkou je definován takto: #header {position: relative; background: url('bg-header.jpg') no-repeat; width: 100%; margin: 0px auto; height: 150px;}
Vlastnost position: relative umožňuje následné absolutní napozicování prvků v hlavičce (odkazy, přihlašovací formulář, menu) relativně k její pozici a rozměrům. Dále je nastaven obrázek na pozadí, jehož tématiku (otevřená kniha) jsem zvolil tak, aby symbolizovala praktický účel systému. Následuje definice šířky, výšky a vystředění. Důležitým prvkem v hlavičce je logo: #logo {display: inline-block; background: url('logo.png') norepeat 20px 0px; width: 432px; padding: 0px 20px 10px; height: 86px;} #logo:hover {animation: houp 3s 1;}
Jak je vidět z HTML kódu o něco výše, ve skutečnosti se jedná o odkaz, proto je nutné jej nejdříve přepnout na poloblokový element ( display: inline-block), aby bylo možné mu dále nastavit pozadí (to je samotné logo – obrázek ve formátu PNG s průhledným pozadím) a rozměry. Pomocí selektoru :hover (událost najetí myší) pak na logo aplikujeme CSS3 animaci s názvem houp a určujeme, že bude trvat 3 vteřiny a bude vykonána jednou. Její definice je zapsána na jiném místě CSS souboru následovně: @keyframes houp { 0% {transform: rotate(0deg); opacity:1;} 20% {transform: rotate(-6deg);} 40% {transform: rotate(6deg);} 60% {transform: rotate(-3deg); opacity:0.3;} 80% {transform: rotate(3deg);} 100% {transform: rotate(0deg); opacity:1;} }
Tímto je popsán průběh jednoho cyklu animace. Dochází k postupné rotaci prvku pomocí vlastnosti transform a změně průhlednosti prvku vlastností opacity: od najetí myší na prvek do 1/5 doby animace (tři vteřiny) bude prvek pootočen o šest 42
stupňů proti směru hodinových ručiček, druhou pětinu naopak o šest stupňů po směru hodin (oproti původní poloze). Ve třech pětinách animace se objekt opět pootočí na druhou stranu (o tři stupně). Zároveň do této doby animace došlo k postupnému snížení „neprůhlednosti“ (opacity) ze 100 % na 30 %. Od toho okamžiku je neprůhlednost opět zvyšována až na 100 %. Celkově postupné snižování míry rotace a střídání stran způsobuje efekt pomyslného houpání. Je třeba poznamenat, že se jedná o demonstraci možností CSS3 animací, samotná vhodnost animace loga je samozřejmě subjektivní záležitost.
Obrázek 21 - ukázka náklonu a poloprůhlodnosti loga v průběhu animace. Zdroj: autor.
Dalším prvkem hlavičky jsou tři odkazy v její horní části. Jejich vzhled je dán následovně: #extlink-box {position: absolute; right: 210px; top: 5px;} #extlink-box a {color: #000; display:inline-block; margin: 0px 3px; text-shadow: none;} #extlink-box a:nth-of-type(3) {margin-left: 50px}
Box s odkazy je absolutně napozicován k pravému hornímu okraji hlavičky, barva odkazů je nastavena na černou a odkazy jsou přepnuty na poloblokové zobrazování, aby bylo možné jim nastavit 3pixelový okraj z levé i pravé strany. Na posledním řádku kódu je použit CSS3 selektor. Pomocí něho je vybrán třetí odkaz, kterému je nastaven větší levý okraj (jedná se o odkaz na stránku generující nové heslo a jeho odsunutí od odkazů na externí zdroje). Absolutní pozicování je využito i u přihlašovacího formuláře: #login-box 5px; text-align: #login-box #login-box
Div je opět umístěn do pravého horního okraje, jeho obsah je zarovnán k pravé straně a barva písma nastavena na černou. Dále je nastavena šířka formulářových polí, okraje mezi nimi a tučnost písma jejich popisků. Na celý box je opět aplikována třívteřinová animace, tentokrát jednodušší: 43
Pravidlo keyframes s názvem fadein zde určuje prosté zvýšení hodnoty vlastnosti opacity z 0 % na 100 %. Výsledkem je efekt postupného objevení se prvku. Poslední, avšak stěžejní součástí hlavičky je menu. Jeho CSS kód by se dal rozdělit na funkční a vzhledovou část. Funkční zde nebudu rozebírat, jelikož se jedná o převzatý plugin Superfish, který funguje ve spolupráci s javascriptovou knihovnou jQuery, a který se nacházel již v původním systému. Navíc i samotná vzhledová část je poměrně rozsáhlá. Následující kód určuje pouze vzhled oddílu, ve kterém je menu obsaženo: .topnav { width:100%; font: normal 19px georgia,verdana; padding: 0; margin:0; position: absolute; z-index: 3; bottom: 0px; left: 0px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -5px 30px rgba(0,0,0,0.3); animation: fadein 1s; background: url('bg-transpb85.png') repeat; background: rgba(20, 20, 20, 0.5); /* ...definice pro jednotlivé prohlížeče... */ background: linear-gradient(top, rgba(20,20,20,0.2), rgba(20,20,20,0.9)); }
Menu je opět absolutně napozicováno, a to k dolnímu okraji hlavičky. Zabírá její celou šířku, výška je počítána automaticky dle jeho obsahu. Text (včetně odkazů) má velikost 19 pixelů a je použit font Georgia. Následuje několik CSS3 prvků. Tím prvním je poměrně složitý stín, složený ze čtyř složek, z nichž tři jsou vnitřní (klíčové slovo inset), a jeden vnější. Jejich vykreslením je docíleno lehce plastického (vypouklého) efektu, stejně jako u nadpisu popsaného v předcházející kapitole. Dále je zde aplikována již zmíněná animace fadein, ovšem pouze o délce jedné vteřiny, aby nebránila použití důležitých ovládacích prvků. V praxi je tento efekt málo postřehnutelný, jelikož současné prohlížeče ještě nejsou pro CSS3 animace plně optimalizovány. Vlastnosti background nastavují vzhled pozadí, a to s maximálním ohledem na kompatibilitu: První definice nabízí prohlížečům obrázek PNG s poloprůhledným pozadím, ten je funkční téměř ve všech současných 44
prohlížečích. Pokud prohlížeč umí barevný model RGBA, pak její hodnotou přepíše zmíněný obrázek. Třetí variantou, která funguje ve všech moderních prohlížečích, je linear-gradient
– „přechod“ z více průhledné šedé do méně průhledné.
Následující zápis formátuje vzhled obsahu výše popsaného oddílu, který menu drží. .topnav li {float:left; padding:0 10px; list-style-type:none;} .topnav li a {color:#fff; display:block; float:left; padding:14px 25px; text-decoration:none; text-shadow: 0 0 1px rgba(20,20,20,0.7), 0 0 3px rgba(20,20,20,0.7), 0 0 4px rgba(20,20,20,0.7), 0 0 5px rgba(20,20,20,0.7), 0 0 6px rgba(20,20,20,0.7); transition: all 0.3s ease-in-out; behavior: url('soubory/styl/pie/PIE.php'); }
První řádek pracuje s jednotlivými položkami menu (v HTML
): určuje, že každá z nich bude obtékána (ve výsledku tedy budou v jednom řádku), bude mít vnitřní levý a pravý okraj 10 pixelů a nebude před nimi zobrazována žádná odrážka (symbol, kterým je jinak uvozena každá položka seznamu, typicky kolečko). Hodnoty v definici .topnav li a pak určují konkrétní vzhled textu odkazů. Je jim nastavena bílá barva a vnitřní okraj, zrušeno podtržení a přiřazen poměrně složitý stín. Skládáním jeho složek je dosaženo efektu postupného slábnutí stínu, což je dobře vidět zvláště při najetí myší na odkaz. Z CSS3 je zde dále použita vlastnost transition,
tedy přechod. Hodnota all 0.3s ease-in-out určuje, že všechny
změny vlastností objektu (například při najetí myší) budou po dobu tří desetin vteřiny plynule měněny. Výsledkem je tedy jednoduchá animace přechodu od jednoho stavu (vzhledu) k druhému. Poslední řádek kódu aktivuje skript CSS3Pie, získá však význam až při stylování jednotlivých odkazů se selektorem :hover (najetí myší), které je popsáno o něco dále. Protože při přihlášení uživatele v roli vedení je menu značně obsáhlejší, je třeba ještě ošetřit velikost položek tak, aby se do menu vešly. O to se postará následující CSS kód, který zmenšuje písmo odkazů a jejich vnitřní okraj: .topnav .vedeni {font-size: 16px; } .topnav .vedeni li a {padding: 14px 10px}
Celkový pohled nepřihlášeného uživatele na hlavičku systému pak vypadá následovně: 45
Obrázek 22 - náhled hlavičky v základním stavu. Zdroj: autor
Na samotné menu se však větší část CSS3 vylepšení aplikuje až při najetí myší na odkaz: .topnav ul li a:hover { background: #598299; text-decoration:none; border-radius:5px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -5px 30px rgba(0,0,0,0.3); background-image: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); }
Tento kód zajistí, že odkaz se podbarví barevným přechodem, který je ještě překryt obdobným stínem jako celé menu, a jeho rohy budou zaobleny v poloměru 5 pixelů. Poslední
řádek
kódu
zajišťuje
barevný
přechod
i
v Internet
Exploreru,
prostřednictvím CSS3Pie. Prvních pět položek menu první úrovně (většina uživatelů jich ani více k dispozici nemá) je navíc podbarveno různou barvou, aby byly demonstrovány možnosti selektoru :nth-of-type(n). Pomocí toho je totiž vybrán n-tý prvek a u něj jsou přenastaveny barvy pozadí, určené výše v .topnav ul li a:hover: .topnav ul li:nth-of-type(2) a:hover {background: #829959; background-image: linear-gradient(p, #829959, #4F6626); -pie-background: linear-gradient(top, #829959, #4F6626); } .topnav ul li:nth-of-type(3) a:hover {background: #EB7829; background-image: linear-gradient(p, #EB7829, #C35001); -pie-background: linear-gradient(top, #EB7829, #C35001); } .topnav ul li:nth-of-type(4) a:hover {background: #C03B39; background-image: linear-gradient(top, #C03B39, #8C0805); -pie-background: linear-gradient(top, #C03B39, #8C0805); } .topnav ul li:nth-of-type(5) a:hover {background: #995982; background-image: linear-gradient(top, #995982, #66264F); -pie-background: linear-gradient(top, #995982, #66264F); }
46
Dohromady s podbarvením všech jednotlivých podmenu stylem .topnav .topnav .topnav .topnav
pak celá hlavička s aktivním menu vypadá například takto:
Obrázek 23 - náhled hlavičky s vysunutou položkou menu č. 3. Zdroj: autor
Obrázek 24 - náhled hlavičky s vysunutou položkou menu č. 4. Zdroj: autor
2.3.5 Úvodní stránka Na úvodní stránce je zobrazena hláška o pilotním režimu systému, případně novinky od učitelů, pokud nějaké jsou. Vzhled obou informací určuje především třída .content, která je použita v hlavní části všech podstránek. Tvoří podklad pod jakýmkoli textem či jiným obsahem, aby zlepšila jeho čitelnost na poloprůhledném pozadí. .content {margin: 35px auto 50px; width:600px; padding: 10px; border-radius:5px; box-shadow: 1px 1px 3px #555, 0px 0px 2px #333 inset; background: linear-gradient(-45deg, rgba(175, 204, 186, 0.6), rgba(224, 236, 230,0.2)); }
Z CSS3 je zde použit border-radius, který zakulacuje všechny čtyři rohy v poloměru 5 pixelů, a dále dvojnásobný stín, jehož první složka vrhá lehký stín doprava dolů a druhá jemně zvýrazňuje jeho okraje. Jako pozadí je použit lineární
47
přechod zleva doprava v modrých (případně zelených) barvách s různou mírou průhlednosti. Typicky box (v HTML zapsán jako div) s obsahem pak vypadá takto:
Obrázek 25 - ukázka boxu .content s obsahem. Zdroj: autor
Novinky jsou v HTML řešeny tabulkou, kde jedna novinka zabere tři řádky (jméno učitele, datum, text). Tyto řádky se pod sebou opakují, pokud je aktualit více. Z toho důvodu jsem zde využil CSS3 selektorů, které vybírají vždy n-tý řádek tabulky (třídy .novinky).
První a každý třetí je naformátován s přechodem v pozadí a stínem u
textu, aby působily jako hlavička každé novinky. Druhé řádky trojic obsahují datum, které je uvedeno menším písmem. Ve třetích řádcích je text zarovnán do bloku a má větší řádkování. Na celou tabulku je aplikována také třída .content (pomocí HTML zápisu
Obrázek 26 - screenshot nastylovaných aktualit. Zdroj: autor
48
Celá úvodní stránka s hlavičkou vypadá následovně:
Obrázek 27 - náhled úvodní strany rezervačního systému. Zdroj: autor
2.3.6 Tabulkové výpisy témat a konzultací Nejvýraznější rys celého rezervačního systému je častý výskyt tabulkových výpisů s poměrně vysokým počtem sloupců. Nejčastěji se pochopitelně jedná o přehled témat či konzultací. Ačkoli se tabulkám snaží webdesignéři již delší dobu vyhýbat, zde je jejich použití nezbytné, účelné a zcela logické, jelikož je třeba organizovat velké množství dat. Všechny tyto podstránky jsou si výrazně podobné, přitom se ale liší například šířkou sloupců či jinými detaily. V této kapitole se jim budu věnovat dohromady a popíši jejich společné prvky.
Obrázek 28 - příklad tabulkového výpisu témat v rezervačním systému. Zdroj: autor
49
Základ vzhledu těchto tabulek tvoří opět třída .content, která je rozšířená třídou .temata,
jež zajišťuje roztažení obsahu přes celou šířku webu. Nejnápadnějším
prvkem v tabulkách jsou jejich záhlaví (v HTML značka
Jak je vidět, jsou nastylovány s modrým (či zeleným) přechodem, pro starší prohlížeče bez podpory této funkce je zde ještě předtím definována jednolitá barva. V IE je kompatibilita zajištěna použitím vlastnosti filter. Veškerý text je převeden na velká písmena a vykreslen bílou barvou s černým stínem doprostřed buněk. Na posledních dvou řádcích je ošetřena barva odkazů - aby byly výrazně odlišitelné, jsou oranžové a po najetí myší bílé. Celkově je vzhled záhlaví zaměřen na jeho zvýraznění, aby byl obsah tabulek maximálně přehledný.
Obrázek 29 - ukázka záhlaví tabulkových výpisů v rezervačním systému. Zdroj: autor
Přehlednost výrazně zvyšuje i další použitá technika – střídání barevných odstínů jednotlivých řádků. V původní verzi systému se o rozlišení sudých a lichých řádků staralo PHP a vypisovalo CSS třídu buď pro lichý, či sudý řádek:
("
class='lichy'>");} ... ?>.
class='sudy'>");}
else
{echo
("
Díky použití CSS3 je možné jednak úplně vynechat
toto PHP rozhodování a navíc zkrátit i výsledný HTML kód, neboť místo přiřazení třídy se dá použít selektor :nth-of-type. Může se to zdát jako malá úspora, avšak je třeba si uvědomit, že při větším množství řádků v jedné tabulce (např. osmdesát) je to úspora již více než tisíc znaků (40*12+40*13) a osmdesát PHP rozhodování. HTML tedy zůstane maximálně čisté - pouze
- a o střídavé obarvení pozadí se postará pouze CSS3: .temata tr:nth-child(2n+1) { background:#99CFC3;
Nejprve je definován lichý řádek (:nth-child(2n+1), šlo by použít také klíčové slovo odd), a poté sudý (:nth-child(2n) či even). V obou je obsažena kromě poloprůhledné barvy ve formátu RGBa ještě barva obyčejná pro starší prohlížeče.
Obrázek 30 - podbarvení sudých a lichých řádků: Chrome (RGBa) vs. IE7 (RGB). Zdroj: autor
Pro zlepšení orientace v tabulkovém výpisu se řádek, na kterém je právě kurzor myši, obarví na tmavší odstín. To by mělo zamezit situacím, kdy se uživatel při pohybu myší v rozsáhle tabulce ztratí a v praxi si pak například omylem zaškrtne jiné téma, než měl v úmyslu. I v tomto případě je použit CSS3 selektor, konkrétně :not . Pomocí něho je možné aplikovat pravidlo na všechny řádky tabulky, kromě prvního, v tom se totiž nachází záhlaví, u kterého by bylo obarvení při najetí myší nežádoucí. Současně s pozadím je třeba změnit ještě barvu písma na bílou, aby bylo na tmavším odstínu dobře čitelné, stejně tak u odkazů. Při změně těchto vlastností je použit CSS3 přechod (transition), který přebarvení dodává slábnoucí efekt. .temata tr:not(first-of-type):hover{ background:#03392D; color: #fff;} .temata tr:not(first-of-type):hover td a {color: #ddd;} .temata tr:not(first-of-type){ transition: all 0.2s ease-in-out;}
Obrázek 31 - náhled aktuálně myší označeného řádku. Zdroj: autor
Jak už jsem nastínil, CSS3 selektory mají v tabulkách velké využití, a to nejen při stylování řádků, ale i sloupců. V původním systému bylo nastavení šířky řešeno 51
většinou přímo v HTML (
), což je ale zastaralý způsob, který by měl z HTML vymizet 68. Jedná se totiž o určování vzhledu, který je doménou CSS. Před příchodem CSS3 by se tak dala použít třída či id (což je nepraktické, možných šířek buněk může být hodně a každá by musela mít svou definici) nebo zápis stylu přímo do HTML -
, ale to zase významně zvyšuje množství HTML kódu, stejně jako výše popsané rozlišování sudých a lichých řádků. Řešení přináší CSS3 a selektor :nth-of-type, kterým lze jednoduše vybrat n-tý sloupce, a tomu pohodlně nastavit šířku. V praxi tedy stačí přidat konkrétní třídu každé tabulce, kde je třeba šířku sloupců nastavit, a nikoli každému sloupci:
...
Tabulce je tedy nastavena třetí třída .schvalovani (jde o výpis témat ke schválení vedením) a v ní obsažené buňky záhlaví (tím pádem celé sloupce, z principu tabulky) jsou následně nastylovány v CSS: .schvalovani .schvalovani .schvalovani .schvalovani
První sloupec má šířku 15 % z celkové šířky tabulky, druhý 17 % a tak dále. Poslední sloupec zde zaujme zbylé místo. Hodnoty jsou v relativních jednotkách, aby se vždy přizpůsobily šíři celého webu.
Obrázek 32 - náhled sloupců stylovaných selektorem :nth-of-type. Zdroj: autor
Dalším společným prvkem tabulkových výpisů je řazení dat. Jako ovládací prvek tohoto řazení byl v původním systému zvolen obrázek ve tvaru šipky. Při redesignu jsem se rozhodl použít místo obrázku techniku „Creating triangles out of borders“69. Jedná se v podstatě o způsob, jak pomocí CSS generovat trojúhelníky. 68
COYIER, Chris. List of Deprecated Attributes Still in Widespread Use. CSS-Tricks [online]. 2007 [cit. 2012-04-21]. Dostupné z: http://css-tricks.com/list-of-depreciated-elements-still-in-widespreaduse/ 69
GILLENWATER, Zoe Mickley. Stunning CSS3: a project-based guide to the latest in CSS. Berkeley, CA: New Riders, c2011, s. 55-56. Voices that matter. ISBN 03-217-2213-2.
52
Právě ty se dají dobře použít místo šipek a takové řešení má několik výhod. Tou první je snížení objemu přenášených dat – klient nemusí ze serveru stahovat nic kromě HTML dokumentu a CSS souboru (které by musel stáhnout v každém případě). K úspoře dojde i v samotném HTML kódu, místo delšího tagu s obrázkem postačí tag <span> s nastavením třídy. Důležitý je také fakt, že takovou šipku bude možné mnohem snadněji editovat, například jí v CSS souboru nastavit jinou barvu či velikost, nejsou nutné úpravy žádného obrázku. Samotný princip vytvoření trojúhelníku jako šipky využívá způsobu skládání různobarevných rámečků. Jak je vidět z prvního obrázku níže, pokud je objektu v CSS nastaven rámeček s různými barvami, je jejich rozhraní vykresleno pod úhlem 45°. Jestliže je šířka a výška objektu nulová, pak je vykreslen jen rámeček, který se vlastně skládá pouze z rohů - jejich strany se navzájem přímo dotýkají. To ukazuje druhý obrázek níže. Jeho stylopis by vypadal následovně: .triangles {width:0;height:0;border-style:solid;border-width: 20px; border-color: red green blue orange;}
Obrázek 33 - ukázka použití rámečku jako šipky. Zdroj: [STUNNING CSS]
Nyní už k získání šipky stačí pouze skrýt tři zbývající strany rámečku. Toho je možné docílit nastavením jejich barvy na hodnotu transparent. V rezervačním systému je pak použit následující zápis: .arrowup {display: inline-block; width: 0; height: 0; borderwidth: 0px 5px 10px 5px; border-style: solid; border-color: transparent transparent #FF6600 transparent;} .arrowdown {display: inline-block; width: 0; height: 0; border-width: 10px 5px 0px 5px; border-style: solid; border-color: #FF6600 transparent transparent transparent;} .arrowup:hover {border-color: transparent transparent #fff transparent;} .arrowdown:hover {border-color: #fff transparent transparent transparent;}
53
Jedná se o definice dvojice šipek (nahoru a dolu) a dále jejich obarvení na bílo při najetí myši. Oproti původnímu kódu přibyla ještě vlastnost display: inline-block, která elementu dovoluje nastavovat blokové vlastnosti, aniž by za ním byl zalomen řádek, a pozměněny byly šířky rámečků, aby trojúhelník působil více jako šipka. Srovnání HTML kódů a vzhledu před úpravou a po ní vypadá takto: <span class='arrowup'>
Obrázek 34 - srovnání vzhledu řadicích šipek: obrázek vs. CSS technika. Zdroj: autor
V tabulkových výpisech je dále častým jevem zarovnávání obsahu buňky na střed. V původním stavu systému tomu tak bylo nejčastěji pomocí HTML atributu align=“center“.
Tento atribut by však již neměl být používán 70, od řízení vzhledu
webu je zde CSS. Proto bylo snahou zaměnit tento zápis za class=“center“ a této třídě pak jednoduše v CSS souboru přiřadit požadovanou vlastnost: .center {textalign:center}.
Efekt je stejný a výsledkem je modernější HTML kód, ve kterém
vzhled zajišťuje CSS. Poslední výraznější úprava ve stránkách s tabulkovými výpisy se týká rozbalování podrobností u témat prací. V původní verzi systému bylo toto řešeno trochu nelogicky. Jednak se podrobnosti zobrazovaly v dalším sloupci, který zabral v tabulce mnoho místa, a za druhé byl odkaz pro rozbalení podrobností umístěn v každém řádku. To bylo zbytečné, jelikož kliknutí na něj stejně rozbalilo podrobnosti u všech témat najednou, nikoli u toho jednoho konkrétního. Při redesignu jsem tedy odkaz
umístil pouze nad celou tabulku témat. Výsledkem je tak opět úspora kódu, jelikož tento jeho úsek se již neopakuje na každém řádku tabulky. Samotný prostor pro text 70
COYIER, Chris. List of Deprecated Attributes Still in Widespread Use. CSS-Tricks [online]. 2007 [cit. 2012-04-25]. Dostupné z: http://css-tricks.com/list-of-depreciated-elements-still-in-widespreaduse/
54
podrobného popisu byl přesunut do buňky s názvem tématu, konkrétně pod něj, díky čemuž je celá tabulka přehlednější.
Obrázek 35 - zobrazení podrobností u témat prací v původním vzhledu systému. Zdroj: autor
Obrázek 36 - zobrazení podrobností u témat prací v novém vzhledu systému. Zdroj: autor
2.3.7 Ostatní podstránky Stránky systému, které neobsahují tabulkové výpisy, k sobě svým vzhledem mají také blízko. Prakticky vždy se jedná o boxy, ve kterých je buď nějaký text, seznam položek, či formulář. Příkladem může být formulář k registraci uživatelů nebo stránka s dokumenty ke stažení. Zde je většinou použita pouze již zmíněná třída .content,
která obsah zvýrazňuje.
55
Obrázek 37 - příklad stránky bez tabulkového výpisu, s oddílem .content. Zdroj: autor
Uvnitř tohoto oddílu .content je často použit styl formulářových polí, který jsem již popsal v úvodu praktické části. Patrně jediným efektem, kterému jsem se ještě nevěnoval, je animace seznamu položek, například na stránce Ke stažení. Jedná se vlastně o CSS3 přechod (vlastnost transition) v kombinaci s vlastností transform . Ta umožňuje 2D transformaci objektů. Její hodnotou může být jedna nebo více transformačních funkcí (např. rotace, posun, zvětšení či zmenšení a další). Zápis transform: translateX(15px);
tedy způsobí posunutí prvku o patnáct pixelů po
vodorovné ose (doprava). Ve vývoji je momentálně CSS3 specifikace také pro 3D transformace71, které by měly přinést mnoho nových možností. Jejich podpora v prohlížečích je však zatím výrazně slabší než u jiných CSS3 modulů 72. Alternativně by v tomto konkrétním případě bylo možné použít také zvýšení levého okraje (a tím odsunutí prvku), CSS3 vlastnost transform zde byla zvolena z demonstračních důvodů.
71
CSS 3D Transforms Module Level 3. W3C. World Wide Web Consortium (W3C) [online]. 2009 [cit. 2012-04-26]. Dostupné z: http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/ When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 2012-04-22]. Dostupné z: http://caniuse.com/#feat=transforms3d 72
56
#content ul li {transition: transform 0.2s ease-in-out;} #content ul li:hover {transform: translateX(15px);}
Výše uvedený kód aplikuje efekt plynulého posunu při najetí myší na všechny položky seznamů v hlavní obsahové části (#content). Vždy je však třeba mít na paměti zachování úplné použitelnosti webu a ovladatelnosti jeho prvků, odkazů především. V tomto případě je tedy třeba vnímat tento efekt pouze jako ukázku možností CSS3.
Obrázek 38 - použití vlastnosti transform na položku seznamu – vpravo po najetí myší. Zdroj: autor
2.3.8 Patička stránek Jak už jsem zmínil v úvodu praktické části, vývoj webdesignu ukázal, že tabulky se pro layout webu nehodí. To platí i pro patičku, která byla v původní verzi systému řešena jako tabulka o jednom řádku a jedné buňce:
Nejdelší částí kódu je složený stín, který je na celém webu použit již několikrát a dodává patičce plastický efekt. Dále CSS zajišťuje to, co bylo původně zapsáno přímo v HTML – šířku, výšku a vystředění, a to i horizontální, pomocí techniky line-height
(nastavení výšky řádku a výšky prvku na stejnou hodnotu způsobí
zarovnání textu na horizontální střed prvku).
Obrázek 39 - náhled patičky redesignovaného systému. Zdroj: autor
58
2.4
Shrnutí
V praktické části práce je popsán uskutečněný redesign rezervačního systému bakalářských a absolventských prací s využitím jazyka CSS3. Jednotlivé prvky vzhledu jsou detailně rozebrány a doplněny ukázkami kódů a výslednými screenshoty. Redesignem došlo nejen ke změně vzhledu systému, ale i k úsporám v jeho zdrojových kódech, a tudíž i datových přenosech. Nejvíce patrné je to na příkladu hlavičky, která byla několikanásobně zmenšena zjednodušením jejího zdrojového kódu. Tím došlo k úspoře prakticky ve všech jednotlivých souborech systému, jelikož hlavička byla a je jejich součástí. Následující grafy porovnávají původní verzi s verzí po redesignu. Obě byly nainstalovány na stejném serveru a připojeny ke stejné databázi. Testována byla úvodní uvítací stránka systému (index.php), na níž byly zobrazeny dvě krátké aktuality. Jako prohlížeč byl použit Maxthon 3 (jádro WebKit) a vestavěné Vývojářské nástroje. Jak je vidět níže, výrazně kleslo množství požadavků na server (tzv. requests). Jedná se vlastně o počet souborů, které jsou třeba k zobrazení stránky – v tomto případě konkrétně o jeden HTML soubor a dále kaskádové styly, skripty a obrázky. Snížení bylo dosaženo především odstraněním nepotřebných obrázkových souborů z hlavičky. V důsledku toho klesl i celkový objem přenesených dat při jednom načtení stránky. Počet požadavků na server 25 (Requests)
Objem přenesených dat v Kb 286,13
263,29
10
Původně
Po redesignu
Graf 2 - počet požadavků na server. Zdroj: autor
Původně
Po redesignu
Graf 3 - objem přenesených dat v Kb. Zdroj: autor
Další dva grafy ukazují částečně rozklad celkového objemu přenesených dat. Dokazují, že klesla jak velikost samotného HTML souboru, tak i obrázků (pozadí
59
stránky, hlavičky, patičky apod.). Naopak k poměrně výraznému zvětšení došlo u souboru s kaskádovými styly. Velikost výsledného HTML v Kb
Velikost grafických prvků v Kb
9,74
210,73
174,89
4,08
Původně
Po redesignu
Původně
Po redesignu
Graf 4 - velikost výsledného HTML v kB .Zdroj: autor Graf 5 - velikost načítaných grafických prvků v Kb. Zdroj: autor
Poslední graf srovnává doby načítání stránek. Doba načtení DOM je čas, za který je načten tzv. Document Object Model (DOM), zjednodušeně řečeno se jedná o HTML a skripty. Doba načtení celkem obsahuje navíc ještě grafické soubory. Poznámka: tento druh měření může být vždy ovlivněn vnějšími faktory, jako jsou běžná a momentální rychlost a vytíženost internetového připojení, práce ostatních programů apod. Doba načtení stránky v sekundách 2,68
1,44
1,53
Původně Po redesignu
0,6
Doba načtení DOM
Doba načtení celkem
Graf 6 - doba načtení úvodní stránky v sekundách. Zdroj: autor
Veškerá práce probíhala na kopii rezervačního systému nainstalované na linuxovém serveru u firmy Hosting zdarma s.r.o. Zde jsem se bohužel setkal se závažnými technickými problémy, jelikož původní verze systému patrně běžela pod Windows. 60
Zatímco databáze MySQL běžící pod Windows nerozlišuje velká a malá písmena v názvech tabulek (je case-insensitive), je-li nainstalována pod Linuxem, tak je rozlišuje (case-sensitive). V souborech systému byly tak často použity SQL dotazy, které původně pod Windows fungovaly, v nové instalaci pod Linuxem však nikoli. Tento problém se sice dá ošetřit v nastavení MySQL (pomocí nastavení lower_case_table_names=0
v souboru my.ini), to však většina webhostingů
neumožňuje. Za možné řešení tohoto problému jsem považoval použití lokální instalace PHP a MySQL ve Windows, konkrétně programu XAMPP. Ani v něm se mi však nepodařilo systém bezchybně zprovoznit. Z těchto důvodů jsem byl nucen přistoupit k postupnému hledání rozdílů ve velikosti písmen v SQL dotazech a v databázových tabulkách. Hromadné nahrazení v souborech nepřipadalo v úvahu, jelikož názvy některých tabulek (například Student či Konzultace) jsou obecné a běžně se vyskytují nejen v SQL dotazech, ale i v textu. Jelikož systém obsahuje velké množství souborů (přes 120), nebylo v mých silách je projít a upravit všechny. Proto jsem se zaměřil na ty, které hrají roli ve vzhledu systému. Výsledkem je fakt, že redesignovaná verze dostupná online z http://bp.tkoudy.cz není zcela funkční a může vykazovat chyby způsobené špatnou komunikací mezi PHP a MySQL. Na zmíněné adrese je však k dispozici její kopie v komprimovaném archivu, která by po instalaci na server s Windows měla fungovat stejně, jako původní verze systému. V souvislosti s tím bych rád zdůraznil, že předmětem práce nebyly žádné funkční (programové) úpravy systému. Ty, ke kterým došlo, byly nevyhnutelné a nutné k tomu, abych mohl samotný redesign s užitím CSS3 vůbec provést a následně jej popsat v praktické části práce.
61
2.5
Vlastní přínos práce
Specifikace jazyka CSS3 je rozdělena do několika modulů, z nichž se každý zabývá jiným tématem. Tyto moduly se navíc nacházejí v různém stadiu vývoje. Z těchto důvodů může situace kolem CSS3 působit poněkud nepřehledně. Cílem této práce je přinést informace především o takových funkcích, které se již nyní dají využít v praxi. V teoretické části je představena syntaxe stěžejních vlastností a hodnot jazyka CSS3, jeho obecné možnosti použití a v neposlední řadě aktuální podpora v internetových prohlížečích. Nastíněny jsou také základní způsoby simulace efektů CSS3 v prohlížečích, které tento jazyk nepodporují (se zaměřením především na starší verze Internet Exploreru). V rámci popisu postupu redesignu rezervačního systému je v praktické části popsáno co největší množství příkladů reálného použití představených funkcí. Uvedeny jsou konkrétní úseky zdrojových kódů, které funkčnost zajišťují, a také screenshoty, jež ji ilustrují. Druhá část práce je tedy zpracována demonstrační formou blízkou například případové studii. Jednotlivé kroky redesignu jsou většinou odůvodňovány, aby byl patrný jejich praktický význam. Výjimkou jsou některé grafické efekty, které by v systému patrně nemusely být a jsou přítomny pouze jako ukázka možností teoreticky popsaných v první části práce (například CSS3 animace). Samotná nová podoba systému může být v případě zájmu ze strany školy využita a může nahradit stávající vzhled rezervačního webu. I proto byl kladen velký důraz na zpětnou kompatibilitu ve starších prohlížečích, k jejímuž zajištění byly využity techniky a nástroje popsané v úvodu práce.
62
Závěr V teoretické části práce jsem představil některé zásadní novinky, které přináší nová verze jazyka pro návrh vzhledu webových stránek – CSS3. Věnoval jsem se jejich funkčnosti, syntaxi, krátkým ukázkám a také podpoře v prohlížečích. Tu jsem popsal nejprve obecně a poté i konkrétně u jednotlivých modulů a vlastností. K tomuto rozboru jsem přidal kapitolu, která se zabývá možnostmi emulace CSS3 ve starších prohlížečích. Přiložil jsem také graf četnosti používání jednotlivých druhů prohlížečů a jejich verzí. Díky tomu jsem dokázal, že u mnoha CSS3 vlastností existuje již v aktuálně používaných prohlížečích velmi dobrá podpora, a je proto možné, je bez problémů využívat. V praktické části práce jsem na redesignu rezervačního systému bakalářských a absolventských prací demonstroval použití popsaných CSS3 vlastností. Zároveň jsem však kladl maximální důraz na kompatibilitu ve starších prohlížečích a tím potvrdil, že CSS3 má již dnes praktické využití. Efekty, které bylo dříve nutné složitě připravovat již v grafických návrzích a následně je do webů vkládat pomocí obrázků (například stíny či zaoblené rohy), je dnes možné řešit mnohem rychleji a flexibilněji v CSS3. Prohlížeče, které tyto novinky nepodporují, je jednoduše ignorují a použijí starší řešení. Právě tento typ technik jsem při redesignu použil v co největší míře, abych ukázal reálné možnosti, které CSS3 přináší. Je však třeba zdůraznit, že se jedná o demonstraci, tudíž nelze tvrdit, že všechny zde předvedené prvky se hodí pro každé použití. Samotná aplikace různých grafických efektů a jejich množství je vždy otázkou subjektivního vjemu a vkusu. Jakýkoli web by totiž měl v první řadě splňovat funkční požadavky. Příkladem může být Google, který od svého založení vypadá téměř totožně – jednoduše, až stroze. Přesto je nejpopulárnější stránkou na světě - je totiž funkční. Moderní design by měl zaujmout, neměl by však zastínit obsah či smysl celé stránky. Na úplný závěr je třeba zmínit, že CSS3 se věnuje mnoha dalším oblastem, které v této práci nejsou popsány. Jednou z nejrozsáhlejších je CSS3 layout. Jedná se o širokou sadu vlastností, jejichž posláním je nahradit léta používané HTML konstrukce pro rozvržení webových stránek. V praxi ještě sice nemají své využití, to se však zcela jistě brzy změní s rozmachem HTML 5. Ostatně, ačkoli se CSS3 zatím ve větší míře nepoužívá, mluví se již o CSS4. Vývoj v oblasti webových technologií je stejně rychlý jako v jiných oborech informatiky. 63
Seznam použité literatury
CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, 125 s. Book apart, no. 2. ISBN 978-0984442-522. GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, 278 s. ISBN 15-932-7286-3. GILLENWATER, Zoe Mickley. Stunning CSS3: a project-based guide to the latest in CSS. Berkeley, CA: New Riders, c2011, 301 s. Voices that matter. ISBN 03-2172213-2. GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011. ISBN 978-098-0846-904. SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011. ISBN 978-143-0240-419.
Comparison of layout engines (Cascading Style Sheets). In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-04-09]. Dostupné z: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online]. 2010 [cit. 201204-08]. Dostupné z: http://interval.cz/clanky/css-3-jak-na-stylovani-pozadielementu/ CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://kimblim.dk/csstests/selectors/ STANÍČEK, Petr. CSS versus tabulkový layout. In: Pixylophone [online]. 2004 [cit. 2012-03-26]. Dostupné z: http://www.pixy.cz/pixylophone/2004_01_archiv.html#1074594674 CSS3 Module Status. CSS3 . Info: All you ever needed to know about CSS3 [online]. 2012 [cit. 2012-04-21]. Dostupné z: http://www.css3.info/modules/ CSS3 PIE: CSS3 decorations for IE [online]. 2011 [cit. 2012-03-21]. Dostupné z: http://css3pie.com/
64
CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online]. 2010 [cit. 2012-03-21]. Dostupné z: http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internetexplorer/ CSS3: background-origin and background-clip. CSS3 . Info: All you ever needed to know about CSS3 [online]. 2009 [cit. 2012-04-08]. Dostupné z: http://www.css3.info/preview/background-origin-and-background-clip/ Globální statistika. TOPlist [online]. 2012 [cit. 2012-04-01]. Dostupné z: http://www.toplist.cz/global.html How to create slick effects with CSS3 box-shadow. RedTeamDesign [online]. 2011 [cit. 2012-04-05]. Dostupné z: http://www.red-team-design.com/how-to-createslick-effects-with-css3-box-shadow HSL and HSV. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2012-04-02]. Dostupné z: http://en.wikipedia.org/wiki/HSL_and_HSV Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online]. 2012 [cit. 2012-03-21]. Dostupné z: http://selectivizr.com/ COYIER, Chris. The Difference Between :nth-child and :nth-of-type. CSS-Tricks [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://css-tricks.com/the-differencebetween-nth-child-and-nth-of-type/ BEVERLOO, Peter. Vendor-prefixed CSS Property Overview. Peter Beverloo [online]. 2012 [cit. 2012-03-28]. Dostupné z: http://peter.sh/experiments/vendorprefixed-css-property-overview/ Websites Shouldn't Look The Same Across Different Browsers…Here Is Why. Noupe: The Curious Side of Smashing Magazine [online]. 2011 [cit. 2012-03-21]. Dostupné z: http://www.noupe.com/design/websites-shouldnt-look-the-same-acrossdifferent-browsers%E2%80%A6here-is-why.html When can I use...: Support tables for HTML5, CSS3, etc [online]. 2012 [cit. 201203-28]. Dostupné z: http://caniuse.com/ World Wide Web Consortium (W3C) [online]. 2012 [cit. 2012-03-20]. Dostupné z: http://www.w3.org/ BALVÍNOVÁ, Alena. WYSIWYG. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, 2003- [cit. 2012-03-26]. Dostupné z: http://aleph.nkp.cz/F/?func=direct&doc_number=000000275&local_base=KTD. 65
Seznam obrázků Obrázek 1 - srovnání hodnot repeat, round a space vlastnosti background-repeat. Zdroj: autor ...........19 Obrázek 2 - srovnání hodnot auto, contain a cover vlastnosti background-size. Zdroj: autor ...............19 Obrázek 3 - ukázka tříbarevného přechodu pomocí linear-gradient. Zdroj: autor ..................................21 Obrázek 4 - ukázka tříbarevného přechodu pomocí repeating-linear-gradient. Zdroj: autor .................21 Obrázek 5 - ukázka tříbarevného přechodu pomocí radial-gradient. Zdroj: autor ..................................22 Obrázek 6 - ukázka tříbarevného přechodu pomocí repeating-radial-gradient. Zdroj: autor .................22 Obrázek 7 - použití vlastnosti border-radius v různých variantách. Zdroj: autor...................................23 Obrázek 8 - příklady použití vlastnosti box-shadow. Zdroj: autor...........................................................24 Obrázek 9 - ukázka použití text-shadow. Zdroj: autor ..............................................................................24 Obrázek 10 - zdrojový obrázek (border.png) s průhledným pozadím. Zdroj: autor ...............................25 Obrázek 11 - ukázky použití vlastností border-image. Zdroj: autor ........................................................25 Obrázek 12 - nástin animace pomoci CSS3 transitions. Zdroj: autor ......................................................26 Obrázek 13 - náhled původní domovské stránky rezervačního systému. Zdroj: autor ...........................30 Obrázek 14 - porovnání výšky hlaviček před a po redesignu. Zdroj: autor .............................................34 Obrázek 15 - ukázka stínu vloženého pomocí body:before. Zdroj: autor ................................................36 Obrázek 16 - nadpis s použitím efektů CSS3. Zdroj: autor ......................................................................37 Obrázek 17 - náhled pozadí hlavní části podstránky. Zdroj: autor...........................................................38 Obrázek 18 - ukázka formulářových prvků nastylovaných s využitím CSS3. V prvním řádku výchozí zobrazení, ve druhém při aktivaci myší (:hover). Zdroj: autor .................................................................39 Obrázek 19 - původní zdrojový kód hlavičky – část. Zdroj: autor ...........................................................40 Obrázek 20 - nový zdrojový kód hlavičky. Zdroj: autor...........................................................................41 Obrázek 21 - ukázka náklonu a poloprůhlodnosti loga v průběhu animace. Zdroj: autor. .....................43 Obrázek 22 - náhled hlavičky v základním stavu. Zdroj: autor ................................................................46 Obrázek 23 - náhled hlavičky s vysunutou položkou menu č. 3. Zdroj: autor ........................................47 Obrázek 24 - náhled hlavičky s vysunutou položkou menu č. 4. Zdroj: autor ........................................47 Obrázek 25 - ukázka boxu .content s obsahem. Zdroj: autor ...................................................................48 Obrázek 26 - screenshot nastylovaných aktualit. Zdroj: autor .................................................................48 Obrázek 27 - náhled úvodní strany rezervačního systému. Zdroj: autor .................................................49 Obrázek 28 - příklad tabulkového výpisu témat v rezervačním systému. Zdroj: autor ..........................49 Obrázek 29 - ukázka záhlaví tabulkových výpisů v rezervačním systému. Zdroj: autor .......................50 Obrázek 30 - podbarvení sudých a lichých řádků: Chrome (RGBa) vs. IE7 (RGB). Zdroj: autor ........51 Obrázek 31 - náhled aktuálně myší označeného řádku. Zdroj: autor .......................................................51 Obrázek 32 - náhled sloupců stylovaných selektorem :nth-of-type. Zdroj: autor ...................................52 Obrázek 33 - ukázka použití rámečku jako šipky. Zdroj: [STUNNING CSS] ......................................53 Obrázek 34 - srovnání vzhledu řadicích šipek: obrázek vs. CSS technika. Zdroj: autor ........................54 Obrázek 35 - zobrazení podrobností u témat prací v původním vzhledu systému. Zdroj: autor............55 Obrázek 36 - zobrazení podrobností u témat prací v novém vzhledu systému. Zdroj: autor .................55 Obrázek 37 - příklad stránky bez tabulkového výpisu, s oddílem .content. Zdroj: autor .......................56 Obrázek 38 - použití vlastnosti transform na položku seznamu – vpravo po najetí myší. Zdroj: autor 57 Obrázek 39 - náhled patičky redesignovaného systému. Zdroj: autor .....................................................58
66
Seznam grafů
Graf 1 - podíl prohlížečů na českém internetu za březen roku 2012. Zdroj: autor, data: http://www.toplist.cz/stat/?a=history&type=1.............................................................................................8 Graf 2 - počet požadavků na server. Zdroj: autor ......................................................................................59 Graf 3 - objem přenesených dat v Kb. Zdroj: autor ..................................................................................59 Graf 4 - velikost výsledného HTML v kB .Zdroj: autor ...........................................................................60 Graf 5 - velikost načítaných grafických prvků v Kb. Zdroj: autor ...........................................................60 Graf 6 - doba načtení úvodní stránky v sekundách. Zdroj: autor .............................................................60
67
Seznam příloh
I. Podpora CSS selektorů v prohlížečích. ................................................ 69 II. Podpora CSS background vlastností v prohlížečích. ............................. 71 III. Přehled CSS vendor prefixů. ............................................................... 73
68
Přílohy I.
Podpora CSS selektorů v prohlížečích.
CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online]. 2011 [cit. 2012-03-29]. Dostupné z: http://kimblim.dk/css-tests/selectors/
69
70
II.
Podpora CSS background vlastností v prohlížečích.
CSS Background Properties: possible values, default values, browser support and DOM. WEYL, Estelle. Standardista [online]. [cit. 2012-04-10]. Dostupné z: http://www.standardista.com/css3/css3-backgroundproperties/
<span class='arrowup'>
