CSS2 – vizuální formátovací model

8. ledna 2003

•

V dnešním článku se zaměříme na problematiku vizuálního formátovacího modelu (visual formating model), především na všechny jeho nové možnosti. Projdeme především nové vlastnosti box modelu a nové možnosti, které přinášejí z hlediska webdesignu.

Obdélníkový model

Nejdříve si připomeňme tzv. obdélníkový model (box model) tak, jak jej známe z původního CSS. Určitě vám následující obrázek není neznámý:

Vlastnost padding určuje mezeru mezi samotným obsahem elementu a jeho okrajem. Ten definuje vlastnost border. No a konečně margin je mezera mezi okrajem a „zbytkem světa“, tedy dalším elementem na stránce.

U vlastnosti margin dochází ve vertikálním směru (margin-top, margin-bottom) ke kolapsu, což znamená, že skutečná velikost vnější mezery bude rovna maximu hodnot margin dvou po sobě jdoucích elementů. Dejme tomu, že jeden blokový element bude mít margin-bottom: 15 px; a po něm jdoucí element margin-top: 10 px;. Výsledná mezera mezi nimi nebude 25 px (součet), ale 15 px (maximum). Toto se zdá být logické, neboť hodnota 15 px dostatečně odpovídá oběma nastavením. Nutno dodat, že v horizontálním směru ke kolapsu nedochází.

Tolik krátká rekapitulace první normy CSS.

Vlastnost display

Vlastnost display nastavuje, jak se má daný element zobrazovat. Původní CSS povolovalo pro tuto vlastnost 4 hodnoty:

block – blokový element
inline – řádkový element
list-item – položka seznamu
none – element není vůbec zobrazen

Do normy CSS2 byly přidány další hodnoty vlastnosti display, které si zde nyní rozebereme:

Vběhnuvší element

První novou hodnotou je run-in. Představme si element, po kterém požadujeme, aby se zleva choval jako blokový element (tedy aby začal na novém řádku), ale zprava aby na něj přímo navázal element následující:

Celý kód by se měl interpretovat takto:

Text předcházejícího odstavce. PODNADPIS Tento odstavec by měl začít na stejném řádku jako podnadpis.

Tolik k run-in elementům. Je sice pravda, že velké využití asi nikdy mít nebudou, přesto se mohou objevit případy (např. právě nadpisy), kdy by se tato hodnota mohla hodit.

Kompaktní element

Další možnou hodnotou vlastnosti display je compact. Chování takového elementu si budeme ilustrovat na následujícím příkladu. Máme za sebou dva blokové elementy. V normálním případě by se zobrazily klasicky pod sebou. Mějme ale situaci, že obsah prvního blokového elementu je velmi krátký a jednořádkový, a naopak druhý blokový element má vlastností margin nastaven tak velký vnější okraj, že se do něj vejde celý první element. A právě chování, při kterém se element zobrazí ve vnějším okraji margin druhého elementu, definujeme hodnotou compact.

Ukažme si konkrétně toto chování na příkladu XHTML seznamu definicí. Jen pro zopakování, základem seznamu je párová značka dl, do které uzavřeme celý seznam tvořený dvojicemi párových značek dt, dd. První z nich označuje daný výraz, druhá jeho definici. Mějme následující seznam:

…
<style type=“text/css“>
  dd {margin: 5em;}
</style>
…
<dl>
  <dt>výraz</dt>
  <dd>definice výrazu</dd>
  <dt>delší výraz</dt>
  <dd>definice delšího výrazu</dd>
</dl>

Seznam se zobrazí přibližně takto:

výraz definice výrazu delší výraz definice delšího výrazu

Definici výrazu dd jsme tedy pomocí CSS nastavili vnější okraj na 5 em. Jak lze vidět, první výraz (řetězec výraz) se vejde do okraje své definice. Zkusme mu nastavit kompaktní zobrazování:

dt {display: compact;}
dd {margin: 5em;}

Nyní by se měl seznam zobrazit takto:

výraz definice výrazu delší výraz definice delšího výrazu

K čemu došlo? První výraz se vešel do vnějšího okraje své definice, a proto byl do něj umístěn. Druhý, delší výraz, se již do tohoto okraje nevešel, tedy se chová jako klasický blokový element, jeho definice začíná na novém řádku.

Doufám, že z předchozího příkladu šlo chování kompaktních elementů pochopit. Vejde-li se kompaktní element do vnějšího okraje (margin) následujícího blokového elementu, je do něj umístěn. V opačném případě se chová jako klasický blokový element.

Značkový element

Tímto tématem se vracíme zpět do minulého dílu seriálu, ve kterém jsme se zabývali pseudoelementy :before, :after. Hodnotu marker totiž můžeme aplikovat pouze na ně. Obsahu těchto pseudotříd (který, jak už víme, definujeme pomocí vlastnosti content) touto hodnotou přikazujeme, aby se choval jako značka (marker). Tedy, aby byl celý obsah příslušného elementu od značky odsazen. Více určitě vysvětlí následující příklad:

p.normal:before {content: url(„kolecko.gif“);}
p.marker:before
{content: url(„kolecko.gif“);
display: marker;}

Tímto jsme si nadefinovali dvojí chování. Odstavce s atributem class=normal se budou chovat přesně tak, jak jsme si ukázali v minulém díle seriálu. Před samotným obsahem každého odstavce bude vykreslen obsah souboru kolecko.gif a samotný text bude standardně pokračovat dále vpravo a pak pod tímto obrázkem.

Naproti tomu odstavce s class="marker" se budou chovat jinak. Obrázek kolecko.gif se bude chovat jako značka. Text odstavce vytvoří blok, který bude od značky odsazen:

Doufám, že předešlý příklad vykreslování značek dostatečně osvětlil. Hodí se ještě doplnit, že v CSS2 lze ovlivnit mezeru mezi značkou a textem, ke kterému se váže. Slouží k tomu vlastnost marker-offset, která je pochopitelně aplikovatelná pouze na pseudoelementy :before, :after s vlasností display nastavenou na marker. Například takto nadefinujeme mezeru mezi značkou a textem na 5 px:

p:before
{display: marker;
content: url(„kolecko.gif“);
marker-offset: 5px;}

Možná vám toto chování něco připomnělo. Ano, v XHTML je toto chování vlastní seznamům ul, ol, které před každou svojí položkou vykreslují odrážku (ať už ve formě puntíku u neuspořádaných seznamů nebo ve formě čísla u seznamů uspořádaných). I těmto odrážkám lze určit výše popsané dvojí chování pomocí vlastnosti list-style-position. Hodnota outside znamená, že odrážka bude vykreslena jako značka, možnost inside znamená, že značka bude součástí prvního řádku. Tato vlastnost byla již definováná v původním CSS.

Shrňme si tedy poznatky o značkách. Pseudoelementy :before, :after můžeme formátovat jako značku nastavením jejich vlastnosti display na hodnotu marker. Obsah elementu, ke kterému se tyto pseudoelementy vážou, pak bude zarovnán do bloku a celý odsazen na vzdálenost marker-offset od značky. V XHTML se takto implicitně chovají odrážky nesetříděných a setříděných seznamů. Pokud chceme, aby se tyto odrážky staly součástí řádků jednotlivých položek, nastavíme seznamu vlastnost list-style-position na inside.

	IE6	Opera 6.05	Mozilla 1.1
display: run-in	–	x	–
display: compact	–	x	–
display: marker	–	–	–
list-style-position	x	x	x

Jak vidíte, ani tentokrát to není s podporou v prohlížečích příliš slavné. Jediná Opera 6.05 zvládla hodnoty run-in a compact. Možnost marker není dokonce podporována vůbec. Pro úplnost jsem do tabulky uvedl i vlastnost list-style-position, která již byla definována původním CSS.

Minimální velikost

Nejdříve trocha opakování. Pomocí vlastností width a height můžeme v CSS kontrolovat velikost obsahu (content) elementu. Ačkoliv se tato věta zdá býti zřejmou, asi tomu tak ve skutečnosti není. Vývojáři z Microsoftu do velikosti obsahu elementu připočítávají v rozporu s normou i hodnoty vlastností padding a border. Až IE6 tuto vlastnost chápe správně. Tolik krátká odbočka.

Občas nechceme elementu nastavit přesnou velikost, ale její minimální (respektive maximální) hodnotu. K tomu slouží čtyři nové vlastnosti min-width, max-width, min-height, max-height. Vlastnostmi min-width, min-height prohlížeči říkáme, jakou minimální šířku (výšku) musí mít daný element. A naopak max-width, max-height definují maximální velikost elementu. Jeden element samozřejmě může mít určenou minimální i maximální hodnotu.

Nyní si vás dovolím upozornit na jednu chybu, které se autoři často dopouštějí. Tyto vlastnosti nelze dle W3C aplikovat na buňky tabulky!!! Což v praxi znamená, že tato omezení nelze použít při tabulkovém layoutu. A další argument pro non-table layout pomocí CSS je na světě…

	IE6	Opera 6.05	Mozilla 1.1
min-width	–	x	x
max-width	–	x	x
min-height	–	x	x
max-height	–	x	x

Přetečení a ořezání

V určitých případech může dojít k situaci, kdy obsah elementu přesahuje jeho velikost. Představme si následující odstavec:

p
{width: 200px;
height: 150px;}

Je zřejmé, že rozsáhlejší text se do daného odstavce nevejde. Tato situace se nazývá přetečení (overflow). Jak ji prohlížeč vyřeší, definuje vlastnost overflow. Její hodnoty mohou být následující:

visible – implicitní hodnota, přetečený text se zobrazí
hidden – přetečený text se nezobrazí, je oříznut
scroll – k danému elementu jsou přimknuty scrollbary, jejichž pomocí lze zobrazit celý text
auto – chování záleží na prohlížeči; pokud obsah přeteče, měly by se vykreslit scrollbary

Prohlížeče různě interpretují implicitní hodnotu visible. Zatímco Opera 6.05 a Mozilla 1.1 zobrazí přebytečný text jako „přetečený“ (tzn. že přesáhne i vykreslený okraj elementu), IE 6 uzpůsobí velikost elementu tak, aby se do něj celý obsah vešel.

V případě hodnoty auto se IE6 i Mozilla 1.1 chovají přesně dle specifikace. Pokud je obsah větší než samotný element, přiřadí k němu automaticky scrollbary, v opačném případě je nezobrazí. Opera 6.05 se bohužel chová stejně jako při hodnotě visible, tedy nechá obsah přetéct a zobrazí ho.

Opačným případem je situace, kdy chceme explicitně označit část elementu, která se zobrazí, a zbytek oříznout (clip). K tomu slouží vlastnost clip. Bohužel jsou jak W3C standard, tak i implementace v prohlížečích prolezlé chybami.

V původním CSS2 standardu je zobrazená oblast určená CSS funkcí rect(nahoře, vpravo, dole, vlevo). Čtyři argumenty funkce představují vzdálenost od příslušných okrajů elementu. Například zápisem clip: rect(5px, 10px, 15px, 20px); jsme nadefinovali obdélník vzdálený 5 px od horního, 10 px od pravého, 15 px od dolního a 20 px od levého okraje. Nutno dodat, že dle původního záměru měla být tato vlastnost aplikovatelná pouze na elementy s vlastností overflow nastavenou na jinou hodnotu než visible.

Pokud byste si vlastnost clip chtěli sami otestovat podle výše uvedeného popisu, špatně byste pochodili. Prohlížeče si totiž tuto vlastnost vysvětlují po svém (díkybohu aspoň stejně). W3C na tuto situaci reaguje v revizi normy CSS 2.1, která by již brzo měla vejít v platnost. Následující text se tedy vztahuje právě k této revizi.

Vlastnost clip lze aplikovat pouze na absolutně pozicované elementy. Zobrazená oblast se opět definuje CSS funkcí rect(nahoře, vpravo, dole, vlevo). Argumenty ale mají v tomto případě jiný význam, představují jednotlivé vzdálenosti od levého horního rohu! Tedy hodnoty nahoře, dole jsou vzdálenost od horního okraje a hodnoty vpravo, vlevo od okraje levého. V následujícím příkladě si nadefinujeme odstavec s pevnou velikostí 300 x 300 a v něm obdélník, který bude ode všech okrajů vzdálen 20 px:

p
{position: absolute;
width: 300px;
height: 300px;
clip: rect(20px,280px,280px,20px);}

Pro jednotlivé vzdálenosti lze také použít hodnotu auto značící, že vzdálenost odpovídá přímo příslušnému okraji elementu. Například chtějme zobrazit pouze levých 100 px výše definovaného odstavce: clip: rect(auto, 100 px, auto, auto);.

Je potřeba dát také pozor v dvojí definici funkce rect(). V CSS2 jsou od sebe argumenty funkce odděleny pouze mezerou: rect(5px 50px 50px 5px), zatímco v revizi CSS 2.1 se oddělují čárkou: rect(5px,50px,50px,5px). Mě osobně se mnohem logičtější zdá druhá varianta, ke které se nakonec přiklonilo i W3C. Prohlížeče naštěstí zvládají obě varianty zápisu.

Nakonec můžeme elementu zakázat zobrazení úplně. Slouží k tomu známá vlastnost visibility, kterou můžeme nastavit na hodnoty visible, hidden, collapse. Jak určitě tušíte, první hodnota povolí zobrazení obsahu elementu, zatímco druhá ho zakáže. Hodnotou collapse se budu zabývat v některém z příštích článků.

	IE6	Opera 6.05	Mozilla 1.1
overflow: visible, hidden	x	x	x
overflow: scroll, auto	x	–	x
clip (CSS2)	–	–	–
clip (CSS 2.1)	x	–	x
visibility: visible, hidden	x	x	x

U vlastnosti overflow zklamala Opera 6.05, která není schopna správně interpretovat hodnoty scroll, auto a nikdy neposkytne potřebný scrollovací mechanismus. Je to rozhodně škoda, protože tato vlastnost by mohla být v určitých případech velmi užitečná. Vlastnost clip není ve své opravené verzi podporována pouze Operou 6.05.