Formátujeme seznamy a výčty v CSS

11. prosince 2002

•

Seznamy a výčty jsou ve vizuálních prohlížečích formátovány poměrně „anarchisticky“. Proto je dnes trochu zkrotíme s pomocí CSS, abychom je mohli bez obav o narušení jednotnosti a dobrého vzhledu stránky využívat.

Jak se seznamy a výčty vytvářejí v (X)HTML

Neuspořádaný seznam (jako odrážku využívá vždy stejný znak) se vytváří elementem ul, jeho položky potom pomocí elementů li, které jsou do něj vnořeny. S uspořádaným seznamem (před jeho položkami jsou generována čísla nebo písmena podle pořadí) se to má stejně, pouze místo elementu ul se používá ol.

Výčty jsou obsaženy v elementu dl. Uvnitř se nacházejí vysvětlované pojmy uzavřené v elementu dt vždy následované jednou nebo více definicemi (pro každý pojem může být více definic), které se nacházejí v elementu dd.

Elementy li i dd mají deklarován obsah jako %Flow;, což znamená, že do nich můžeme vnořit takřka libovolný obsah – text a mnohé řádkové i blokové elementy. Element dt může obsahovat pouze text nebo řádkové elementy.

Jak seznamy a výčty správně využívat

Většinou se do elementů li, dd a dt vkládá přímo text. Je to nejjednodušší a často i nejvhodnější řešení, pokud se jedná pouze o krátké texty. U elementu dt je to zároveň jediné řešení, protože je určen pouze pro krátké pojmy, které mohou být formátovány jen řádkovými prvky.

V elementech li a dd ale potřebujeme často použít delší text, který je navíc třeba leckdy strukturovat (například pomocí nadpisů). Proto je u těchto delších textů potřeba využívat elementy pro strukturování textů v (X)HTML, tedy minimálně odstavce. Oddělování úseků textů pomocí elementů br je řešením naprosto nevhodným.

Z těchto faktů jsem tedy vyvodil, že kratší texty stačí vkládat přímo do prvků li, dd a delší texty je třeba uzavírat do odstavců, případně dalších prvků, jako jsou nadpisy. Tím zároveň v kódu odlišíme položky s jednoduchým textem bez strukturálních elementů a položky se strukturovaným textem, které se nám samy zpřehlední díky horizontálním okrajům odstavců, nadpisů a podobně, tím se zlepší i optická orientace v textu.

Dosavadní poznatky jsou vidět v prvním příkladě obsahujícím pouze správně strukturovaný kód bez jakýchkoli CSS vlastností.

Začínáme formátovat v CSS

Jak vidíme, vizuální prohlížeče aplikují na seznamy i výčty různé implicitní vlastnosti. Jedná se především o okraje (margin) a vycpávky (padding). Také seznamové odrážky se v různých prohlížečích mohou lišit. V případě, že chceme dosáhnout na našich stránkách dobré úpravy a jednotnosti, je pro nás toto chování nežádoucí. Proto budeme tyto vlastnosti nastavovat u všech elementů na vlastní hodnoty, mimo jiné také ošetříme zanoření seznamů do sebe.

Zde uváděné CSS by měl bez problémů zobrazit každý novější prohlížeč, já jsem je testoval na IE 4+, Mozille 0.9.x+/Netscape 6+ a Opeře 5+, vše pod Windows 98. Vyskytuje se zde pouze známá chyba IE u neuspořádaných seznamů. Tento prohlížeč totiž zobrazuje odrážky podle velikosti písma nastaveného v prohlížeči, ne podle velikosti písma v položce, jak by správně měl.

Uvedené CSS doporučuji skrýt před prohlížeči s pseudopodporou CSS, jako je například Netscape 4 – podpora CSS v tomto prohlížeči je tak prolezlá chybami, že vám ani nedoporučuji zkoušet s ním jakkoli experimentovat. Naopak je vhodnější ponechat zde výchozí formátování, které je ještě vcelku slušné.

Výsledný efekt si můžete prohlédnout v druhém příkladě. Jedná se o stejný kód jako v prvním příkladě, pouze jsem přidal CSS vlastnosti.

Neuspořádané seznamy

Bez dalších prostojů se podívejme na první CSS vlastnosti:

li {
margin: 0; padding: 0;
}
ul {
margin: 1em 0 1em 1.3em; padding: 0;
list-style-type: disc;
}
ul ul {
list-style-type: square;
}
ul ul ul {
list-style-type: circle;
}

Jak vidíte, nastavujeme velikost okraje i vycpávky u elementu li na 0. U samotného seznamu (element ul) bude okraj nad a pod ním 1em (aby se seznamy odsazovaly od okolního textu), vpravo 0 a vlevo 1.3em. Levý okraj je nutný kvůli odrážkám, které se zobrazují právě v oblasti padding/margin elementu li. Hodnota 1.3em je potom dostatečná pro všechny velikosti písma. Většina prohlížečů používá jako výchozí daleko větší levý okraj, který ale není potřebný.

Dalšími pravidly nastavujeme druh odrážky (pomocí vlastnosti list-style-type). Zde již počítáme se zanořením seznamů. Pokud bude seznam ul uvnitř jiného seznamu, zobrazí se odlišná odrážka (čtvereček), protože selektor ul ul (2 elementy => specifičnost 2) je specifičtější než ul (1 element => specifičnost 1). Při zanoření tří a více seznamů do sebe bude vždy zobrazena malá kružnice (kruh bez výplně), protože pro tyto elementy ul bude platit poslední selektor, který má největší specifičnost.

