Zdrojový kód jako archeologické naleziště

Zkuste si otevřít archivovanou verzi libovolného většího webu z přelomu tisíciletí a podívejte se do zdrojového kódu. Místo nadpisů, odstavců a navigace najdete les značek <table>, <tr> a <td>, ve kterém se snadno ztratíte. Tabulka uvnitř buňky, která je uvnitř další tabulky, která je – jak jinak – zase v buňce tabulky. Mezi tím vším jsou rozeseté obrázky jménem spacer.gif, blank.gif, pixel.gif nebo dot_clear.gif, každý s jinými hodnotami atributů width a height.

Na první pohled to vypadá jako práce někoho, kdo HTML nerozuměl. Ve skutečnosti šlo o vrchol tehdejšího řemesla. Webdesignéři konce devadesátých let byli vynalézaví lidé, kteří z jazyka určeného k popisu vědeckých dokumentů vymačkali sazbu srovnatelnou s časopisem. Jen to stálo spoustu kódu, nervů a kompromisů.

Web, který o layoutu nechtěl nic vědět

Abychom pochopili, proč to celé vzniklo, musíme se vrátit k původní myšlence HTML. Tim Berners-Lee ho navrhl jako jazyk pro popis struktury: tohle je nadpis, tohle odstavec, tohle odkaz. Jak bude dokument vypadat, mělo být na prohlížeči a do určité míry na čtenáři. Myšlenka to byla krásná a z dnešního pohledu prozíravá – vždyť přesně k ní jsme se po letech vrátili.

Jenže na web brzy dorazili grafici z tiskového světa a marketingová oddělení. Ti byli zvyklí na sazbu v QuarkXPressu nebo PageMakeru, kde má každý prvek přesnou pozici, a chtěli totéž. Logo vlevo nahoře, navigace ve sloupci, obsah uprostřed, reklama vpravo. HTML jim k tomu nenabízelo nic. Žádné sloupce, žádné pozicování, žádnou kontrolu nad mezerami. Text prostě tekl shora dolů přes celou šířku okna.

CSS sice formálně existovalo – specifikace CSS1 vyšla jako doporučení W3C v prosinci 1996 –, ale podpora v prohlížečích byla v praxi tragická. Netscape Navigator 4 implementoval kaskádové styly tak nespolehlivě, že nejednou bylo bezpečnější je vůbec nepoužít. Kdo chtěl mít jistotu, že stránka bude vypadat stejně u klienta i u jeho šéfa, musel sáhnout po něčem jiném.

Tabulka: nouzové řešení, které se stalo standardem

Tím „něčím jiným“ se staly tabulky. Netscape je uvedl už v roce 1995 a s HTML 3.2 z ledna 1997 se dostaly i do oficiálního standardu. Byly určené pro tabulková data, tedy pro jízdní řády, ceníky a výsledky měření. Designéři si ale rychle všimli, že tabulka je vlastně mřížka, a mřížka je přesně to, co potřebuje každý layout.

Typická kostra stránky vypadala zhruba takto:

html

<table width="760" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td colspan="3"><img src="img/header.gif" width="760" height="90" alt=""></td>
  </tr>
  <tr>
    <td width="160" valign="top" bgcolor="#003366">… navigace …</td>
    <td width="440" valign="top">… obsah …</td>
    <td width="160" valign="top" bgcolor="#EEEEEE">… reklama …</td>
  </tr>
</table>Code language: HTML, XML (xml)

Šířka 760 pixelů nebyla náhoda. Většina uživatelů tehdy měla monitor s rozlišením 800 × 600, a když odečtete posuvník a okraje okna, zbude právě kolem 760 pixelů. Magická trojice border="0" cellpadding="0" cellspacing="0" se psala do každé tabulky automaticky, protože výchozí hodnoty prohlížečů přidávaly mezery a rámečky, které nikdo nechtěl. Atributy bgcolor, valign a align suplovaly to, co dnes řeší jediný řádek CSS.

Tabulky měly jednu obrovskou výhodu: buňky v jednom řádku měly vždy stejnou výšku. Sloupec s navigací s modrým pozadím se tak táhl až dolů, ať byl obsah jakkoli dlouhý. Tuhle vlastnost jsme pak s CSS layoutem na celé dlouhé desetiletí ztratili.

Spacer.gif: průhledný pixel, který nesl celý web

