Na začátek Vás zahrneme lehkým úvodem do CSS3 (Cascading Style Sheets 3). Nejedná se již o žádného nováčka na poli webových technologií. Jeho dva starší bratři nám pomáhají vytvářet internetové stránky od roku 1996 resp. 1998. Finální dokončení CSS3 je plánováno na rok 2015, nicméně ve vývoji je již od roku 2005. Kaskádové styly jsou technologií, která umožňuje měnit formátování webu. Chcete mít např. hlavní nadpis modrý, zarovnaný na střed, velkým písmem a před každým takovýmto nadpisem obrázek opičky? Není problém. V nové specifikaci CSS3 však přibyly i další, velice užitečné věci. Jednou z nich jsou transformace a animace. Pomocí těchto metod můžete například elementu nastavit čas, po který se bude přemisťovat z levé strany prohlížeče na pravou. Do toho přidáte transforamci a z původně hranatého objektu se tak stane kruh.
Pokud se nechcte rýpat v Kaskádových stylech, můžete pro animace použít programovací jazyk javascript. Ten vzniknul v roce 1995 ve společnosti Netscape a s jiným programovacím jazykem, jazykem Java, má podobnou pouze syntaxi. Javascriptem se dají ve webovém prostředí vytvářet nejen animace, ale celé aplikace na straně klienta. Z důvodů usnadnění práce vývojářům bylo vytvořeno mnoho knihoven javascriptu. Některé se používají pro validaci formulářů, jiné pro snadnější tvorbu animací. Nejpoužívanější knihovnou je bezesporu jQuery. Používá se až na 75% webů, které používají nějaký javascriptový framework.
Na internetu samozřejmě existují další nástroje, které pomáhají s tvorbou animací. Jedním z nich je například GSAP (GreenSock Animation Platform), což je samostatný framework výkonnostně optimalizovaných HTML5 animací. GSAP není závislý na knihovně jQuery a může tak fungovat zcela bez ní.
Podpora CSS3 v prohlížečích
Podpora vlastností CSS3 v prohlížečích zatím stále pokulhává. Typickým příkladem je Internet Explorer 9, který si s vlastnostmi jako transform nebo animation neporadí (podpora až od IE10). Pokud však použijete framework GSAP, animace budou kompatibilní i v IE9. Knihovna jQuery je podporována výborně - verze 1.x od IE6, verze 2.x od IE9.
Porovnávání zátěže
Nyní si ukážeme, jak se liší náročnost animací vytvořených pomocí CSS3, jQuery a GSAPu. Efekty budeme porovnávat v prohlížeči Google Chrome a vystačíme si s nástrojem Developer Tools. Nejdříve si vytvoříme objekty, na kterých budeme animaci provádět. V našem případě to bude síť malých kroužků s černým rámečkem a bílým pozadím. Pro to použijeme jednoduchý zápis v HTML a CSS. Nyní se pustíme do animací. Budeme animovat barvu pozadí na černou a rámeček na šedý.
CSS3
Animace se v CSS3 tvoří velice jednoduše. Elementu nastavíme metodu animation (můžeme použít i transition se stejným efektem). Samozřejmě nesmíme zapomínat na prefixy. Slovíčko forwards nám způsobí, že poslední animovaná hodnota bude použita namísto původní.
Jak můžeme vidět na ukázce, animace dělané přes CSS3 se vykonají celkem rychle - 1,27 s. Je to tím, že snímková frekvence okna prohlížeče byla omezena a tím pádem zbytečné překreslování a přepočítávání elementů není vůbec provedeno. Prohlížeč je také sám schopen vyhodnotit, jak se elementy na stránce budou měnit a tím aplikovat styly na vícero prvků.
jQuery
K animování barev a nečíselných vlastností musíme sáhnout po jQuery UI (samotná knihovna jQuery nedokáže tyto vlastnosti animovat). Jednoduchý zápis kódu nám zprovozní animaci po kliknutí na tlačítko:
Animace přes jQuery zabere mnohem více času, než ta přes CSS3. Dle výpisu na timeline je to 10,58 s. Čím to je? Stručně bychom mohli odpovědět, že CSS procesor prohlížeče je napsaný v jazyce C++ a kód se tak vykonává velice rychle. Ale podíváme se na to blíže. Přepočítání stylů se totiž spustí na každém elementu zvlášť (na každém ze 2304ti elementů div, na timeline ose jsou to ty malé fialové obdélníčky řazené pod sebou), i když jsou všechny elementy identické.
GSAP
Animace dělané přes framework GSAP jsou znatelně rychlejší než ty přes jQuery UI. (Byly by ještě rychlejší, kdybychom použili místo knihovny jQuery pro selektory pouze nativní javascript). Čas nutný k provedení byl 3,43 s.
Závěr
Jak je vidět z předešlých ukázek, z hlediska rychlosti dopadly nejlépe CSS3 animace. Framework GSAP se umístil na druhém místě a třetí skončilo jQuery. Z vývojářského hlediska však CSS3 animace zatím nepředstavují takové terno, abychom je začali používat ve věší míře. Děje se tak hlavně z důvodu nepodporování ve starších prohlížečích. Navíc, pokud chceme udělat nějaký složitější slider (http://www.zfpa.cz/), je stále jQuery nepostradatelným nástrojem. Oproti CSS3 je totiž plnohodnotným programovacím jazykem a dokážeme v něm tedy napsat script reagující na různé událost a podmínky.
Jiné, nové vlastnosti z rodiny CSS3, však využíváme ve WDT poměrně často, i když ne všechny jsou podporovány. Jedná se například o border-radius (kulaté rohy), box-sizing (podporovaný od IE8), nebo vlastnost transition, která hravě zvládne plynulé přechody (například při najetí myší nad tlačítkem). U těchto vlastností tolik nevadí jejich nedostatečná podpora, protože my se ve WDT řídíme postupem “Graceful Degradation”, který zajišťuje funkčnost a optimální vzhled ve většině prohlížečů a jejich starších verzí. Například v nižších verzích Internet exploreru se nebudou zobrazovat zaoblené rohy a stíny.
Zdroje:
