14 Nahrazování obrázkem

S tím, jak stále více návrhářů a vývojářů vzhlíží k výhodám používání webových standardů, obzvláště pak CSS, jsou dennodenně objevovány nové techniky a hranice možností se stále posouvají. Pravidelně jsou vypracovávány nové, lepší způsoby dosahování daných cílů. Nejlepší příklad tohoto vývoje lze nalézt v umění "nahrazování obrázkem", což je technika použití CSS za účelem nahrazení obyčejného hypertextového odkazu stylizovanými obrázky.

Jak lze využít CSS k nahrazení textu obrázky Bylo by ideální mít veškerou grafiku týkající se prezentace (tj. nepodstatnou, dekorativní) uvnitř CSS. Umožnilo by to snadno vyměnit aktualizované obrázky a přitom ponechat kód přesně takový, jaký je. Také můžeme zajistit, aby všechny prohlížeče a zařízení zpracovaly ze všeho nejdříve samotný kód, ať už pokročilé CSS vyžadované pro náhradu textu obrázky plně podporují nebo ne. Takovéto přednosti jsem kázal v celé knize.

Žádné dokonalé řešení neexistuje Nalézt "dokonalou" metodu výměny obrázků odkazovaných pouze pomocí CSS za texty je ovšem jako hledat Svatý Grál. Taková metoda prostě ještě nebyla nalezena. Existují metody, které fungují ve všech prohlížečích, ale selhávají v podpůrném software typu čteček obrazovky. Existují další metody, které fungují dobře, pokud ovšem uživatelé nespecifikují, že jejich prohlížeč nezobrazuje obrázky a přitom stále umožňují použití CSS.

212

Webdesign s webovými standardy

Žádná z metod dostupných v době psaní těchto řádek sice neuspokojuje každého uživatele, ale uvedené techniky jsou dnes používány na různých stránkách. Při aplikování nějaké metody náhrady obrázky bychom měli postupovat opatrně a chápat nevýhody, které jsou s ní spojené.

Používat s obezřelostí Účelem této kapitoly je vysvětlit flexibilitu, kterou s sebou náhrada obrázky přináší, ale také ukázat, co na ní je neuspokojující. Časem možná nadšenci pro CSS naleznou nějaké lepší způsoby, jak dosáhnout týchž výsledků. Do té doby si budeme muset vystačit s tím, co máme, a zvážit všechna pro a proti. Abychom se s myšlenkou náhrady obrázky seznámili, podívejme se na několik oblíbených metod počínaje technikou náhrady obrázky podle Fahrnera (Fahrner Image Replacement; FIR), kterou to všechno začalo.

Metoda A: Náhrada obrázku podle Fahrnera FIR, pojmenována po autorovi techniky Toddu Fahrnerovi, je původní metodou nahrazování textu pomocí vlastnosti CSS obrázek na pozadí (background-image). Tuto metodu popularizoval Douglas Bowman ve své fantastické příručce "Použití obrázku pozadí k náhradě textu" (Using Background image to Replace Text; www.stopdesign.com/also/articles/replace_text/) publikované v březnu 2003. Předveďme si metodu na jednoduchém příkladu, ve kterém pomocí FIR prohodíme značku hlavičky daného textu se stylizovanou grafikou.

Kód Kód, který pro náhradu použijeme, bude následující:

Fahrner Image Replacement

Jednoduchá značka hlavičky s textem, který si přejeme později nahradit grafikou. Jistě si všimnete, že prvku

jsme přiřadili jednoznačný id, abychom nad touto speciální hlavičkou měli pomocí CSS plnou kontrolu. Obrázek 14-1 nám ukazuje výsledky kódu v typickém prohlížeči – hlavička se vypíše výchozím písmem prohlížeče (v tomto případě v písmu Verdana). Dosud to je předpověditelné a nudné.

Obrázek 14-1. Výchozí podoba hlavičky.

Kapitola 14 – Nahrazování obrázků

213

Značka navíc FIR požaduje zavedení značky navíc (v dodatku k prvku hlavičky), která v sobě zahrne text kódu. Mohli bychom k tomu sice použít jakoukoliv značku, ale obecnost prvku <span> jej činí pro tento úkol dokonalým. Když se podíváme na nestylizovaný kód, nebude mít prvek <span> žádný vliv na vzhled. Modifikovaný kód nyní vypadá takto:

<span>Fahrner Image Replacement

Nyní, když máme na svém místě dodatečný prvek <span>, jsme připraveni na CSS.

CSS vstupuje do hry Podstatou Metody A je použití dvou prvků, které máme k uskutečnění dvou odlišných úkolů. Pomocí prvku <span> text "schováme" a pak prvku

přiřadíme obrázek pozadí stylizovaného typu. Právě tyto dva kroky vyžadují dva prvky.

Schování textu Nejprve schovejme text použitím vlastnosti display u prvku <span>: #fir span { display: none; }

To zcela schová text umístěný v této speciální hlavičce uvnitř značek <span>. Prohlížeče nic nezobrazí. To je první krok – zcela se zbavit textu. Není potřeba ukazovat výsledný vzhled; jak jistě sami chápete, stránka by byla prázdná.

Přiřadit pozadí Vytvořil jsem, podle mého názoru, vkusnou grafickou verzi textu ve Photoshopu (viz obrázek 14-2). Ve svém oblíbeném obrázkovém editoru byste mohli udělat něco podobného. Poznamenejte si rozměry v pixelech, za malý okamžik je budeme potřebovat.

Obrázek 14-2. Obrázek který použijeme k nahrazení textu (fir.gif).

Rozměry obrázku na obrázku 14-2 jsou 287 pixelů na šířku a 29 pixelů na výšku. Jak obrázek, tak rozměry vložíme jako pozadí do kódu prvku

: #fir { width: 287px; height: 29px;

214

Webdesign s webovými standardy

background: url(fir.gif) no-repeat; } #fir span { display: none; }

Minule jsme text schovali pomocí vlastnosti display prvku <span>. Zde specifikujeme výšku a šířku obrázku použitého k nahrazení, jakož i obrázek samotný, za použití vlastnosti background. Otevřeli jsme "obrázek" u prvku

který sdílí stejné rozměry jako obrázek (287×29 pixelů). Obrázek prosvitne za textem, který jsme schovali pomocí vlastnosti display. Obrázek 14-3 nám ukazuje výsledek hlavičky v prohlížeči. Vše, co vidíme, je stylizovaný obrázek. Skvělé!

Obrázek 14-3. Výsledky použití metody FIR (Fahrner Image Replacement).

Výhody Použitím metody CSS místo kódu zajistíme, že prohlížeče a zařízení, které CSS nepodporují, zobrazí čistý text. Vyměňování grafiky je tak snadné, jako aktualizace jediného souboru CSS; nemusíme aktualizovat kód. Spolu s těmito výhodami ale přichází i několik stinných stránek, které je velice důležité zmínit.

Nevýhody Expert na přístupnost Joe Clark učinil rozsáhlý výzkum toho, jak selhává metoda FIR u uživatelů, kteří používají čtečky obrazovky nebo jiný podpůrný software ke čtení webových stránek. Výsledky jeho testů si lze v úplnosti přečíst v jeho článku "Skutečnosti a názory na FIR" (Facts and Opinion About Fahrner Image Replacement; www.alistapart.com/articles/fir/). V něm ukazuje (mimo jiné), že většina čteček obrazovky se (možná chybně) řídí touto deklarací CSS: #fir span { display: none; }

Text se neschová pouze vizuálně, čtečky obrazovky jej také kvůli tomuto pravidlu úplně vynechají. Někdo může tvrdit, že vlastnost display by měly vzhledem k její povaze rozeznat pouze zařízení s obrazovkou a že by snad měly být vytvořeny nové typy médií CSS specificky pro čtečky obrazovky, aby

Kapitola 14 – Nahrazování obrázků

215

měli návrháři lepší kontrolu nad tím, jak různé systémy mohou prezentovat budoucí techniky náhrady obrázkem; nebo že by se měl software pro čtení obrazovky držet jednoho z existujících typů médií, jakým je např. aural. Mimo záležitost se zobrazením textu u čteček obrazovky má FIR ještě dvě další nevýhody:

