Práce s obrázky v éře CSS

14. září 2001

•

Domníváte se, že kaskádovými styly se ve větší míře nemusíte příliš vzrušovat, protože tvoříte graficky velmi složité stránky, které nejdou s CSS moc dohromady? Protože pracujete hlavně s obrázky a těm CSS nijak zvlášť nepomůže? V tom případě je načase zbořit další velký mýtus.

O výhodách striktního oddělování obsahu dokumentu od jeho vzhledu prostřednictvím CSS2 toho bylo v poslední době ve světových i českých zdrojích napsáno dost. Názory se mohou lišit na to, zda už dnes dozrála doba k tomu, aby byly stránky tvořeny výhradně tímto způsobem, zcela podle aktuálních standardů W3C, bez ohledu na nedokonalosti starých verzí prohlížečů. Nesporné je však to, že jde do budoucna o jediný správný způsob práce. Je proto s podivem, že se řada webdesignerů rozhoduje, zda využít layout pomocí CSS2, nikoliv s ohledem na podporu prohlížečů, ale podle charakteru vytvářené stránky. Mimo jiné vinou převažujícího zaměření tutorialů vznikl dojem, že web s layoutem v CSS rovná se web s jednoduchým grafickým designem – tradičně „velmi hranatým“ a s minimálním využitím obrázků. Tedy hlavně web typu zpravodajský server. Je-li třeba vytvořit graficky atraktivní prezentaci s množstvím bitmapové grafiky, webdesigneři stále většinou sáhnou po svých osvědčených tabulkách. Je nutné pochopit, že CSS není technologie, která se někdy hodí a někdy ne. Je to styl práce, a ten by měl být být naprosto shodný, ať děláme portál nebo hravou prezentaci čokoládové tyčinky.

Webdesign se stal hned po dřevorubci řemeslem s nejčastějším výskytem činnosti řezání. Řežou se obrázky – v grafickém editoru si vytvoříme bitmapovou podobu celé stránky (nebo její podstatné části), chopíme se nástroje pro řezání (či specializovaného programu) a celé dílo rozřežeme na spoustu malých obdélníků. Důvody jsou dva: Za prvé rozřezání obrázku bylo dosud jediným způsobem, jak na stránce kombinovat bitmapovou grafiku s textem. Stránka je tvořena systémem tabulek, přičemž některé buňky obsahují obrázek, jiné text. Druhým důvodem je optimalizace grafického formátu. Pro některé části jednoho obrázku je vhodné použít formát JPEG, pro jiné PNG nebo GIF s vysokou barevnou hloubkou a pro jiné třeba jen úspornou několikabarevnou bitmapu.

První z uvedených důvodů díky CSS zcela pominul. A protože druhý důvod nikdy nebyl tak významný jako první, je pravděpodobné, že řezání se pro webdesignery stane nadále jen výjimečnou činností. Díky CSS, konkrétně využití vrstvení elementů a jejich přesného umísťování, můžeme kombinovat obrázky s textem dle libosti, bez nutnosti řezání. Definitivně bychom také měli do muzea webdesignu uložit oblíbený invisible.gif, případně spacer.gif, či jak jinak ještě můžeme mít pojmenovaný oblíbený pseudoobrázek s jediným průhledným pixelem, využívaný v tabulkách k roztažení prostoru na příslušnou výšku či šířku.

Víra v CSS říká: Nepoužiješ nástroje pro tvorbu vzhledu přímo v HTML dokumentu, ale vzhled určíš připojeným stylesheetem. Špatnými nástroji se rozumí v první řadě HTML elementy typu FONT a atributy typu bgcolor či border. Není však důvod, proč by úplně stejné přikázání nemělo platit i pro obrázky. Vezměme si graficky bohatou stránku s množstvím bitmapové grafiky. Veškeré obrázky bychom měli být schopni rozdělit na dvě skupiny: V první budou ty, které nesou nějaký informační obsah – fotografie, grafy, logotypy, graficky ztvárněné nadpisy. Druhou hromadu představují všechny ostatní obrázky, které vytvářejí „pouze“ grafický design stránky. Ty první patří do HTML, ty druhé do stylesheetu. K těm prvním je třeba připojit alternativní textovou informaci formou povinného atributu alt elementu IMG. K těm druhým žádnou textovou alternativu vymýšlet nemusíme (jistě znáte tu zábavnou kreativní činnost, kdy bylo třeba vymyslet alt ke svislé čáře či puntíku coby odrážce). Obrázky, které jsou součástí stylesheetu, pochopitelně žádný alternativní text neobsahují.

Jak zakomponovat obrázky do CSS? Jedinou možností (nepočítáme-li tzv. generovaný obsah, což je mechanismus, který bohužel zatím nefunguje ve všech prohlížečích) je vlastnost background-image. Nic nám ale nebrání, abychom si plně vystačili pouze s touto možností pro požadované rozmístění všech obrázků. Ve struktuře do sebe vnořených elementů lze většinou najít vhodný element (obvykle zapouzdřovací DIV), kterému nastavíme obrázek pozadí pro docílení požadovaného layoutu. V extrémním případě můžeme zvolit i řešení, kdy v HTML dokumentu bude prázdný element DIV, který teprve v CSS získá svou tvář díky obrázku. Nemusíme být mrzutí, že si dokument zaneřádíme nadbytečnými elementy. Ostatně vazba mezi strukturou a vzhledem je mezi HTML a CSS přece jen dost silná – chceme-li skutečně dokonalé řešení nezávislosti informací na jejich prezentaci, museli bychom sáhnout po mocnější technologii: XML/XSL (což se ovšem nijak nevylučuje s tím, že i na úrovni HTML/CSS bychom se měli snažit o co nejdokonalejší oddělení obsahu od vzhledu).

Pro úplnost dodejme, že obrázek jako hodnotu vlastnosti CSS využívá ještě vlastnost list-style-image, která má ovšem velmi specifické využití – pro symbol použitý u položek nečíslovaného seznamu.

Je načase uvést ukázku, složenou ze tří samostatných příkladů. Prostým porovnáním délek zdrojových kódů ukazka.html a ukazka.css vidíme, že těžiště práce se při graficky náročnějších projektech bude přesunovat z HTML do CSS. Upozorňuji, že stejně jako všechny podobné příklady, demonstrující pokročilejší využití CSS, nelze očekávat bezchybné zobrazení ve starších verzích prohlížečů (u Internet Exploreru a Netscapu jsou to verze 4 a nižší). Proto se nejčastěji setkáváme s řešením, že těmto starým prohlížečům je přístup ke stylesheetu zcela odříznut, pomocí příkazu @import uvnitř elementu STYLE. V této ukázce je však zvoleno připojení stylesheetu pomocí elementu LINK, aby bylo možné snadno přidat pro demonstrační účely funkci pro vypínání a zapínání stylesheetu (viz. odkazy na začátku příkladu).

První příklad mimo jiné obsahuje zmiňovaný prázdný element DIV (třída zapati), který se zobrazí jako obrázek teprve díky stylesheetu. Jedná se o obrázek pro zakončení rámečku se zaoblenými rohy a stínem – tento obrázek nemá žádný informační obsah, proto by neměl být součástí HTML, ale CSS. Za tímto účelem vytvořená třída zapati může ve spojení s jiným stylesheetem získat zcela jinou podobu, například ve zvukovém stylesheetu si představme ukončovací znělku.

Druhý příklad představuje menu, jehož položky kombinují text s bitmapovou grafikou. Pokud bychom se vyhýbali CSS, čekalo by nás otravné řezání obrázků nebo opakování stále stejného obrázku na pozadí buněk tabulky. V CSS stačí definovat pozadí elementu A – obrázek se stává součástí stylu, v HTML jej opět nenajdeme. Dodejme, že jednoduchou výměnou tohoto obrázku v definici stylu pro pseudotřídu A:Hover bychom mohli dosáhnout dynamického efektu, který jinak obvykle řešíme JavaScriptem. Bohužel tato možnost není v některých prohlížečích dosud implementována, takže se na ni zatím nespoléhejme. Mimochodem, pokud se vám bude při detailnějším zkoumání zdrojového kódu zdát, že celé řešení je zbytečně komplikované, pak máte pravdu. Bohužel je nutné rafinovaně obcházet nedokonalosti dnešních prohlížečů – konkrétně problematické formátování inline elementů v Mozille (vyřešeno změnou zobrazení na typ block a plovoucím řazením těchto bloků) a chybu v interpretaci tzv. box modelu v Internet Exploreru (vyřešeno dodatečným elementem vnořeným do původního).

Třetí příklad kombinuje obrázek, který utváří grafický design stránky (oko na pozadí), s obrázkem, který má informační význam (tlačítko „Klikni zde“) – ten je proto jediným obrázkem, který na stránce uvidíme, když vypneme stylesheet. Tento obrázek (resp. jeho textovou alternativu) tedy jako jediný uvidí například uživatelé textových prohlížečů (pod kterými si ve 21. století nepředstavujme ani tak browser typu Lynx, ale spíše třeba mobilní telefon). Máme dvě možnosti, jak kombinování těchto dvou obrázků provést. První je rozřezání celkové kompozice a její složení na stránce – samozřejmě pomocí absolutního pozicování CSS, nikoliv tabulkou. Druhou možností – která byla zvolena zde – je vrstvení. Jeden obrázek (ve formátu JPEG) tvoří pozadí, druhý (GIF) je určen pro tlačítko. V praxi je třeba hledat kompromis mezi složitostí řešení a celkovým datovým objemem všech obrázků. Na tomto místě je nutné si povzdechnout, že stále nelze ve větší míře využívat obrázky ve formátu PNG s transparencí pomocí alfa-kanálu, opět z důvodu nedostatečné implementace ve většině prohlížečů. Alfa-kanál PNG dokáže u každého pixelu definovat stupeň jeho průhlednosti v rozsahu 0 až 255 a v tomto příkladu by nám tedy umožnil zpracovat tlačítko „Klikni zde“ nezávisle na umístění, resp. na pozadí, na kterém se nachází. Jednoduchou transparenci, kterou nám nabízí formát GIF, nelze pro tento účel využít ve spojení s antialiasingem, tj. vyhlazením okrajů písma a křivek.

Rozhodnete-li se u svého příštího projektu řešit grafický design stránky výhradně pomocí CSS, zkuste se řídit popsanými zásadami. Jedná se o styl práce velmi odlišný od stále převažující praxe, ale výsledek rozhodně stojí za to – do příští technologické revoluce (nebojte se, není na obzoru) vás čeká éra příjemnější práce než dosud. Příjemné je mimo jiné i zjištění, že vaše graficky atraktivní stránka může být naprosto bezchybná dokonce z hlediska standardu HTML 4.01 Strict. Kolik takových dnes na webu najdete?