Tabulky měly i své rozmary. Prohlížeče zacházely se šířkami buněk po svém: atribut width chápaly spíš jako doporučení, a pokud byla buňka prázdná, klidně ji zcela zbortily. Jak tedy zajistit, aby měl levý sloupec opravdu 160 pixelů, nebo aby mezi dvěma bloky byla mezera přesně 12 pixelů?

Odpověď zpopularizoval David Siegel ve své knize Creating Killer Web Sites z roku 1996. Navrhl použít průhledný obrázek GIF o rozměrech jeden krát jeden pixel a v HTML mu nastavit libovolnou šířku a výšku:

html

<img src="spacer.gif" width="160" height="1" alt="">Code language: HTML, XML (xml)

Prohlížeč obrázek roztáhl na požadovanou velikost, a protože byl průhledný, nebylo ho vidět. Buňka, do které jste ho vložili, se už nemohla zmenšit pod jeho šířku. Najednou jste měli v ruce pravítko. Spacer se vkládal do prázdných buněk, aby nekolabovaly, na začátek odstavců jako odsazení prvního řádku, mezi obrázky jako mezera a do posledního řádku tabulky jako „vynucovač“ šířky sloupců. Častou praxí byl celý řádek tabulky složený jen ze spacerů, který neměl jiný účel než zafixovat šířku všech sloupců.

Malý GIF měl jen několik desítek bajtů a po prvním stažení zůstal v cache, takže na pomalém vytáčeném připojení – vzpomeňte na modem 56k a jeho pískání při navazování spojení – nestál prakticky nic. To bylo pro jeho popularitu klíčové.

Netscape se dokonce pokusil situaci řešit vlastní značkou <spacer>, kterou zavedl v Navigatoru 3. Umožňovala zapsat <spacer type="block" width="100" height="20">. Jenže Internet Explorer ji nikdy nepodporoval, a tak zůstala kuriozitou. Průhledný GIF fungoval všude.

Zajímavé je, že sám Siegel brzy svého vynálezu litoval. V roce 1997 napsal esej s výmluvným názvem The Web Is Ruined and I Ruined It, ve kterém přiznal, že triky jako spacer.gif zaneřádily web prezentačním kódem. Džina ale už do lahve vrátit nešlo.

Tabulky v tabulkách

Jednoduchá tabulka na složitější design nestačila. Jakmile jste chtěli rámeček kolem boxu, zaoblené rohy nebo několik nezávislých mřížek na jedné stránce, začali jste tabulky vnořovat.

Klasickým trikem byl tenký rámeček. Atribut border vykresloval ošklivý trojrozměrný okraj, takže se místo něj použila vnější tabulka s barvou pozadí a cellspacing="1", uvnitř které ležela tabulka s bílým pozadím. Ten jeden pixel mezery prosvítal jako elegantní linka. Na každý box tedy připadaly dvě tabulky.

Zaoblené rohy byly ještě náročnější disciplínou. Box se skládal z mřížky tři krát tři: v rozích čtyři obrázky s výsečí kruhu, po stranách buňky s opakujícím se pozadím nebo s roztaženým spacerem a uprostřed obsah. Když se designér rozhodl změnit barvu nebo poloměr, znamenalo to vyexportovat a nahrát čtyři nové obrázky.

Vnořování mělo i nečekané dopady na výkon. Netscape Navigator 4 nevykreslil tabulku, dokud nestáhl a nespočítal celý její obsah. Pokud byla celá stránka zabalená do jedné obří tabulky, uživatel s pomalým připojením zíral na bílou obrazovku, dokud se nenačetlo úplně všechno. Zkušení kodéři proto stránku dělili do několika samostatných tabulek pod sebou: hlavička, tělo, patička. Záhlaví se tak zobrazilo dřív a uživatel aspoň viděl, že se něco děje.

Hloubka vnoření pět nebo šest úrovní nebyla ničím neobvyklým. Najít v takovém kódu chybějící </td> bylo jako hledat jehlu v kupce sena – zvlášť když jediným „validátorem“ bylo to, že se stránka v jednom z prohlížečů rozpadla.

Rozřezaná grafika a záhadné mezery

