Dnešním pohledem do specifikace CSS3 navazujeme na minulý článek Současnost a budoucnost layoutů: CSS tabulky, který byl zaměřený na specifikaci CSS2. Na jeho konci jsme se ptali, zda nám CSS3 konečně nabídnou ideální nástroj pro tvorbu layoutů. Pojďme se na možnosti CSS3 podívat a pokusme se najít odpověď.

Moduly v CSS3 zaměřené na tvorbu layoutu

Mezi pracovními návrhy modulů CSS3 nás budou hlavně zajímat tyto tři:

• Advanced Layout Module (pokročilý layout)
• Multi-column Layout (vícesloupcový layout)
• Grid Positioning Module (pozicování na mřížku)

Zatím nemůžeme očekávat, že bychom snad mohli tyto moduly dnes nebo v nejbližších letech začít používat. Specifikace se stále vyvíjí a tvůrci prohlížečů zatím ani neřekli, zda je vůbec zamýšlí implementovat. V tuto chvíli se ovšem jedná o jedinou vytyčenou budoucnost, která může (a jak si ukážeme nemusí) v tvorbě layoutu nastat.

Advanced Layout Module

Nejprve se zaměříme na Advanced Layout Module. Jedná se o modul, který se snaží řešit problémy s layoutem jako celek (na rozdíl od zbylých dvou modulů).

Modul je založen na tzv. template-based positioning (pozicování založené na šablonách), což v podstatě znamená, že v CSS pomocí ASCII znaků vytvoříme obrázek požadovaného layoutu a poté určíme, které části naší stránky se mají ve které části nakresleného layoutu zobrazit.

Právě vytváření obrázků pomocí písmen se stalo častým terčem vtípků web designerů a modulu se přezdívá „ASCII art“ („umění ASCII“).

Příklad

Pojďme se podívat, jak template-based positioning vypadá v kódu:

<style type="text/css">
  dl { display: "ab"
                "cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
</style>

<dl>
  <dt id=sym1>A
  <dd id=lab1>A is een aapje
  <dt id=sym2>B
  <dd id=lab2>B is de bakker
</dl> 

Prohlížeč příklad zobrazí takto:

Převzato ze specifikace W3C.

Když si příklad rozebereme, tak nás zajímá převážně vlastnost display s neznámými písmeny. Při troše představivosti zjistíme, že náš layout má definované 4 buňky a každá z nich má své jméno (a, b, c, d). Poté pomocí position u jednotlivých elementů nastavíme, ve které buňce se má který obsah zobrazit. A máme hotovo.

Uvedený příklad byl primitivní, ukažme si něco složitějšího:

<style type="text/css">
  body {
    height: 100%;
    display: "a   .   b   .   c"  /2em
             ".   .   .   .   ."  /1em
             "d   .   e   .   f"
             ".   .   .   .   ."  /1em
             "g   .   h   .   i"  /2em
             5em 1em  *  1em 10em}
  #logo {position: a}
  #motto {position: b}
  #date {position: c}
  #main {position: e}
  #adv {position: f}
  #copy {position: g}
  #about {position: h}
</style> 

Převzato ze specifikace W3C.

Rozeberme si tento příklad:

1. vytvořili jsme mřížku o 3 sloupcích a 3 řádcích, přičemž každá buňka má své jméno (písmenný identifikátor)
2. některým z nich jsme nastavili pevnou šířku a výšku (jednotky po stranách a pod tabulkou), některé jsme ovšem nechali proměnné (prostřední sloupec a řádek). Takže například 1. sloupec je široký 5em, poslední 10em
3. nastavili jsme mezery mezi buňkami na 1em

Je to opravdu budoucnost?

Dovedete si představit, že právě takto budeme v budoucnu tvořit layout? Hodně to připomíná tabulky (autoři specifikace přiznávají, že z nich spoustu věcí převzali), trochu v tom cítím i koncept rámců (hlavně kvůli pojmenovávání jednotlivých buněk).

Klady

Modul každopádně řeší většinu našich problémů s layoutem. Stejně vysoké sloupce, prohazování obsahu na výstupu bez nutnosti změny jeho pozice v (X)HTML kódu a přitom nezanáší kód zbytečnými elementy. Jeho úspěch ale závisí hlavně na tom, jak rychle a dobře by byl implementován prohlížeči.

Problémy

Nemůžeme zamlčet, že celý koncept budí na tvářích webdesignérů spíše úsměv a stejně tak i na tvářích tvůrců prohlížečů. Představte si totiž, že pomocí tohoto modulu chcete vytvořit opravdu velký web, a tak se hodinku bavíte kreslením jeho layoutu pomocí ASCII znaků. Trošku nezvyklé, že? (Zkuste si nakreslit layout Zdrojáku, zájemci mohou své řešení zaslat redakci, nejzajímavější varianty vystavíme.)

Podpora v prohlížečích

Neexistuje. A žádný výrobce prohlížeče dokonce zatím ani neprohlásil, že se chystá tento modul implementovat, a tak dost možná zůstane jen na papíře.

Zájemci o bližší prozkoumání celého konceptu mohou nahlédnout do vlastní specifikace a my si představíme další řešení.

Multi-column Layout Module

Další modul na řadě je Multi-column Layout. O tento modul se jen rychle otřeme. Není totiž primárně určen pro tvorbu komplexních layoutů webových stránek, i když by tak šel teoreticky použít.

Jednoduše řečeno pomocí tohoto modulu můžeme stránku rozdělit na libovolný počet libovolně širokých sloupců. Obsah stránky je rovnoměrně rozdělen do těchto sloupců tak, aby byly stejně dlouhé (samozřejmě pokud explicitně neurčíme, kde má který sloupec končit).

Pojďme se podívat na krátký příklad:

<html>
<style>
div {
  column-width: 15em;
  column-gap: 2em;   /* zobrazeno žlutě */
  column-rule: 4px solid green;
  padding: 5px;      /* zobrazeno modře */
}
</style>
<body>
<div>
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij
...
</div>
</body>
</html> 

Prohlížeč zobrazí toto:

Převzato ze specifikace W3C.

Na kódu příkladu není nic nejasného. Nejprve určíme šířku sloupců ( column-width), poté mezeru mezi nimi ( column-gap, viz dvě svislé zelené čáry uprostřed) a navíc mezi nimi vytvoříme 4px široký zelený rámeček ( column-rule). Prohlížeč si v našem příkladě sám spočítal kolik sloupců se na obrazovku vejde. Pochopitelně bychom mohli i explicitně říct, kolik sloupců chceme:

column-count: 3; 

Nevhodný pro tvorbu layoutů?

Již jsem zmínil, že pro tvorbu komplexních layoutů je tento modul nevhodný. Poskytuje nám totiž jen velmi málo kontroly nad výsledným vzhledem sloupců. Jednotlivým sloupcům není možné nastavit pozadí a nemohou mít ani border, margin nebo padding.

Proč jej tedy vůbec zmiňujeme?

• Je to zajímavý modul, který nám umožní na webu skládat text do sloupců, jak to známe z časopisů a novin (ponechme teď stranou diskusi, zda je takové uspořádání na webu vhodné)
• Podporují jej FF2+ (pomocí vendor prefixu -moz-), Safari 3+ a Chrome 0.3+ (pomocí vendor prefixu -webkit-) a je tedy do jisté míry využitelný i dnes
• Budeme jej za moment používat při výkladu Grid Positioning Module

Chcete vědět víc?

Pokud vás Multi-column layout zaujal, doporučuji následující zdroje:

• Andy Clarke: CSS3 Multi-Column Thriller
• CSS3.info Multi-column Layout
• Cédric Savarese: Introducing the CSS3 Multi-column Module

Grid Positioning Module

Posledním modulem, na který se podíváme, je Grid Positioning Module. Tento modul nám primárně usnadní práci s kódováním designů do mřížky.

Nejprve je třeba definovat mřížku, do které budeme vše zarovnávat. Grid positioning module nabízí 3 způsoby, jak to udělat:

1) jasně nadefinovaná mřížka (explicit grid) pomocí vlastností grid-columns a grid-rows

Jak fungují? Podívejme se na následující pravidlo:

div { grid-columns: 50% * * 4em } 

To říká, že box chceme rozdělit na 4 sloupce, čímž vznikají 3 čáry mřížky (dvě po stranách boxu již existovaly). V našem obrázku jsou zobrazeny modře:

Vytvořili jsme tedy 4 sloupce. Jeden široký 50% na začátku a jeden 4em široký na konci. Zbylé místo je automaticky rozděleno na 2 stejně široké sloupce.

Pokud bychom chtěli stránku rozdělit horizontálně, použijeme grid-rows:

div { grid-rows: 4em (1em 3em) } 

Toto pravidlo vytvoří na vrchu stránky řádku 4em vysokou a poté střídá výšky 1em a 3em až do konce stránky. Jak to vypadá, můžete vidět na obrázku:

