CSS3 – sloupcové rozvržení a prezentační úroveň

17. srpna 2005

•

V tomto článku se podíváme na zoubek podpoře sloupcového rozvržení obsahu elementu a nové, velmi zajímavé koncepci prezentační úrovně dokumentu.

Od třetí verze kaskádových stylů se především očekává, že zlepší a zjednoduší podporu pro vícesloupcový layout webu, kterého se dnes dosahuje především pomocí pozicování a plovoucích boxů. Většina pozornosti se proto upírá na modul Multi-column layout, který by tuto problematiku měl řešit již podle svého názvu. Ve skutečnosti jsou však vlastnosti v něm uvedené určeny pro řešení jiné problematiky sazby a dovoluji si tvrdit, že pro vytváření layoutu celého webu používány rozhodně nebudou!

Vícesloupcové rozvržení obsahu elementu

V odstavci výše jsem uvedl, k čemu tento modul užitečný nebude. To ovšem neznamená, že je zbytečný. Jeho hlavním úkolem je umožnit sloupcové rozvržení v rámci elementu tak, aby jeho obsah plynule přecházel z jednoho sloupce do druhého. To je chování, kterého v předešlých verzích CSS dosáhnout nešlo.

Řekněme si tedy ve zkratce, čeho lze dosáhnout pomocí nových vlastností z modulu Multi-column layout, nacházejícího se zatím ve stavu pracovního návrhu. Jde o efekt známý například z novin, kdy je souvislý text rozdělen pro lepší čitelnost do více sloupců. Všechny sloupce mají stejnou šířku a stejně definované rozestupy. Obsah elementu se automaticky přelévá mezi jednotlivými sloupci, pokud dojde ke změně jejich velikosti (například při změně velikosti okna), text se znovu přizpůsobí.

Definujeme sloupce

Základní vlastností column-count lze napevno určit, kolik sloupců se má vytvořit v místě obsahu elementu. Šířka těchto sloupců bude automaticky vypočítána podle vlastnosti width elementu. Pokud bychom předpokládali, že mezi sloupci je nulová vzdálenost, column-count má hodnotu 3 a šířka obsahu elementu je 360px, pak každý sloupec bude mít šířku 120px.

Druhou možností, jak definovat sloupce, je zadat šířku jednoho pomocí vlastnosti column-width. Výsledný počet sloupců je potom hodnota podílu šířky obsahu elementu a šířky jednoho sloupce, zaokrouhleno dolů. Mějme například šířku elementu 400px a šířku jednoho sloupce definovanou column-width: 120px. Sloupce budou v elementu tři a zbude mezera o šířce 40 px.

Sloupce lze od sebe oddělit pomocí vlastností column-gap a column-rule. První definuje šířku mezery mezi dvěma sloupci. Vlastnost column-rule představuje zkrácený zápis pro vlastnosti column-rule-color, column-rule-style a column-rule-width, které umožňují definovat čáru mezi sloupci. Pokud je definována jak čára, tak mezera, je čára vložena doprostřed mezery. Formátovat lze úplně stejně jako okraje elementů.

Distribuujeme zbylé místo

Šířku sloupcového rozvrženi při n sloupcích lze vypočítat následujícím vzorcem: n * column-width + (n - 1) * (column-gap * column-rule-width) (součet všech šířek jednotlivých sloupců a všech mezer a čar mezi nimi). Musí platit, že tato celková šířka nepřesáhne šířku obsahu daného elementu.

Při definování sloupců pomocí vlastností column-count a column-width může dojít ke třem variantám. Buď je definován pouze počet sloupců, což znamená, že jejich šířka je automaticky přizpůsobena šířce elementu, nebo může být definována pouze šířka jednoho sloupce. Jejich počet je pak omezen šířkou celého elementu a může se stát, že určité místo zbude. Třetí možností je definice jak šířky jednoho sloupce, tak i jejich počtu. Pokud by se stalo, že při tomto nastavení je šířka sloupcového rozvržení větší než šířka elementu, je zredukován definovaný počet sloupců. I v tomto případě tedy může zbýt určité místo.

Řešení problému zbylého místa představují vlastnosti column-width-policy a column-space-distribution. První umožňuje povolit rovnoměrné zvětšení šířky všech sloupců tak, aby bylo prázdné místo eliminováno. Pokud je toto chování zakázáno, lze druhou zmíněnou vlastností určit, kam se má zbývající místo umístit, jestli před první nebo za poslední sloupec, nebo rovnoměrně mezi ně.

Rozpínající se nadpisy

V určitých případech můžeme požadovat, aby se některý element vykreslil přes více sloupců, nebo dokonce přes všechny, a nerespektoval tak sloupcový layout rodičovského elementu. K tomu slouží vlastnost column-span, jejíž hodnotou může být celé číslo nebo klíčové slovo all určující, do kolika sloupců má obsah daného elementu zasahovat.

