Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?

Dnešní článek patří do rubriky Subjektivně. Jejím cílem je poskytovat prostor pro názory a pohledy na aktuální dění v oblasti webových technologií i na jejich vývoj do budoucna. Jedná se o osobní názory, které se nemusí vždy shodovat s názory redakce. Pokud máte co říct, pojďte k nám psát Subjektivně.

Kodér vs. grafik a programátor

Když programátor napíše program, očekává, že program se bude vždy chovat přesně tak, jak jej napsal. Když grafik navrhne logo, zase všichni očekáváme, že logo bude vždy vypadat stejně. A když kodér nakóduje web, klient předpokládá, že jeho web bude za všech okolností vypadat tak, jak mu ho grafik vymyslel. Na první pohled to zní celkem logicky, na ten druhý si ale člověk uvědomí, že zatímco grafik i programátor vědí přesně, jak se výsledek jejich práce zpracuje a zobrazí uživateli, kodér hledá průnik zobrazovacích schopností prohlížečů.

Zmíněné předpoklady a chování vedou ke dvěma problémům:

1. Rozvoj webových technologií může brzdit jeden zastaralý, hojně používaný, prohlížeč.
2. Aby se webové technologie mohly pohnout kupředu, při určitém malém procentu uživatelů se v prohlížeči přestane testovat, prohlásí se za zastaralý a téměř nikdo se o něj již nezajímá.

Výsledkem je, že máme mnohem více práce, naše zdrojové kódy jsou samý <div>, samá třída a po nocích hledáme způsoby, jak obejít omezení staré technologie a vytvořit to, co si klient žádá.

Uživatelé starých prohlížečů pak nemají důvod přecházet na novou verzi prohlížeče, vždyť všechny webové stránky se jim zobrazují tak, jak mají. A protože tito uživatelé nepřešli, my musíme stránky pořád kódovat tak, aby bezchybně fungovaly i v těchto starých prohlížečích. Bludný kruh.

Až odejde IE6…

Již nějaký čas je jedním z největších snů webdesignérů to, aby IE6 odešlo na věčnost. Neznalí poměrů v oboru prohlížečů se pak před vydáním nové verze IE ozývají, že to bude poslední hřebíček do rakve IE6. Ti zkušenější spíše skepticky vrtí hlavou a na brzký odchod IE6 nevěří.

Ale připusťme si na chvilku fakt, že by skutečně IE8 srazilo podíl IE6 řekněme pod 5 %. Co se pak stane? Kapitán Pejsek vyhlásí tento den jako svátek všech webdesignérů a přestaneme tento neoblíbený prohlížeč všichni hromadně podporovat? Jenže tím ztratíme zhruba 5 potenciálních zákazníků z každé stovky. A důvod jejich ztráty, naše pohodlnost, se mi zdá jako zcela nedostačující.

Jako bych některé z vás slyšel křičet: Nejdřív tvrdíš, že IE6 de facto brzdí vývoj, a teď zase, že jej máme podporovat, i když jeho podíl spadne na mizivá procenta. Tak co s tím? Chtěl bych vám teď představit způsob, jakým podporovat nejen IE6, ale i jeho předchůdce a spoustu dalších prohlížečů a ještě si ušetřit práci a čas. Onen způsob se jmenuje:

Progressive Enhancement

Tento anglický termín představuje speciální přístup ke kódování webových stránek (do češtiny bychom jej mohli přeložit jako postupné vylepšování). V zásadě se jedná o to, že výsledné stránky budou v prohlížečích s dobrou podporou standardů vypadat tak, jak je grafik navrhl a budou si moci dovolit využít spoustu úžasných věcí z nových specifikací CSS či HTML. Ve starších prohlížečích pak budou vypadat o něco jednodušeji a řekněme hůře, ale budou stále dobře použitelné, přístupné a nijak nebudou odrazovat návštěvníka rozpadlým layoutem nebo něčím podobným.

Progressive Enhancement.