Důležité je vědět, že takto vytvořená mřížka sama o sobě nijak neovlivní zobrazení stránky, používáme ji jako mřížku, ke které poté přichytáváme jednotlivé elementy.

2) přirozená mřížka (natural grid) je tvořená elementy, které automaticky vytváří mřížku. Jedná se o elementy modulu multi-column layout (kterým jsme se zaobírali výše) a tabulky.

3) původní mřížka (default grid) jakýkoli další blokový element vytváří vždy jednu buňku mřížky.

Speciální jednotky – gr

Kromě mřížky musíme mít také způsob, jak prvky do mřížky pozicovat. Pro tento účel zavádí Grid Positioning Module jednotku gr. Ta představuje šířku/vyšku jedné buňky mřížky, přičemž nezáleží na tom, zda je buňka široká/vysoká 1px nebo 50em. Vždy je to 1gr.

Příklad

Po vysvětlení potřebné teorie si konečně můžeme ukázat příklad. Řekněme tedy, že chceme vytvořit takovýto web:

Převzato z oficiální specifikace W3C.

Nejprve potřebujeme vytvořit mřížku, do které budeme vše pozicovat. Pro jednoduchost nyní použijeme přirozenou mřížku a multi-column layout:

body { columns: 3; column-gap: 2em; } 

Vytvořili jsme tedy 3 sloupce, mezi kterými je 2em mezera a zároveň nám vznikla mřížka o pěti buňkách (v příkladě vyznačeno modrými čarami).

Nyní umístíme na místo obrázek:

img { float:page top right; width:3gr; } 

Hodnoty vlastnosti float říkají, že obrázek bude plavat v pravém horním rohu stránky a bude mít šířku 3gr.

Obdobně pak lze umisťovat do mřížky i další prvky. Komplexnější příklad lze najít ve specifikaci.

Kdy budeme moci grid modul používat?

Ačkoli tvůrci prohlížečů i o implementaci tohoto modulu mlčí, má tento modul relativně slušnou šanci na implementaci. Proč? Specifikaci napsali lidé z Microsoftu a tudíž by ji mohli prosadit do IE9 (dokonce se šeptalo o tom, že by mohla být zahrnuta i v IE8, ale tyto zprávy se nakonec nepotvrdily).

Klady & zápory

Tento modul je vyloženě zaměřen na designy do mřížky, takže od něj lze očekávat, že je zvládá bravurně. Můžeme pomocí něj velmi snadno umístit jakýkoli prvek perfektně do mřížky, podporuje snadnou tvorbu fluidních layoutů atd. Již však neřeší nic takového jako stejně vysoké sloupce, a zatím není příliš jasné, zda a jak bude záviset poloha obsahu na obrazovce na jeho umístění v kódu. Proto jsme se konečného řešení našich problémů s layoutem zase nedobrali.

Závěr: Našli jsme ideální řešení pro layout?

Nepotěšíme vás, nenašli.

Nejspíš i vy si poté, co jste se seznámili se všemi známými metodami tvorby layoutů, uvědomujete, že žádné z existujících ani navrhovaných řešení nepředstavuje řešení, se kterým bychom mohli být spokojeni.

Eric Meyer ve svém nedávném článku Wanted Layout System dokonce zamýšlí nad tím, zda CSS vůbec může něco takového, jako je dokonalý systém pro tvorbu layoutů, nabídnout. Jak ale dodává, nám jako webdesignerům může být celkem jedno, zda budeme layout tvořit pomocí CSS, nebo zda pro to tvůrci prohlížečů vymyslí zcela nový jazyk.

Důležité je, aby si tvůrci prohlížečů sedli a konečně nám nabídli řešení, které nám umožní tvořit layouty lehce a elegantně a které velmi rychle implementují.

Vzpomeňme, co zmínil Jirka Kosek, když v rozhovoru pro Zdroják řekl, že „CSS3 nikdo nepotřebuje“ a neexistuje patřičný tlak na vývojáře prohlížečů, aby se situace změnila.

Eric Meyer vtipně navrhuje, že bychom měli pány z Opery, Applu, Microsoftu a Mozilly zamknout do jedné místnosti a nepustit je ven, dokud pořádné řešení nevymyslí a nezaváží se k jeho okamžité implementaci. Možná jim prý poskytne i jídlo a vodu. Pravda, tlak na vývojáře by to byl jistě dostatečný.