Patička, která říkala víc, než chtěla

Věta „Optimalizováno pro Internet Explorer 6 při rozlišení 1024×768“ se na českém webu objevovala zhruba v letech 2002 až 2008 tak často, že ji člověk přestal vnímat. Visela na stránkách obcí, autoservisů, fotbalových klubů i firem, které o sobě tvrdily, že jsou lídrem na trhu. Většinou ji nikdo nečetl. A když ji někdo přece jen přečetl, byl to obvykle ten, komu se stránka rozpadla.

Formálně šlo o informaci pro uživatele. Ve skutečnosti to bylo něco jako cedulka „Za škody způsobené dětmi ručí rodiče“. Autor dával najevo, že udělal, co mohl, a pokud vidíte něco jiného než on, chyba je na vaší straně. Máte jiný prohlížeč, menší monitor, nebo prostě smůlu.

Abychom pochopili, proč tahle věta vznikla a proč tak dlouho přežívala, musíme se vrátit ještě o kus dál.

Nejlépe zobrazitelné v Netscape Navigatoru

Webová přiznání jsou starší než Internet Explorer 6. V polovině devadesátých let zdobila spoustu stránek tlačítka „Best viewed with Netscape Navigator“, případně jejich konkurenční varianta s Internet Explorerem. Netscape k tomu měl i vlastní program: kdo na web umístil tlačítko „Netscape Now!“, pomáhal propagovat prohlížeč a zároveň dával návštěvníkům signál, že stránka používá nejnovější rozšíření HTML.

A těch rozšíření bylo hodně. Netscape přinesl značku <blink>, Microsoft odpověděl značkou <marquee>. Oba prohlížeče si vymýšlely vlastní atributy, vlastní objektové modely pro JavaScript a vlastní představu o tom, jak má vypadat tabulka s border="0". První válka prohlížečů se nevedla jen o podíl na trhu, ale i o to, čí verze HTML se prosadí. Vývojáři, kteří uprostřed toho stáli, často rezignovali a psali pro jeden prohlížeč. Tlačítko v patičce bylo jen poctivým přiznáním této volby.

Už tehdy proti tomu vznikl odpor. V roce 1997 spustila Cari D. Burstein kampaň Viewable With Any Browser, která vyzývala autory, aby psali stránky použitelné v jakémkoli prohlížeči, včetně textového Lynxe. Kampaň měla vlastní logo, které si autoři mohli umístit do patičky jako protiváhu. Zajímavé je, že argumenty z té doby by dnes klidně mohly stát v libovolném článku o přístupnosti. Nemůžete vědět, čím se na váš web kdo dívá, tak s tím počítejte.

Šestka přichází

Internet Explorer 6 vyšel v srpnu 2001 a o pár týdnů později se dostal ke všem uživatelům nových Windows XP. Ve své době to byl solidní prohlížeč. Podporoval CSS lépe než předchůdci, uměl standardní režim vykreslování zapínaný doctypem a byl rychlý. Netscape byl v té době v troskách, Mozilla teprve dozrávala a Opera byla pro většinu lidí exotika.

Výsledek byl předvídatelný. Kolem roku 2004 připadala podle různých měření na Internet Explorer naprostá většina návštěv a drtivá část z toho na verzi 6. A pak se stalo něco, co se v softwaru vidí málokdy. Microsoft vývoj prohlížeče prakticky zastavil, tým se z velké části rozešel k jiným projektům a další verze přišla až na podzim 2006. Pět let tak web stál na prohlížeči, který se nevyvíjel.

Pro vývojáře to mělo paradoxní důsledek. Na jedné straně bylo testování jednoduché, protože prakticky stačil jeden prohlížeč. Na druhé straně se ten jeden prohlížeč nikdy neopravil a všechny jeho chyby se staly pevnou součástí platformy. A tak vznikla věta, o které je tento článek.

Proč zrovna 1024×768

Druhá polovina přiznání je méně slavná, ale stejně výmluvná. Na přelomu tisíciletí převládaly patnáctipalcové CRT monitory s rozlišením 800×600. Kolem roku 2003 se začaly prosazovat sedmnáctipalcové obrazovky a s nimi 1024×768. Designéři to přivítali, protože konečně měli kam dát třísloupcový layout s bannerem 468×60 a postranním menu.

Typický web té doby měl pevnou šířku, nejčastěji 770 nebo 980 pixelů, aby se vešel i se svislým posuvníkem. Někdy byl vycentrovaný, často ne. Kdo měl menší monitor, dostal vodorovný posuvník. Kdo měl větší, koukal na úzký pruh obsahu uprostřed šedé plochy. Pružné layouty sice existovaly, ale byly pracné a v IE6 kvůli chybějícím vlastnostem max-width a min-width navíc dost bolestné.

