Současnost a budoucnost layoutů: CSS tabulky

Dnes používaná řešení

V dnešní době máme několik možností, jak řešit layout webových stránek. Každý má své problémy, a tak vznikají různé CSS frameworky, které se některé z nich snaží řešit. Nutno ovšem říci, že nepříliš úspěšně (neboť jim k tomu CSS nedává nástroje). Pojďme si napřed o základních metodách něco říci a shrnout jejich přednosti a problémy.

Tabulky aneb jak layout nedělat

Kdysi nám všem bylo vysvětleno, že layout pomocí <table> je špatný. Pokud jste po letech zapomněli proč, tak tady je drobné připomenutí:

1. sémanticky layout webu rozhodně nepatří mezi tabulková data
2. pro změnu v designu webu musím upravovat HTML
3. ve většině případů vytváří mnoho zbytečného kódu
4. daleko hůře se s ním pracuje při tisku nebo na mobilních zařízeních

Už jste si vzpomněli? Již v roce 2004 nám to přece shrnuli Dušan Janovský (skutečné výhody CSS layoutu) a Petr Staníček (CSS versus tabulkový layout).

Nutno ale poznamenat, že tabulkový layout nám dlouhou řadu let sloužil spolehlivě a některé věci řešil během vteřin, zatímco s CSS se s nimi lopotíme hodiny. Jeho nevýhody jej ale přesto nakonec poslaly na webdesignerský hřbitov.

Layout tedy dnes tvoříme pouze pomocí kaskádových stylů. Co se nám nabízí k použití?

Float neboli obtékání

Jako první přijde na řadu obtékání (float). Layout pomocí vlastností float je v zásadě příjemný způsob. Nastavíme prvkům šířku a obtékání (float) a ony se pěkně řadí vedle sebe. Pod nimi zavelíme clear a pokračujeme normálním tokem dokumentu. Hotovo. Tedy když si vzpomeneme, čemu se kvůli IE6 vyhnout.

Ale pokud náš design vyžaduje stejně vysoké sloupce, či jinou pozici obsahu na obrazovce než v kódu, nastává problém. Float si s troškou triků poradí s přehazováním pořadí sloupců, ale stejně vysoké sloupce zkrátka neumí, a tak si webdesigneři vypomáhají různými berličkami a vymýšlí triky, aby tuto jeho slabinu ukryli.

Absolutní pozicování

Position:absolute zvládá dokonale umisťovat obsah kamkoli na obrazovku. Nastavíme sekcím stránky přesnou pozici a je úplně jedno, kde se daná věc nachází v kódu, jestli už se tam před ní nachází něco jiného či jestli si uživatel změnil velikost písma (pochopitelně pokud používáme vhodné jednotky).

Jenže jakmile potřebujeme pod absolutně napozicovaný obsah umístit něco v normálním toku dokumentu, tak jsme skončili. Vlastnost position zkrátka nemá clear. Jak píše CSS guru Eric Meyer v článku Wanted Layout System: Kdyby existovalo position-clear, bylo by to naprosto úžasné. Jenže neexistuje (ale je možné tuto vlastnost vytvořit pomocí JavaScriptu), takže layout postavený na position:absolute nakonec vytváří více problémů, než řeší.

Faux absolute position

Přehazování pořadí sloupců kód/obrazovka lze ovšem udělat mnohem elegantněji a stabilněji. Řešení je poměrně triviální a říká se mu právě tím zvláštním souslovím faux absolute position (z francouzštiny faux = nepravý). Představil jej loni Eric Sol na A List Apart (pro další vysvětlení viz prezentace Riki Fridricha na WebExpo 2008). Funguje velmi jednoduše a je mimo jiné využíván v řadě dnešních CSS frameworků. Kombinuje sílu obtékání s pozicováním a je to dnes, dle mého názoru, asi to nejlepší, co můžete pro vícesloupcový layout použít.

Pojďme se na něj tedy v rychlosti podívat. V podstatě jde o to, že plovoucí prvky posuneme nejprve zcela mimo naši pracovní plochu a poté je za pomoci záporného marginu umístíme na místo, kam patří. Napsané to zní možná trochu nesrozumitelně, z ukázky to snad bude jasnější:

<style>
.obal {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden
}
.sloupec1, .sloupec2, .sloupec3 {
    float: left;
    left: 100%;
    position: relative;
    height: 100px;
    overflow: hidden
}
.sloupec3 {
    width: 20%;
    margin-left: -20%;
    background: blue
}
.sloupec1 {
    width: 20%;
    margin-left: -100%;
    background: green
}
.sloupec2 {
    width: 60%;
    margin-left: -80%;
    background: yellow
}
</style> 