• Pro správné fungování této metody je nutné použít sémanticky nevýznamný prvek <span>. • Ve výjimečném případě, kdy uživatelé ve svém prohlížeči zablokují zobrazení obrázků (často z důvodů šetření šířkou pásma), ale ponechají možnost funkce CSS, nezobrazí se ani text ani obrázek na pozadí.

Zvažte pro a proti Faktem zůstává, že použitím metody FIR návrháři riskují, že postižení nebudou mít přístup k celému obsahu. Totéž (vzdáleně) riskují u uživatelů, kteří používají kombinace "obrázky ano/CSS ne". Trik spočívá v uvážení výhod a nevýhod, pochopení stinných stránek a v opatrnosti. Existuje pár případů, kdy by FIR ještě bylo smysluplné. O dva z nich se s vámi podělím v části "Něco navíc" na konci této kapitoly. Kvůli těmto objevům v oblasti přístupnosti, které vypluly na povrch, začali další návrháři a vývojáři provádět úpravy konceptu nahrazování obrázkem a nacházeli nové způsoby, jak běžný text "schovat" a přitom vložit obrázek do pozadí. Podívejme se na pár dalších metod.

Metoda B: Nahrazení obrázkem – metoda Leahy/Langridge Metoda LIR, kterou současně vyvinuli Seamus Leahy (www.moronicbajebus.com/playground/ cssplay/image-replacement/) a Stuart Langridge (www.kryogenix.org/code/browser/lir/), se vydává na cestu zvládnutí problematiky nahrazování obrázkem bez použití bezvýznamného prvku <span>, který vyžadovala metoda FIR. Místo použití vlastnosti display ke schování textu, LIR text odstraňuje nastavením výšky obsahujícího prvku (v našem příkladu je jím

) na hodnotu 0 a dále nastavením výplně navrchu tak, aby se rovnala výšce obrázku, který má být k nahrazení použit.

Kód a CSS Jelikož nepotřebujeme v této metodě dodatečný prvek <span>, náš kód se zredukuje na pouhé:

Leahy/Langridge Image Replacement

A CSS, které nám nahrazení textu obrázkem (na obrázek 14-4) zaručí, je následující jednoduchá deklarace: #lir {

Webdesign s webovými standardy

216 padding: 90px 0 0 0; overflow: hidden; background: url(lir.gif) no-repeat; height: 0px !important;

/* pro většinu prohlížečů */

height /**/:90px;

/* pro IE5/Win */

}

Obrázek 14-4. Obrázek lir.gif vytvořený v obrázkovém editoru.

Obrázek vybraný pro náhradu za text má výšku 90 pixelů, proto je pro výplň navrchu nastavena stejná hodnota. Pro většinu prohlížečů nastavujeme výšku na hodnotu 0, což v podstatě odstraní text (nebo cokoliv jiného, co je v prvku

obsaženo). Abychom zajistili, že předchozí hodnota se rozpozná přednostně před hodnotou následující (pouze pro IE5/Windows), použili jsme pravidla !important. Kompetentní prohlížeče budou druhé pravidlo pro výšku ignorovat, zatímco IE5/Windows jej rozpozná.

Trápení s obdélníkovým modelem (Box model) Poslední pravidlo se používá k urovnání nepochopení obdélníkového modelu CSS ze strany IE5/Windows (viz "Problém s obdélníkovým modelem" v kapitole 12). Jelikož výplň je v IE5/Windows přidána k hodnotám výšky a šířky, budeme muset specificky u těchto prohlížečů zacházet s upravenou hodnotou. Výška bude v tomto případě vždy rovna výšce obrázku, který používáme k nahrazení.

Nevýhody Zatímco metoda B umožňuje zapomenout na dodatečný prvek <span> (oříznutí kódu se vždy hodí) sdílí s metodou A jistou nevýhodu. Je jí skutečnost, že uživatelé, kteří mají vypnuté zobrazování obrázků a aktivované CSS, neuvidí vůbec nic. Mohli bychom také tvrdit, že další nevýhodou metody LIR je to, že vyžaduje trik na řešení problému s obdélníkovým modelem, aby se IE5/Windows choval správně. Jelikož metoda B nepoužívá ke schování textu vlastnost display, mohlo by se předpokládat, že tato metoda je lepší pro uživatele využívající software ke čtení obrazovky, ale stejně jako metodu A, i metodu Leahy/Langridge bychom měli užívat s maximální obezřetností. Musíme vzít v úvahu záležitost s přístupností varianty "obrázky vypnuté/CSS zapnuté".

