Styl odrážkového seznamu

Pro lepší přehlednost se obsah webových stránek kromě do nadpisů a odstavců zadává i do seznamů.

Používají se dva základní typy odrážkových seznamů:

1. <ul> (unordered list) – nečíslovaný seznam

   • Položka
   • Položka
   • Položka

2. <ol> (ordered list) – číslovaný seznam

   1. Položka
   2. Položka
   3. Položka

Kromě toho existují ještě značky <menu> a <dir>. Obě se v prohlížečích chovají přibližně stejně jako <ul>. Element <dir> je „obsolete“ – zastaralý, překonaný. Značku <menu> původně čekal stejný osud, ale nakonec byla znovuzrozena pro kontextovou nabídku s využitím značky <menuitem>.

Srovnání seznamů <ul>, <menu> a <dir>.

Nakonec existujte ještě seznam definiční – <dl>, ten ale ve výchozím stylu žádné odrážky nemá.

Stylování

Pro jiný než výchozí styl seznamů existuje vlastnost list-style. Pomocí list-style v kombinaci s display: list-item jde také vytvořit odrážky z jiných elementů než <li> (ukázka).

Zápis

ul {
  list-style: typ umístění obrázek;
}

Vlastnost list-style je zkratkou pro další list-style-* vlastnosti:

• list-style-type (typ),
• list-style-position (umístění),
• list-style-image (obrázek)

Vzhled stylu seznamu jde nastavovat pro celý seznam (<ul>/<ol>) nebo pro jednotlivé položky <li> (položky mají vyšší váhu).

list-style-type

Stanovuje typ odrážky. Pro nečíslovaný seznam (<ul>) připadají v úvahu.

• puntík – list-style-type: disc
• kolečko – list-style-type: circle
• čtvereček – list-style-type: square

Pro číslované seznamy je potom plno několik stylů čísel.

1. číslo – list-style-type: decimal
2. číslo s nulou na začátku – list-style-type: decimal-leading-zero
3. římské číslice – list-style-type: lower-roman
4. velké římské číslice – list-style-type: upper-roman
5. malá řecká písmena – list-style-type: lower-greek
6. malá písmena – list-style-type: lower-latin
7. velká písmena – list-style-type: upper-latin
8. malá písmena – list-style-type: lower-alpha
9. velká písmena – list-style-type: upper-alpha

Existuje jich ještě mnohem víc pro různé exotické jazyky (např. hiragana, katakana, mongolian atd.).

Zajímavé je, že list-style-type je nezávislý na typu seznamu (<ul>/<ol>). Číslovaný seznam se tak může stát nečíslovaným a obráceně.

V případě zanoření více seznamů do sebe se typicky (dle výchozích stylů prohlížečů) mění styly jednotlivých úrovní.

U nečíslovaných seznamů (<ul>) se v prvních třech úrovních vyskytne tečka, kolečko a čtvereček. V následujících úrovních už je pouze čtvereček.

Nastavit pro všechny úrovně to samé (puntík – disc) dokáže prostý kód:

ul {
    list-style: disc;
}

Nastavit si vlastní styl pro jednotlivé úrovně jde nějak takto:

ul {
    list-style: circle;
}
ul ul {
    list-style: square;
}
ul ul ul {
    list-style: disc;
}

U číslovaných seznamů se podobná změna stylu na základě úrovně ve všech rozšířenějších prohlížečích nekoná.

Umístění list-style-position

Odrážky položek seznamu mohou mít dvojí umístění.

• mimo – list-style-position: outside
• uvnitř – list-style-position: inside

Rozdíl outside (výchozí) a inside je zvlášť patrný u víceřádkových položek, kde vypadá inside většinou špatně.

Odrážka/číslo v případě umístění venku (outside) se zobrazuje mimo element <li>, je tedy nutné, aby byl okolo prostor, má-li se odrážka zobrazit. Ve výchozím CSS proto mají prohlížeče pro seznamy levý padding o hodnotě 40 pixelů.

Obrázková odrážka list-style-image

Jako odrážku jde použít i obrázek.

ul {
  list-style-image: url(odrazka.png);
}

V drtivé většině případů ale není list-style-image k užitku, protože chybí kontrola nad umístěním obrázku. Pokud není obrázek odrážky ve velikosti řádku, nebude správně zarovnaný. Jelikož písmo může být různě velké, nejde na to spoléhat, takže je lepší list-style-image vůbec nepoužívat.

Pro obrázkové odrážky se proto používá využívá běžné pozadí (background) pro <li> nebo absolutně posicované :before/:after elementy, kde si jde s požadovaným umístěním vyhrát.

Pravidlo @counter-style a symbols

Pro možnost si nadefinovat vlastní styl odrážek a číslování bez používání různých hacků v podobě :before/:after, obrázků a posicování jde od Firefoxu 33 používat @counter-style a symbols.

@counter-style

Zápis celého stylu může vypadat následovně:

@counter-style cisla {
/* opakování symbolů (cyclic, fixed, …) */
  system: cyclic;
/* symboly */
  symbols: 'tři' 'dva';
/* znaky před symbolem */
  prefix: "";
/* znaky po symbolu */
  suffix: ") ";
/* rozsah, kde se symboly použijí */
  range: 2 3;
/* co má číst hlasová čtečka */
  speak-as: numbers;
}

Styl se potom připojí podle svého názvu do list-style:

ul {
  list-style: cisla;
}

Výsledek bude následovný:

Živá ukázka – Firefox 33+

Funkce symbols

Symbols je potom funkce, která se dá použít přímo v list-style bez nutnosti deklarovat styl pomocí @counter-style. Stejných výsledků jde dosáhnout oběma způsoby – @counter-style se hodí pro deklaraci stylů v rámci celého CSS, aby se styly nemusely v kódu opakovat a šly snadno změnit na jednom místě.

Příklad použití smybols:

ul {
    list-style: symbols(cyclic '✔');
}

Živá ukázka – použití symbols

Živá ukázka – totéž s @counter-style

Vlastní styl odrážky

Ve starších prohlížečích jde vlastní textové odrážky dosáhnout absolutním posicováním pseudo-elementu :before nebo :after.

Samostatná živá ukázka

Odlišná barva odrážky

Ani pro jinou barvu odrážky a obsahu položky neexistuje elegantní řešení. Jedna možnost je obalit obsah v <li>:

Barva odrážky se bere z barvy (color) položky. Takže není možné nastavit jednu barvu pro <ul>/<ul> a druhou pro <li>.

Pokud je komplikované měnit HTML kód (aby byl kolem obsahu v <li> další element), nezbývá něž opět odrážku vytvořit pomocí :before a vhodně ji naposicovat.

Odlišný styl a číslování

S využitím CSS vlastnosti counter (IE8+) jde postup s :before odrážkou použít i pro číslování v odlišném stylu.

Samostatná živá ukázka – zajímavější styl číslování

Odkazy jinam

• MDN: list-style
• Jak psát web: Vlastnost list-style, Seznamy v HTML