Na CSS jistě není nic nepochopitelného, stejně tak HTML je velmi jednoduché:

<div class="obal">
    <div class="sloupec3">
        Třetí sloupec na obrazovce, ale první v kódu
    </div>
    <div class="sloupec1">
        První sloupec na obrazovce, ale druhý v kódu
    </div>
    <div class="sloupec2">
        Druhý sloupec na obrazovce, ale třetí v kódu
    </div>
</div> 

Že to skutečně funguje, se můžete přesvědčit v online ukázce.

Faux absolute position nám tak dává přesnost absolutního pozicování s možností pokračovat po užití této techniky v normálním toku dokumentu. To z něj dělá velmi užitečný nástroj při kódování designu, který používá mřížku (grid).

I tento způsob si však s sebou nese dědictví problémů float a navíc zavádí jeden další. Nelze u sloupců kombinovat různé jednotky pro šířku, protože bychom pak nebyli schopni spočítat, kam máme daný sloupec přesně posunout (CSS2.1 nám k tomu nedává možnosti, s CSS3 se tato situace může změnit).

Současné problémy CSS layoutů

V ideálním světě bych nyní napsal zázračný návod, jak snadno vyřešit i onen první problém – stejně vysoké sloupce. V ideálním světě nežijeme, proto žádný takový návod nemám. Kaskádové si prozatím se stejnou výškou sloupců poradit příliš neumí (samozřejmě to není s pomocí různých triků zcela nemožné, jak se ostatně můžete na řadě webů denně přesvědčit).

Hlavní problém netkví v tom, že bychom nějaký layout dnes snad nemohli vytvořit. Problém tkví v tom, že to je příliš složité, neintuitivní a pro nováčky často naprosto nepochopitelné. Všechny způsoby vyžadují dobrou znalost CSS, problémů prohlížečů a vůbec přílišnou aktivitu šedé kůry mozkové. Proč na rozdíl od jiných oblastí vývoje nemůžeme mít na webu základní layout hotov za několik minut? Máme naději, že tomu tak někdy bude?

Tabulky vrací úder

V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout. Jen s tím rozdílem, že místo důvěrně známých značek <table>, <tr>, <td> apod. užívá v HTML jakékoliv značky (obvykle <div>, ale není to nutné) a pomocí kaskádových stylů těmto elementům nastavuje, aby se chovaly stejně jako tabulky.

Ve skutečnosti se jedná o simulaci tabulek pomocí kaskádových stylů. Při tom se využije všech výhod tabulek: bezproblémová tvorba stejně vysokých sloupců, buňky tabulky se automaticky řadí vedle sebe atd. Tedy vše, kvůli čemu si někteří vývojáři myslí, že používání tabulek pro layout ušetří spoustu práce.

Pojďme se na celé řešení podívat.

Princip CSS tabulek

Řešení je založeno na hodnotách vlastnosti display:

• table
• table-row
• table-cell

Vlastností je o něco více, tyto jsou ale nejdůležitější. Pro plný přehled nahlédněte do specifikace CSS2.1.

Tyto hodnoty byly již součástí CSS2.0 a většina prohlížečů je podporuje. Výjimku tvoří Internet Explorer, který jejich podporu zařadil až do osmé verze. Což je také důvod, proč se o CSS tabulkách začíná hovořit až dnes.

Z názvů jednotlivých je poměrně zjevné, co vlastně dělají. Pokud bychom chtěli 4sloupcový layout, se stejně vysokými sloupci, pomocí HTML tabulek by kód vypadal zhruba takto:

<table>
    <tr>
        <td>první sloupec
        <td>druhý sloupec
        <td>třetí sloupec
        <td>čtvrtý sloupec
</table> 

A za použití CSS tabulek například takto (inline styly jsou zde jen pro větší názornost):

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
            první sloupec
        </div>
        <div style="display:table-cell">
            druhý sloupec
        </div>
        <div style="display:table-cell">
            třetí sloupec
        </div>
        <div style="display:table-cell">
            čtvrtý sloupec
        </div>
    </div>
</div> 

Připadá vám to stále příliš složité? Stačí mávnout kouzelnou hůlkou a dostaneme mnohem jednodušší kód (dle specifikace lze totiž značky s  display: table a display: table-row jednoduše vynechat, prohlížeč si je má domyslet):

<div style="display:table-cell">
    první sloupec
</div>
<div style="display:table-cell">
    druhý sloupec