Grafici často navrhli celou stránku jako jeden velký obrázek ve Photoshopu. Kodér ji pak „rozřezal“ (anglicky slicing) na desítky menších obrázků a poskládal je zpět pomocí tabulky. Nástroje jako Adobe ImageReady nebo Macromedia Fireworks to uměly automaticky: vygenerovaly HTML s tabulkou, kde každá buňka obsahovala jeden dílek, a s hromadou atributů rowspan a colspan, aby nepravidelné tvary do sebe zapadly. Navrch přidaly JavaScript pro rollover efekty, kdy se při najetí myší vyměnil obrázek tlačítka za jinou verzi.

S rozřezanou grafikou přišel jeden z nejzáludnějších problémů té doby: mezery mezi obrázky. Stačilo, aby za značkou <img> následoval zalomený řádek před </td>, a prohlížeč pod obrázkem vykreslil několik pixelů volného místa. Obrázek je totiž ve výchozím stavu řádkový prvek a sedí na účaří textu, pod kterým je rezerva pro dotahy písmen jako „g“ nebo „y“. Pečlivě poskládaná mozaika se tak rozpadla na proužky.

Řešením bylo psát kód „na jeden řádek“, tedy <td><img …></td> bez jediné mezery, což čitelnosti příliš nepomohlo. Problém se přitom stal tak rozšířeným, že když Mozilla začala věrně dodržovat standardy, rozbila tím obrovské množství webů. Vývojáři proto kolem roku 2002 zavedli vedle režimů quirks a standards ještě třetí, takzvaný almost standards mode, který se od standardního liší téměř jen tím, jak zachází s obrázky v buňkách tabulek. Tento režim prohlížeče podle doctype zapínají dodnes. Jeden průhledný pixel a pár zalomených řádků tedy ovlivnily, jak funguje vykreslovací jádro každého moderního prohlížeče.

Nástroje, písma a „optimalizováno pro“

K atmosféře doby patří i nástroje. Microsoft FrontPage generoval kód, ze kterého se zkušeným kodérům ježily vlasy. Macromedia Dreamweaver byl o poznání lepší a jeho režim Layout View dovoloval kreslit tabulky myší – výsledkem byl často kód plný spacerů, které nástroj vkládal automaticky. Mnoho lidí ale stejně psalo HTML ručně v Poznámkovém bloku nebo v PSPadu a přes FTP ho nahrávalo rovnou na server.

Formátování textu zajišťovala značka <font>. Každý odstavec, každá buňka tabulky a každý odkaz potřebovaly svůj vlastní <font face="Verdana, Arial, Helvetica" size="2" color="#333333">, protože starší prohlížeče formátování do buněk tabulky nedědily. Změnit písmo na celém webu znamenalo hromadné hledání a nahrazování v desítkách souborů.

Patičky zdobily ikonky s nápisy jako „Optimalizováno pro Internet Explorer 5 a rozlišení 800 × 600“. Nebyla to arogance, ale upřímné přiznání: autor otestoval stránku v jednom prohlížeči a jedné velikosti okna a za nic dalšího ručit nemohl. Kdo měl monitor s vyšším rozlišením, viděl web jako úzký proužek uprostřed obrazovky, a majitelé menších monitorů se museli smířit s vodorovným posuvníkem.

Proč to nakonec muselo skončit

Tabulkový layout fungoval, ale jeho daň byla vysoká a s rostoucím webem se zvyšovala.

Prvním problémem byla sémantika. Stránka postavená z tabulek neříkala strojům nic o tom, co je navigace, co hlavní obsah a co reklama. Vyhledávače i jiné nástroje musely strukturu odhadovat.

Druhým problémem byla přístupnost. Hlasové čtečky pro nevidomé čtou tabulky po řádcích a buňkách. U vnořeného layoutu to znamenalo, že uživatel musel vyposlechnout desítky prázdných buněk, než se dostal k článku. Proto se u spacerů tolik dbalo na prázdný atribut alt="" – bez něj čtečka hlásila „obrázek, spacer gif“ znovu a znovu.

Třetím problémem byla údržba. Vzhled byl napevno vepsaný do každé stránky. Redesign proto neznamenal úpravu stylopisu, ale přepsání celého webu. Stejný obsah navíc nešel snadno zobrazit jinak, například pro tisk nebo na malých displejích, které se mezitím začaly objevovat.

Čtvrtým problémem byla velikost. Prezentační kód často tvořil větší část HTML než samotný obsah a stahoval se znovu s každou stránkou.

Dlouhá cesta k CSS layoutu