Kapitola 14 – Nahrazování obrázků

217

Podívejme se na další variaci nahrazování obrázkem vyvinutou M. Rundlem.

Metoda C: Pharkova metoda Jednou z úžasných vlastností Webu je to, že lidé neustále vylepšují techniky a hledají alternativní způsoby k dosažení daných cílů. V srpnu 2003 přišel vývojář Mike Rundle se svou vlastní variací nahrazování obrázkem (http://phark.typepad.com/phark/2003/08/accessible_imag.html). Použil k tomu unikátní myšlenku přiřazení velké záporné hodnoty odsazení pro text, který chceme schovat. Text je tedy stále na obrazovce, ale má takové odsazení, že ani na největších monitorech jej neuvidíme. Nápadité!

Kód a CSS Jako Metoda B, tak i Pharkova metoda (podle přezdívky Mikeova webového serveru) se také za účelem správného fungování vyhýbá potřebě zvláštního kódu. Kód naší hlavičky by vypadal takto:

The Phark Method

Prvek <span> navíc, který jsme potřebovali v případě metody FIR, není touto metodou vyžadován. Podívejme se na zjednodušující CSS použité ke schování textu a jeho nahrazení obrázkem z obrázku 14-5.

Obrázek 14-5. Obrázek o výšce 26 pixelů, který použijeme jako náhradu (phark.gif). #phark { height: 26px; text-indent: -5000px; background: url(phark.gif) no-repeat; }

Jak vidíte, metoda C je zdaleka nejlepší a nevyžaduje trik na řešení problému s obdélníkovým modelem ("Box Model Hack"), ani dodatečný kód. Odsazením textu o nesmyslné množství záporných pixelů text vytěsníme tak, že je pro uživatele neviditelný. Podobně jako u metody B uživatelé softwaru na čtení obrazovek by měli stále moci text v pohodě číst, což je jistě zlepšení.

Pořád tomu něco chybí Přestože se Pharkova metoda zavádí nejlépe, stále nedokáže vyřešit situaci "obrázky vypnuté/CSS zapnuté". I když by se to mohlo jevit jako velice vzácná situace, znamená to stále, že v době psaní těchto řádků neexistuje dokonalé řešení.

Webdesign s webovými standardy

218

Zrekapitulujme si každou z diskutovaných metod a povšimněme si jejich rozdílů.

Shrnutí Podívali jsme se zblízka na tři oblíbené metody náhrady obrázkem počínaje původní metodou FIR a dvěma jejími následovníky konče. Žádná z technik sice není dokonalým řešením problému, ale např. metoda M. Rundlea se k ideálu velice blíží, a může se uplatnit ve skutečném světě, pokud ovšem její nástrahy a nevýhody nebudeme brát na lehkou váhu. Vypišme si hlavní rozdíly mezi třemi metodami: Metoda A:

• Vyžaduje bezvýznamný dodatečný prvek <span>. • Software na čtení obrazovky běžně používaný v době psaní těchto odstavců nic nevysloví kvůli tomu, že bere na vědomí vlastnost display (založeno na objevech J. Clarka).

• Ve variantě "obrázky vypnout/CSS zapnout" se nic neobjeví. Metoda B:

• • • •

Nevyžaduje dodatečný kód. Software na čtení obrazovky by měl číst text normálně. Pro IE5/Windows je nutné použít "Box Model Hack". V případě nastavení "obrázky vypnout/CSS zapnout" se neobjeví nic.

Metoda C:

• Nevyžaduje dodatečný kód. • Software na čtení obrazovky by měl číst text normálně. • V situaci, kdy je nastaveno "obrázky vypnout/CSS zapnout", se nic neobjeví. Poslední nevýhody metody C sdílejí všechny současné populární metody. Stále další a další vývojáři však objevují nové způsoby zpracování techniky nahrazení obrázkem a proto věřím, že nakonec bude nalezeno řešení, které uspokojí každého. Do té doby existuje pár praktických aplikací obecné myšlenky nahrazení obrázkem a my se na dvě z nich podíváme v části "Něco navíc" této kapitoly. Je důležité zmínit, že návrhář D. Shea, který se drží standardů, stav nahrazování obrázkem široce sledoval a udržoval pěkně organizovanou stránku, která zahrnuje všechny metody popisované v této kapitole a ještě nějaké další. Určitě jeho stránky sledujte (je tam např. článek věnovaný přehledu technik "Revised Image Replacement"; www.mezzoblue.com/tests/revised-image-replacement/).“

Kapitola 14 – Nahrazování obrázků

219

Něco navíc V části "něco navíc" se podívejme na dva případy, kdy by bylo v reálném světě oprávněné využít náhradu obrázkem. Nejdříve se budeme zabývat užitečným trikem s prohozením loga, který mi poprvé vysvětlil D. Bowman, významný popularizátor originální techniky FIR metody A. Pak vám sdělím, jak byly za použití náhrady obrázkem bez JavaScriptu navrženy záložky navigačního systému na stránkách Fast Company ’s.

Prohození loga V této kapitole jsme viděli, jak lze CSS použít k náhradě textu obrázkem. Každá z metod k tomu používaných je stižena určitými nedostatky. Tyto nedostatky ale zůstanou stranou, když jednu z těchto metod použijete k nahrazení obrázku … jiným obrázkem. Ale proč byste to měli chtít udělat?

Hi-fi a lo-fi Jedním důvodem prohození obrázků by mohlo být použití různých log webového serveru – jednoho loga pro prohlížeče, které umí CSS používat normálně (s odkazem ve vlastnosti background) a jiného loga, které přijímají starší prohlížeče, příruční zařízení, čtečky obrazovky atd. To se hodí obzvláště tehdy, když hi-fi (high-fidelity, vysoce věrné) logo používá průhlednost nebo barvy specifické pro CSS design vašich stránek. Když není CSS podporováno nebo aktivováno, budete možná chtít, aby nestylizovaná verze zobrazila lo-fi (low-fidelity, snížená věrnost) verzi loga, která ještě vypadá dobře.

Příklad Abych se vyhnul právníkům specializujícím se na autorská práva, použiji opět příklad z mého vlastního webového serveru. Nejen, že tu prohazuji loga, ale počítám také s tím, že na jakékoliv stránce jiné, než je domovská stránka, lze stále kliknout na verzi loga určenou pro CSS a použít ji jako odkaz na stránku index. Podívejme se na kód, který používám na své domovské stránce pro logo, a na kód pro další stránky. Pro domovskou stránku:

Na všech ostatních stránkách je logo, které uživatele po kliknutí nasměruje zpět na domovskou stránku.

220

Webdesign s webovými standardy



Dvě loga Obrázek 14-6 a 14-7 ukazují loga, která jsem použil. První je na stránce zapsáno kódem pro nestylizovanou verzi (lo-fi), druhé bude odkazováno CSS pro moderní verze prohlížečů (hi-fi).

Obrázek 14-6. Obrázek logo_lofi.gif, který uvidí nestylizované prohlížeče (lo-fi).

Obrázek 14-7. Obrázek logo_corn.gif, který uvidí prohlížeče akceptující CSS (hi-fi).

Text hi-fi loga je bílý a má bílé průhledné pozadí, které má sedět na pozadí barvy kukuřice. Proto by vypadalo v prohlížečích pro nestylizovanou verzi stránek divně. Z tohoto důvodu jsem se rozhodl prohodit loga pomocí CSS – abych mohl zvolit jedno z nich podle schopností prohlížeče.

CSS Dotáhněme to tedy do konce společně s CSS, které to všechno umožní. Nejdříve schováme řádkový obrázek nastavením jeho šířky na hodnotu 0. Vzpomeňme, že nepoužíváním vlastnosti display ke schování lo-fi loga máme lepší šanci u softwaru na čtení obrazovky, který čte schovaný obrázek (prostřednictvím poskytnutého textu): #logo img { display: block; width: 0; }

Za další, přiřkněme hi-fi logo prostřednictvím vlastnosti background prvku <span>, který jsem tam přimontoval. Ano, je to bezvýznamné a bezvýznamné sémanticky, ale udělejme v tomto případě výjimku. #logo span { width: 173px; height: 31px;