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

Dlouhé hodiny trávíme laděním stránek pro starší prohlížeče. Výsledný kód je pak plný prezentačního HTML a CSS obsahuje spoustu různých hacků. Je to tak správně? Pokusím se vás přesvědčit, že ne a že to jde i jinak. Pozor, dnes píšeme SUBJEKTIVNĚ!

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…

Internet Explorer 6

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

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ářů.

Wikipedie

Wikipedie říká:Progressive enhancement je webdesignerská strategie zdůrazňující přístupnost, sémantické značkování a externí linkování stylopisů a skriptovacích technologií. Progressive enhancement využívá webových technologií metodou vrstev, což dovoluje komukoliv přistupovat k základnímu obsahu a funkcionalitě stránky, ať používá jakýkoliv prohlížeč nebo internetové připojení. Uživatelům s lepším připojením a modernějšími prohlížeči zároveň nabízí podobu stránky s lepším uživatelským zážitkem.

Pro bližší seznámení se s touto metodou včetně konkrétních rad doporučuji skvělý článek Progressive Enhancement with CSS na magazínu A List Apart. Poprvé byl termín progressive enhancement použit v roce 2003.

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.

Vypadají vaše stránky stejně ve všech prohlížečích?

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 63

Přehled komentářů

eee invalidni clanek
byzi Re: invalidni clanek
Hoween Re: invalidni clanek
eee Re: invalidni clanek
VfB Re: invalidni clanek
Hoween Nošení dříví do lesa
smilelover Re: Nošení dříví do lesa
David Majda RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Jan Sládek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Martin Hložek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Martin Hložek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Miloslav Lešetický RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Miloslav Lešetický RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Martin Hložek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Jan Sládek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Martin Hložek RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
hloza RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Langi RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
Hoween RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
v6ak Gmail jako příklad
Martin Soukup klient na to nepřistoupí? hehe!
Hoween Re: klient na to nepřistoupí? hehe!
Sob Re: klient na to nepřistoupí? hehe!
karolf Re: klient na to nepřistoupí? hehe!
Langi Dobré
Hoween Re: Dobré
Langi Re: Dobré
Miloslav Lešetický Re: Dobré
Langi Re: Dobré
Martin Michálek jste na IE6 příliš příkrý
Hoween Re: jste na IE6 příliš příkrý
Jan Sládek Re: jste na IE6 příliš příkrý
Hoween Re: jste na IE6 příliš příkrý
Miloslav Lešetický Re: jste na IE6 příliš příkrý
Hoween Re: jste na IE6 příliš příkrý
kraag Re: jste na IE6 příliš příkrý
Martin Michálek Re: jste na IE6 příliš příkrý
VfB Re: jste na IE6 příliš příkrý
Martin Michálek Re: jste na IE6 příliš příkrý
Jan Sládek Re: jste na IE6 příliš příkrý
Hoween Re: jste na IE6 příliš příkrý
Martin Michálek Re: jste na IE6 příliš příkrý
Jan Sládek Re: jste na IE6 příliš příkrý
Martin Michálek Re: jste na IE6 příliš příkrý
xurpha Souhlas
karf Progressive Enhancement
David Grudl Dopato je?
Hoween Re: Dopato je?
v6ak nick
Petr Pecháček RE: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?
knapek User agent
Hoween Re: User agent
Dlouhán Re: User agent
Hoween Re: User agent
Zdroj: http://www.zdrojak.cz/?p=2938