V následujícím příkladě má odstavec flexibilní sloupcový layout, zadána je velikost jednoho sloupce, jejich počet je dopočítáván automaticky. Šířka sloupců může být případně zvětšena tak, aby zcela zaplnily obsah elementu. Mezera mezi sloupci je tvořena z jedné třetiny plnou černou čarou a ze dvou třetin průhlednou mezerou:

p
{
  column-width: 250px;
  column-width-policy: flexible;
  column-gap: 0.6em;
  column-rule: 0.3em solid black;
}

Nevhodné k tvorbě layoutu

Z výše uvedeného popisu vyplývá, že tyto nově uvedené vlastnosti k tvorbě layoutu webu nevyužijeme. Jednak nemůžeme nastavit sloupcům rozdílné šířky, a jednak nelze explicitně určit, aby se obsah elementu na daném místě začal přelévat do dalšího sloupce. Na druhou stranu ale tyto vlastnosti s sebou přinášejí úplně novou možnost formátování, která se na webu zatím objevuje pouze minimálně právě proto, že nebyla podporována v kaskádových stylech.

Prezentační úrovně

Modul Presentation Levels (nachází se ve stádiu pracovního návrhu) přináší do světa kaskádových stylů úplně novou a velmi zajímavou myšlenku. Vychází z premisy, že každý dokument se nachází v prezentační úrovni, která je reprezentována celým číslem. V textu modulu je toto číslo označováno jako User Agent Presentation Value (UAPL). Každý element dokumentu má vlastní prezentační úroveň, Element’s Presentation Level (EPL). Tato hodnota je neměnná a v danou chvíli může být menší, rovna nebo větší než úroveň dokumentu UAPL. A hlavní myšlenkou celého modulu je, že elementy lze formátovat na základě toho, v jaké relaci je jejich prezentační úroveň vůči prezentační úrovni celého dokumentu!

Pro rozlišení této relace se používají tři nové pseudotřídy, :below-level, :at-level a :above-level. Aby je šlo využít, musí prohlížeč uživateli nabídnout jednoduché rozhraní, jak měnit prezentační úroveň dokumentu (například pomocí mezerníku, podobně jako při prohlížení prezentací v MS Power Pointu).

Pro nastavení EPL elementu je určena nová vlastnost presentation-level. Její hodnotou může být celé číslo, které explicitně nastaví prezentační úroveň daného elementu. Lze také použít klíčové slovo same značící, že hodnota má být stejná jako EPL předchozího elementu ve stromu dokumentu, nebo slovo increment, která přikazuje, aby se hodnota EPL oproti předchozímu elementu zvýšila o jedna.

Příkladem, který lze vyřešit pomocí prezentační úrovně, může být následující požadavek. Při prvním zobrazení dokumentu se mají zobrazit pouze nadpisy první a druhé úrovně a odstavce bezprostředně následující za těmito nadpisy. Pokud uživatel zvýší úroveň dokumentu, zobrazí se vše:

body, h1, h2, h1 > p, h2 > p
{
  presentation-level: 0;
}
body *
{
  presentation-level: 1;
}
:above-level
{
  display: none;
}

Když se dokument zobrazí, má na začátku UAPL = 0. Nadpisy první a druhé úrovně a odstavce, které je přímo následují, mají své EPL = 0, zbytek elementů má EPL = 1. Pro tyto elementy platí, že jejich EPL>UAPL, tedy odpovídají pseudotřídě :above-level a mají potlačené zobrazování. Pokud uživatel zvýši UAPL, přestanou odpovídat dané pseudotřídě a normálně se zobrazí.

Další příkladem může být chování, při kterém jsou obrázky nejdříve nahrazeny svým atributem alt a až v druhém kroku zobrazeny:

img
{
  presentation-level: 1;
}
img:below-level
{
  content: attr(alt);
}
img:at-level, img:above-level
{
  content: attr(src, url), attr(alt);
}

A na úplný závěr chtějme, aby se daný seznam choval jako jednoduchá prezentace, tedy aby byla vždy zvýrazněna jediná položka a zbytek byl poloprůhledný a splýval tak s pozadím:

li
{
presentation-level: increment;
}
li:below-level, li:above-level
{
opacity: 0.5;
}

V tomto případě má každá položka seznamu o jedna větší EPL než předchozí položka, vždy tedy právě jedna odpovídá aktuálnímu UAPL, zbytek je zobrazen průhledně.

Souhrn

Oba moduly popsané v tomto článku přinášejí do CSS úplně nové možnosti, kteých dříve nešlo nijak dosáhnout. Rozdělení textu do více sloupců by v určitých případech mohlo pomoci čitelnosti daného webu, proto tyto nové vlastnosti rozhodně vítám. Prezentační úroveň umožní definovat více pohledů na jeden dokument, navíc by implementace měla být jednoduchá, proto je dle mého názoru reálná šance, že se nakonec objeví i ve finální verzi CSS3.