Uvedení rozlišení v patičce tedy znamenalo zhruba tohle: stránku jsem nakreslil ve Photoshopu na konkrétní plátno a rozřezal ji do tabulky. Pokud je vaše okno jiné, nepočítal jsem s vámi. Je to v podstatě přiznání, že web byl chápán jako tiskovina s pevným formátem, ne jako médium, které se přizpůsobuje čtenáři.

Co všechno se skrývalo pod slovem optimalizace

Optimalizace v tomto smyslu znamenala hlavně obcházení chyb. Seznam toho, co musel vývojář pro IE6 znát, by vydal na samostatnou knihu, a takové knihy opravdu vycházely. Pár klasik stojí za připomenutí:

• Box model v režimu quirks. Bez správného doctypu počítal IE6 šířku prvku včetně paddingu a rámečku. Stačil chybějící nebo špatně napsaný doctype, případně XML deklarace na prvním řádku, a layout se rozjel o desítky pixelů.
• Dvojitý okraj u plovoucích prvků. Prvek s float: left a levým okrajem dostal v IE6 okraj dvojnásobný. Opravovalo se to přidáním display: inline.
• hasLayout. Interní vlastnost vykreslovacího jádra, o které dlouho nebylo nikde nic napsáno, ale která rozhodovala o tom, jestli se prvek zobrazí správně. Zapínala se například pomocí zoom: 1 nebo height: 1%.
• Průhledná PNG. IE6 neuměl alfa kanál v PNG a místo poloprůhlednosti zobrazoval šedavé pozadí. Řešením byl proprietární filtr AlphaImageLoader, který byl pomalý a rozbíjel odkazy uvnitř prvku. Proto se tak dlouho používaly GIFy s nehezky zubatými okraji.
• Chybějící selektory. Žádný :hover mimo odkazy, žádný selektor přímého potomka >, žádné atributové selektory. Rozbalovací menu se proto psala v JavaScriptu, nebo se do stránky přidával HTC soubor, který IE6 naučil hover i u ostatních prvků.

Na to všechno se postupně ustálily hacky. Star HTML hack (* html .trida) cílil jen na IE6 a starší verze, podtržítkový hack (_height: 1px) zase využíval toho, že IE6 nevadilo podtržítko na začátku vlastnosti. Čistší byly podmíněné komentáře, kterými šlo načíst zvláštní stylopis jen pro Internet Explorer. Microsoft je kupodivu podporoval oficiálně, a tak se z nich stal relativně slušný způsob, jak držet hacky stranou od hlavního kódu.

Kdo si chtěl zahrát s ohněm, sáhl po CSS expression(), tedy po JavaScriptu přímo ve stylopisu. Dalo se jím dopočítat max-width nebo pozici prvku. Výraz se ale vyhodnocoval prakticky při každém pohybu myši a výkon stránky dokázal spolehlivě srazit na kolena.

Když se z doporučení stane závislost

Dokud IE6 ovládal trh, bylo přiznání v patičce víceméně neškodné. Problém nastal ve chvíli, kdy se trh začal měnit. Firefox 1.0 vyšel v listopadu 2004 a během několika let si ukrojil výrazný podíl. V Česku patřil k nejoblíbenějším prohlížečům vůbec. Pak přišlo Safari, Opera si udržovala věrné fanoušky a v roce 2008 vydal Google svůj Chrome.

Weby optimalizované pro IE6 se v nich často chovaly podivně, a to ne proto, že by nové prohlížeče byly horší. Spíš naopak. Dodržovaly standardy, a kód, který stál na chybách IE6, tak přestal fungovat. Nejhůř na tom byly intranety a podnikové aplikace. Ty stavěly na ActiveX, VBScriptu a proprietárních rozšířeních DOM a fungovaly jen v Internet Exploreru. Firmy proto nemohly přejít na jiný prohlížeč, a protože IE7 a IE8 už leccos dělaly jinak, často ani na novější verzi IE. Šestka se stala rukojmím vlastního úspěchu.

Hezky to ilustruje řetězec, kterým se prohlížeče serveru představují. Internet Explorer se v něm hlásil jako Mozilla/4.0 (compatible; MSIE 6.0; …), protože servery tehdy posílaly bohatší verzi stránky jen prohlížečům s Mozillou v názvu. Každý další prohlížeč pak musel něco přidat, aby ho weby nezařadily do špatné škatulky. Dnešní Chrome se tak dodnes hlásí jako Mozilla, AppleWebKit, KHTML, Gecko i Safari zároveň. Ta vrstevnatá archeologie je trvalou památkou na dobu, kdy weby místo zjišťování schopností prohlížeče hádaly podle jména.