A proč aplikujeme vlastnosti seznamů (list-style-type) na element ul, když se ve skutečnosti aplikují na jeho položky (element li)? Je to proto, že tyto vlastnosti (list-style-type, list-style-position, list-style-image a list-style) se aplikují pouze na elementy, které se zobrazují jako položky seznamu (tzn. mají display: list-item;). Pokud je aplikujeme na jiný element (v našem případě ul s implicitním display: block;), musí je klient ignorovat a předat elementům, které jsou jeho potomky (tzn. leží uvnitř tohoto elementu), protože tyto vlastnosti jsou dědičné. Takto nám tedy „proteče“ vlastnost list-style-type k elementu li, kde se již aplikuje . Element li je v (X)HTML jediný, který je implicitně formátován jako položka seznamu (má display: list-item;). Vlastnost list-style-type by protékala i dál do vnořených seznamů, zde je již ale znovu nastavena, a proto se její zděděná hodnota ignoruje.

Zastavení u em

Nyní bych se ještě rád zastavil u CSS jednotky em. Tato jednotka je relativní, její skutečná hodnota je vždy odvozena podle daného poměru od nějaké jiné hodnoty. V tomto případě se jedná o velikost písma pro daný element. Pokud tedy nastavíme margin: 2em;, znamená to, že okraje daného elementu budou nastaveny na dvojnásobek velikosti písma elementu. Pro tento element ale nemusíme velikost písma nastavovat, stačí i zděděná hodnota. Pokud velikost písma nenastavíme v celém dokumentu, použije se hodnota nastavená v prohlížeči. Jednotka em je tedy použitelná za všech okolností.

Jednotku em můžeme použít také pro nastavení velikosti písma. V tomto případě se použije velikost písma rodiče elementu:

body {
font-size: 10px;
}
h1 {
font-size: 2.5em;
}
…
<body>
<h1>Nadpis</h1>
</body>

Velikost písma bude v elementu h1 10px × 2.5, tedy 25px.

Tím, že se jednotka em váže k velikosti písma, stává se výtečnou a v jistých ohledech i nenahraditelnou pomůckou. Okraje a vycpávky kolem elementu, šířka textu – to vše může být nastaveno relativně k velikosti písma, čímž dosáhneme maximální čitelnosti textu při všech jeho velikostech. Kdybychom například nastavili šířku elementu na pevno (třeba pomocí pixelů nebo typografických bodů), a uživatel zvětšil písmo na naší stránce, mohlo by se stát nečitelným, protože by se na řádek vešlo příliš málo znaků. Jednotka em nám ale pomůže tento problém vyřešit.

Kvůli výhodám, které jsem právě popsal, doporučuji veškeré délky, které jsou nějakým způsobem spojeny s textem, definovat pomocí jednotek em. Platí to i tehdy, kdy používáte pro celou stránku pevnou velikost písma. V moderních prohlížečích lze totiž zvětšit i takto definované písmo, ale hlavně si na webu nikdy nemůžete být jisti, jak bude vaše stránka zobrazována (web prostě není DTP). Použitím relativních jednotek jí dodáte ohromnou dávku flexibility.

Uspořádané seznamy

Uspořádané seznamy využívají pro položky elementy li, stejně jako neuspořádané seznamy, proto již nemusíme znovu nulovat okraje a vycpávky pro tento element. Elementy ol budeme formátovat takto:

ol {
margin: 1em 0 1em 1.9em; padding: 0;
list-style-type: decimal;
}
ol ol {
list-style-type: upper-alpha;
}
ol ol ol {
list-style-type: lower-alpha;
}

Všechna pravidla jsou podobná těm, které jsme již použili pro formátování neuspořádaného seznamu, je zde pouze několik odlišností. Levý okraj musí být větší, protože zde slouží jako odrážky čísla/písmena s tečkami, které zabírají víc místa. Jako odrážky se budou používat postupně podle stupně zanoření běžná arabská čísla, velká latinská písmena a malá latinská písmena. Mohli bychom nastavit ještě například římská čísla pro čtvrtý stupeň zanoření, ale zdá se mi to již zbytečné, protože k zanoření čtyř seznamů do sebe u správně strukturovaných textů obvykle nedochází.

Výčty

Výčty formátujeme pomocí těchto CSS vlastností:

dl {
margin: 1em 0; padding: 0;
}
dt {
font-style: italic;
margin: 0; padding: 0;
}
dd {
margin: 0; margin-left: 1.9em; padding: 0;
}

Jak vidíte, nejedná se o nic složitého. Opět pouze sjednotíme okraje a vycpávky, navíc jsme ale ještě zvýraznili vysvětlovaný pojem kurzívou. Protože u výčtů se nevytváří odrážky, nemusíme se nijak zvlášť starat o jejich zanořování.

Co jsme vytvořili

Dnes jsme se věnovali tomu, jak formátovat seznamy tak, aby dobře vypadaly, a to bez spoléhání se na implicitní formátování prohlížeče. CSS pravidla, která jsme dnes vytvořili, si můžete kompletně zkopírovat do vašich souborů CSS a používat potom seznamy a výčty ve svých dokumentech bez obav o jejich vzhled, který tak bude jednotný ve většině prohlížečů. Navíc budou seznamy a výčty bez zbytečných okrajů a vycpávek, se správně nastavenými odrážkami bez ohledu na rozmary prohlížečů.

Seznamy a výčty lze formátovat i mnoha dalšími způsoby, kterým jsem se nevěnoval, protože záleží především na grafickém pojetí konkrétního webu. Jsou to například různé rámečky, pozadí nebo triky s písmem. Snažil jsem se vám pouze ukázat základní formátování, které můžete uplatnit vždy.