</div>
<div style="display:table-cell">
    třetí sloupec
</div>
<div style="display:table-cell">
    čtvrtý sloupec
</div> 

Počítejte dobře: na 4 sloupce to máme pouhé 4 značky v kódu. Design lze změnit pouhou úpravou kaskádových stylů, i sémantika je v pořádku. Layout vytvořený tímto způsobem si můžete prohlédnout v online ukázce (pokud vám ve vašem prohlížeči nefunguje, čtěte dále).

Pokud by vás technika zaujala, doporučuji články na Digital-wew a na Thinkvitamin.

Problémy aneb nic není tak snadné

Zní to všechno poměrně dobře, takže je čas se podívat na zápory celé techniky.

Podpora prohlížečů

Firefox a Opera jsou bez problému. O tom, že na IE7 a nižší můžeme zapomenout a nezbývá než čekat na IE8, jsme se zmínili. Bohužel Safari a Chrome obsahují chybu a náš ořezaný příklad se nezobrazí správně (plný příklad s  display: table ovšem funguje). Chyba je v nočních verzích WebKitu odstraněna (ani Safari 4 beta chybu neobsahuje), takže je pravděpodobné, že brzo bude již vše dle specifikace.

Problém s pozicováním

Podpora prohlížečů však není jediným problémem této techniky. CSS tabulky mají problém s position:relative  a tudíž i s  position:ab­solute. Zkrátka zapomeňte na to, že byste divu s display: table-cell  nastavili position: relative a uvnitř napozicovali něco absolutně k rodičovskému prvku (třeba kulaté rohy). Osobně to považuji za jeden z hlavních problémů a prozatím jsem nenašel způsob, jak jej rozumně obejít.

Nesmíme zapomenout na fakt, že v tomto případě pomocí kaskádových stylů nelze nastavit, v jakém pořadí se obsah na obrazovce zobrazí. Zkrátka jak v kódu, tak na obrazovce – inu tabulky.

Klady CSS tabulek

Mohlo by se zdát, že toto řešení trpí samými problémy. Ale když se na CSS tabulky podíváme s nadhledem, tak zjistíme, že je neuvěřitelně snadné je používat. Nepotřebujeme žádné triky, počítat kam umístit box atd. Do HTML napíšeme 4 divy a nastavíme, aby se chovaly jako buňky tabulky. Hotovo! Máme 4 sloupcový layout.

Nerozpadá se, pro definici šířky jednotlivých sloupců můžeme kombinovat jednotky jaké chceme. Řešení je vhodné i pro ortodoxní server-side vývojáře, kteří se používání stávajících kaskádových stylů brání (a že takových jsou mraky). Desetiminutové školení CSS tabulek jim následně dovolí bez pomoci webdesignera vytvořit potřebný layout, který potřebují např. pro odladění své komponenty!

Jednoduchá řešení v evolučním souboji technologií často vyhrávají, a proto by CSS tabulky mohly být do budoucna nadějným kandidátem na vítěze.

Názory ze světa

O CSS tabulkách se poslední dobou v angličtině poměrně hojně debatuje (což se o češtině říct nedá). A je nutno říci, že některé kapacity v oboru proti nim mají námitky:

Eric Meyer poměrně tvrdě říká, že používat CSS tabulky je možná horší, než používat pro layout ty skutečné a proměna několika divů pomocí CSS na tabulky a následné tvrzení, že to tabulky nejsou, zavání sebeklamem (volná citace z meyerweb.com).

Chris Coyier s ním souhlasí slovy „ámen, bratře“ a říká, že celá ta myšlenka mu přijde šílená (volná citace z css-tricks.com).

Naopak lidé, kteří s celou myšlenkou přišli, tvrdí, že CSS tabulky jsou z 90 % řešením na naše problémy s layoutem (volná citace z thinkvitamin­.com). Kdo má pravdu, ukáže až čas (a toho máme dost, než podíl IE6 a IE7 poklesne).

Závěrem

Ukázali jsme, že současné nástroje pro tvorbu layoutů nejsou v žádném případě ideální. Prozatím se s tím ale musíme smířit. CSS tabulky jsou zdá se kontroverzní pokus o řešení problémů s layoutem. Někteří jsou z něj nadšeni, jiní jej nemohou vystát. Ale rozhodně se stále nejedná o vysněné webdesignerské řešení.

Na nástroj, který umožní tvořit layouty lehce a elegantně, stále čekáme.

Pokračování příště

Zachrání nás CSS3? Nabídne nám konečně ideální nástroj pro tvorbu layoutů? Povíme si příští týden.