Jak na to? Postupně (viz obrázek s vrstvami). Nejprve se soustředíme na sémantické označkování obsahu a poté začneme postupně pomocí CSS tvořit layout a grafiku. Napřed nastavíme věci, které budou fungovat ve všech prohlížečích, a poté postupně vylepšujeme grafiku s tím, že pokud je určitá věc příliš složitá na implementaci ve starších prohlížečích, nebo vyžaduje kupříkladu čistě prezentační HTML, tak ji prostě implementujeme pouze v novějších prohlížečích, kde to lze udělat bez problémů. Odříznout starší prohlížeče od příslušných pravidel jistě všichni umíme, ať už pomocí pokročilých CSS selektorů (kterým staré prohlížeče nerozumí), nebo, v případě IE, pomocí podmíněných komentářů.

Všimněte si, že tento přístup vyřeší skoro všechny naše dříve zmíněné problémy. Můžeme používat moderní technologie a umožníme přístup na naše stránky v podstatě všem uživatelům. Paráda, ne? A pokud navíc chytře používáme pokročilé selektory, mohou nás částečně přestat trápit i rostoucí procenta uživatelů přicházejících na web z mobilu, kde je chaos v prohlížečích ještě větší a možnosti testování naopak menší.

Není to moc práce?

Na první pohled to tak určitě vypadá. Přístup vyžaduje poměrně detailní znalost schopností i starších prohlížečů (což lze obejít googlováním) a člověk musí nad kódováním najednou mnohem více přemýšlet.

Na druhý pohled si ovšem určitě uvědomíte, že přístup nám umožňuje škrtnout si nekonečné hodiny ladění pro IE6 a můžeme použít spoustu nových užitečných věcí z CSS 2.1 a občas i CSS3. (To ovšem záleží na cílové skupině webu. U některých webů zkrátka není dobrý nápad, aby se web nezobrazoval „v plné parádě“ ani uživatelům nejnovějšího přírůstku rodiny IE. U jiných webů to naopak nemusí být žádný problém.).

A někteří z vás možná volají: Vždyť to v IE6 stejně musí fungovat, tak jaképak škrtnutí nekonečných hodin ladění.. Zde mohu argumentovat pouze osobními zkušenostmi. Zprovoznit v IE6 základní layout není žádný problém, stačí si pamatovat pár věcí, které nikdy nesmím použít. Problém s IE6 nastává ve chvíli, kdy po něm chci něco nestandardního.

Příkladů je spousta, určitě si hned vzpomenete na poslední výmysl grafika, kam zakomponoval tunu kulatých rohů, průhledné PNG, spoustu přesného absolutního pozicování atd. Ano, všechno to jde udělat, něco snadněji, něco hůře. Otázka, na kterou si musíme odpovědět, je, zda se vynaložený čas na implementaci takového grafického prvku v IE6 (nebo kterémkoli jiném prohlížeči) vyplatí. Zastánci progressive enhancement tvrdí, že ne.

Klient na to nikdy nepřistoupí

Jeden z nejtěžších úkolů bude každopádně přesvědčit klienta, že je to ta správná věc pro jeho webové stránky. Argumentů můžete použít spoustu. Od zkrácení doby vývoje webu přes nižší výdaje za (kvalitní) kód, atd. Těžký kalibr pak může být to, že tuto techniku sami používáte na svých webových stránkách. Vždyť často si vás klient zvolí právě díky nim. Nabízí se mu pak otázka, že pokud si sám vybral firmu, která své stránky takto vybudované má, nebude to dost dobré i pro něj?

Ale protože člověk je sám sobě často nejhorším klientem a nechce sám ze sebe dělat pokusného králíka (výjimky jako já potvrzují pravidlo a jistě odpustí), ještě jednou vás odkáži na již zmíněný článek na A List Apart, který uvádí i příklady již funkčních webových stránek užívajících progressive enhancement.

Závěrem

Pokud jste se dočetli až sem, asi si uvědomujete, že se jedná o běh na dlouhou trať. Musí se změnit to, jak lidé přemýšlí o webových stránkách. Ale do budoucna to vypadá jako téměř jediná technika, která zajistí rychlý rozvoj webových technologií a zároveň umožní všem lidem pohodlný přístup na váš web.

Takže až budete redesignovat váš firemní web, zkuste se zamyslet nad tím, zda se chcete nadále nechat omezovat minulostí, nebo se chcete raději podívat do budoucnosti.