Specifikace CSS2 z roku 1998 už přinesla pozicování i plovoucí prvky, ale do praxe se dostávala pomalu. V roce 1998 vznikla iniciativa Web Standards Project, která tlačila na výrobce prohlížečů, aby standardy konečně implementovali. Jeffrey Zeldman v roce 2001 vyzval designéry kampaní To Hell With Bad Browsers, aby přestali obětovat moderní kód kvůli Netscapu 4.

Zlom přišel v roce 2002, kdy Douglas Bowman převedl zpravodajský web Wired News na layout postavený čistě na CSS. Následující rok spustil Dave Shea projekt CSS Zen Garden: jeden a tentýž HTML dokument, ke kterému designéři z celého světa posílali vlastní stylopisy. Výsledky byly k nepoznání odlišné a krásné a definitivně ukázaly, že oddělení obsahu od vzhledu není jen akademická teorie.

Jenže CSS layout té doby stál na vlastnosti float, která byla navržena k obtékání obrázku textem, nikoli ke stavbě sloupců. Vývojáři tedy jen vyměnili jeden hack za jiný. Přišla éra clearfixu, faux columns od Dana Cederholma (obrázek na pozadí, který předstíral stejně vysoké sloupce, tedy přesně to, co tabulky uměly zadarmo), layoutu Holy Grail z dílny Matthewa Levina a nekonečných hacků pro Internet Explorer, který měl v režimu quirks vlastní, chybný výpočet box modelu. Zatímco tabulková generace bojovala se spacery, CSS generace bojovala s kolabujícími floaty a „double margin bugem“ v IE6. Ironií je, že vlastnost display: table by mnohé vyřešila, jenže Internet Explorer ji podporoval až od verze 8.

Konečně skutečné nástroje

Teprve s flexboxem a především s CSS Grid, který v roce 2017 během několika měsíců nasadily všechny hlavní prohlížeče, dostal web nástroje skutečně určené pro layout. Třísloupcová stránka, která kdysi vyžadovala několik vnořených tabulek a hromadu spacerů, dnes vypadá takto:

css

.page {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  grid-template-areas:
    "header header header"
    "nav    main   aside";
  gap: 12px;
}Code language: CSS (css)

Všimněte si, jak moc se Grid koncepčně podobá starým tabulkám. Mřížka, sloupce, slučování buněk, stejná výška v řádku. Tabulkoví kodéři měli v jádru pravdu: web opravdu potřeboval mřížku. Jen ji potřeboval v CSS, ne v HTML. A vlastnost gap je vlastně spacer.gif, který si konečně vysloužil důstojné místo ve specifikaci.

Kde tabulky žijí dodnes

Kdo si myslí, že tabulkový layout je mrtvý, nikdy nekódoval HTML e-mail. E-mailoví klienti jsou z hlediska podpory CSS zhruba tam, kde byly prohlížeče na začátku tisíciletí. Desktopový Outlook pro Windows od verze 2007 vykresluje e-maily jádrem Microsoft Wordu, které nezná floaty ani flexbox a s mnoha dalšími vlastnostmi si neporadí. Newslettery se proto dodnes skládají z vnořených tabulek s atributy width, bgcolor a cellpadding a nejeden šablonovací framework pro e-maily pod kapotou generuje kód, který by v roce 1999 nikoho nepřekvapil. Občas v něm najdete i průhledný GIF.

Závěr: vynalézavost z nouze

Při pohledu zpět je snadné se tabulkovému layoutu vysmívat. Kód byl nečitelný, nepřístupný a neudržovatelný. Jenže lidé, kteří ho psali, nebyli hloupí. Pracovali s nástroji, které měli, pro prohlížeče, které jejich uživatelé skutečně používali, a dokázali z nich dostat výsledky, se kterými tvůrci HTML vůbec nepočítali.

Spacer.gif je v tomto smyslu krásným symbolem webového řemesla: obrázek, který nic nezobrazuje, a přesto po léta držel pohromadě velkou část internetu. Ukazuje, že web se vždy vyvíjel tak trochu zdola – nejdřív přišla potřeba, pak hack a teprve nakonec standard. Flexbox, Grid i gap vznikly mimo jiné proto, že celá generace vývojářů léta dokazovala, že po nich existuje poptávka.

Až budete příště psát grid-template-columns, věnujte vzpomínku tomu malému průhlednému pixelu. Odvedl kus práce.