Položkové seznamy v CSS plně pod kontrolou

17. září 2002

•

Seznamy položek reprezentované v jazyce (X)HTML pomocí značek „ul“ a „ol“ patří k těm prvkům značkovacího jazyka, které různé prohlížeče bez dalšího upřesnění zobrazují každý po svém. Vinou toho se často stává, že kaskádovými styly upravený seznam pro jeden prohlížeč se v prohlížeči druhém ocitá někde zcela mimo. V čem je problém a jak ho řešit?

Výsledek jen zdánlivě stejný

Zmíněnými prohlížeči mám na mysli Internet Explorer versus zbytek světa, tedy zejména rodinu prohlížečů s kořeny Mozilly. Problémem jsou odlišné základní hodnoty parametrů, kterými se řídí umísťování seznamového objektu na webové stránce. Prohlížeče pak použijí právě základní hodnoty, pokud jim nepřikážeme jinak. Zde se jedná konkrétně o hodnoty parametrů margin určující velikost vnějšího okolí a parametrů padding, které ovlivňují velikost vycpávky. Největší rozdíl, i když na první pohled neviditelný, je v odsazení položek seznamu zleva. Oba prohlížeče položky odsadí o 40 pixelů od vnitřního okraje rodičovského elementu:

Internet Explorer vše provede definicí:

ul {margin-left: 40px;
padding-left: 0px}

zatímco Mozilla pomocí vycpávky:

ul {margin-left: 0px;
padding-left: 40px}

Optický výsledek je tedy totožný, ovšem pouze do chvíle, kdy začneme jednu z těchto hodnot upravovat. Budeme-li například chtít, aby v Internet Exploreru bylo odsazení poloviční pomocí ul {margin-left: 20px} docílíme zároveň toho, že v Mozille bude odsazení o polovinu větší, neboli 20 px + 40 px. Opačného výsledku dosáhneme při úpravách parametru padding-left. Pro obdržení stejného odsazení v obou prohlížečích je tedy nutné předefinovat oba parametry, přičemž způsob bude záviset na tom, zda-li budeme chtít zviditelňovat okraje či pozadí seznamu:

ul {margin-left: 20px;
padding-left: 20px}

Kromě odsazení položek zleva nastavují prohlížeče odlišně také mezeru nad a pod seznamem. Přestože i v tomto případě se na první pohled zdá velikost mezer totožná, nenechme se zmýlit. V Internet Exploreru měří absolutních 18 pixelů, zatímco v Mozille odpovídá relativní vzdálenosti 1 em. Zvětšíme-li tedy v seznamu písmo, zobrazí nám Mozilla kolem seznamu větší mezery, Internet Explorer však nikoli. Řešením je i zde zadání požadovaných hodnot explicitně:

ul {font-size: large;
margin-top: 10px;
margin-bottom: 10px}

Někdo to rád relativní

Mozilla vůbec dává přednost relativním měřítkům před absolutními hodnotami. Platí to i pro znaky odrážek u položek seznamu. Oba prohlížeče přizpůsobují velikost alfanumerických znaků u číslovaného seznamu adekvátně velikosti písma. V případě symbolů tečky (disc), kolečka (circle) a čtverečku (square) u nečíslovaného seznamu však přizpůsobuje rozměry pouze Mozilla, v Internet Exploreru jsou tyto symboly stále stejně velké. Budeme-li mermomocí potřebovat v Mozille stejně velké odrážky jako v Internet Exploreru, lze si vypomoci menším trikem:

li {font-size: 10pt;
list-style-type: square}
.polozka {font-size: 16pt}

Požadovaný typ odrážky, zde čtverečku, je zmenšen na velikost 10 pt. Aby však velikost písma vlastního obsahu položky odpovídala našim představám, je potřeba tento obsah orámovat další značkou, ve které jsme si zajistili větší písmo snadno pomocí třídy kaskádových stylů:

<ul>
<li><span class=“polozka“>První položka</span></li>
<li><span class=“polozka“>Druhá položka</span></li>
</ul>

Tvorba položkových seznamů tak sice přestává být přímočará, pokud nám však záleží na výsledném efektu, můžeme stejným trikem zařídit také odlišnou barvu odrážek oproti samotnému obsahu položek:

li {font-size: 14pt;
    color: lime;
    list-style-type: circle}
.polozka {font-size: 12pt;
    color: black}

… a ještě jedno mystérium

Nakonec je vhodné zmínit ještě jedno seznamové mystérium: z hlediska čistoty kódu XHTML má značka pro seznam (například <ul>) obsahovat výlučně vnořené značky položek <li>, tj. žádný text mimo položky zde nemá co dělat. Ocitne-li se přesto nějaký text hned za otevírací značkou seznamu, zobrazí prohlížeče tento text jakoby první položku, ovšem bez odrážky. Analogickým způsobem nakládá Mozilla také s texty mezi položkami či těsně před uzavírací značkou seznamu. Internet Explorer však bez ohledu na uzavírací značku položky chápe jako obsah jedné položky vše až po další otevírací značku položky, respektive až po uzavírací značku seznamu (viz stránka s příklady). A pak ať žije XHTML.

Ještě si dovolím jednu drobnost, tedy spíše prosbu. Nadpis tohoto článku sice slibuje plnou kontrolu nad položkovými seznamy, sám bych ovšem rád věděl, jak pomocí CSS ovlivnit hodnoty odrážek u číslovaného seznamu. Mechanismus čítačů (counter), který je definován v CSS 2, současné verze prohlížečů neumí, rozumí snad jen atributu value ve značce <li>, tento způsob však již definice XHTML označuje za přežitý. A triky pomocí parametru zobrazení display: list-item zrovna optimálně nefungují.