Pohřeb s květinami

Kolem roku 2009 došla vývojářské komunitě trpělivost. V únoru toho roku začal Facebook vyzývat uživatele IE6 k aktualizaci, v Norsku se domluvilo několik velkých webů a spustilo podobnou kampaň, která se rychle rozšířila do dalších zemí. Google ukončil podporu IE6 ve svých aplikacích k 1. březnu 2010 a YouTube krátce nato.

Ve stejné době uspořádala agentura Aten Design Group v Denveru skutečný pohřeb Internetu Exploreru 6. Nechyběla rakev, smuteční projevy ani skupinka „demonstrantů“ s transparenty hájícími šestku navěky. Microsoft se k žertu přidal a tým Internet Exploreru poslal kytici s kartičkou, na které šestce děkoval za hezké časy a zval na konferenci MIX, kde chtěl ukázat kousek prohlížečového nebe. V roce 2011 pak spustil web IE6 Countdown, který sledoval podíl šestky ve světě a vyzýval k jejímu opuštění. Výrobce, který otevřeně odpočítává konec vlastního produktu, se nevidí každý den.

Oficiálně IE6 skončil spolu s podporou Windows XP v dubnu 2014. V Česku byl v té době už spíš kuriozitou, jinde, hlavně v Číně, se ale držel překvapivě dlouho. Definitivní tečku za značkou Internet Explorer udělal Microsoft v červnu 2022, kdy skončila podpora IE11 pro většinu verzí Windows 10.

Přiznání se jen převléklo

Bylo by pohodlné tvrdit, že dnes už nic takového neděláme. Jenže stačí se rozhlédnout. „Tato aplikace funguje nejlépe v Google Chrome“ je hláška, kterou uvidíte u videokonferencí, online kancelářských balíků i nejedné státní služby. Některé weby rovnou nabídnou stažení Chromu, když přijdete s Firefoxem. A když na mobilu něco nefunguje v Safari, často se ukáže, že to na iPhonu prostě nikdo nezkoušel.

Rozdíl oproti době IE6 je v tom, že dnešní dominantní jádro Blink se vyvíjí rychle a standardy obecně dodržuje. To je dobrá zpráva. Ta horší je, že s rychlým vývojem přicházejí API, která ostatní prohlížeče ještě nemají, a vývojáři je rádi použijí. Monokultura tedy nevzniká jen tam, kde prohlížeč stagnuje, ale i tam, kde ostatní nestačí jeho tempu. Lidé kolem Mozilly na to upozorňují už léta.

Patička s rozlišením se mezitím taky převtělila. Místo „1024×768“ dnes v zadáních stojí „navrženo pro iPhone“ nebo „desktop 1440“. Responzivní design sice zvítězil, ale návrhy se pořád dělají na pár konkrétních plátnech a všechno mezi nimi se nechává napospas breakpointům. Kdo někdy otevřel web na skládacím telefonu nebo v úzkém okně vedle editoru, ví, o čem mluvím.

Co si z toho vzít

Historie webových přiznání je ve skutečnosti historií jednoho pořád stejného pokušení: psát pro prostředí, které máme na stole, a ne pro to, které má čtenář. Pár poučení se z ní dá vytáhnout docela konkrétně.

Za prvé, zjišťování schopností vždycky vyhraje nad zjišťováním prohlížeče. Kontrola, zda existuje konkrétní API, nebo @supports v CSS přežije změnu názvu i verze. Čtení user-agenta nepřežije nic.

Za druhé, každý hack je dluh. Podmíněné komentáře byly lepší než star HTML hack, protože byly jasně oddělené a šly jednoho dne smazat. Dnešní obdobou jsou polyfilly a feature flagy. I ty by měly mít v kódu poznámku, kdy půjdou odstranit.

Za třetí, progresivní vylepšování není ideologie, ale pojistka. Stránka, která funguje i bez nejnovějších vymožeností a s nimi je jen hezčí, nikdy nepotřebuje cedulku v patičce.

A za čtvrté, monokultura je nebezpečná i tehdy, když je ten jediný prohlížeč dobrý. IE6 byl v roce 2001 taky dobrý.

Věta „Optimalizováno pro Internet Explorer 6 při rozlišení 1024×768“ dnes patří do stejné vitríny jako počítadla návštěv a animované GIFy s nápisem Under construction. Byla ale poctivější, než se zdá. Autor v ní aspoň přiznal, s čím počítal. Dnešní weby to často neřeknou, jen se potichu rozbijí. Možná by stálo za to tu patičku na chvíli vrátit, třeba jen do interní dokumentace, a napsat do ní, pro co jsme skutečně optimalizovali. Bývá to docela poučné čtení.