Stare przysłowie księgowych mówi: "Umiesz liczyć, licz na kalkulatorze". Magazynierzy mają podręczne klikacze do zliczania ilości towaru. Jeśli chodzi o twórców stron, to albo wstawiają numerację "na sztywno", albo używają liczników, albo list numerowanych. I o tych ostatnich dziś.
Jak na wuefie.
W HTML mamy dwa typy list, nienumerowane - wypunktowe, czyli UL, jak i numerowane czyli OL. Ta ostatnia kryje w sobie kilka ciekawostek, bo umożliwia nie tylko prostą numerację od 1 do N. Możemy stworzyć jeszcze 9 innych wariantów! A to wszystko dzięki dwóm z trzech atrybutów:
- type - mamy numerację liczbową, liczbową rzymską lub literową,
- reversed - możemy numerować od końca,
- start - możemy numerować od wybranej liczby.
Jeśli chodzi o atrybut type, to mamy dostępne następujące wartości:
- 1 - standardowa numeracja z wykorzystaniem cyfr arabskich,
- A - numeracja literowa, wielkie litery,
- a - numeracja literowa, małe litery,
- I - numeracja rzymska, wielkie litery,
- i - numeracja rzymska, małe litery.
Być może miałeś z nimi do czynienia (z pierwszym typem na pewno), ale głównie w kontekście CSS. Tu nie potrzeba zaprzęgać CSS. Drugi i trzeci typ - wykorzystywane są tu litery alfabetu (angielskiego, czyli bez polskich znaków, niezależne od ustawień języka). Co się stanie jeśli braknie liter? Numeracja jest dwuliterowa, trzyliterowa, itd.
Atrybut reversed umożliwia natomiast numerację malejącą. Normalnie moglibyśmy osiągnąć to poprzez licznik w CSS, ale tylko w systemie cyfr arabskich.
Trzeci atrybut - start - umożliwia nadanie początkowej wartości dla numeracji (czyli wartości dla pierwszego punktu). Tu niezależnie od wybranego typu listy, zawsze wprowadzamy liczbę arabską (nie litery i nie liczbę rzymską).
I kilka przykładów:
<!--
brak start, ale jest reversed
czyli zaczynamy od maksymalnej wartości
aby skończyć na 1
-->
<ol reversed>
<li>Piosenka amerykańskiego wykonawcy</li>
<li>Latynoski znany taniec</li>
<li>Muzyka z filmu gangsterskiego</li>
</ol>
<!--
zaczynamy liczyć w górę od 10
-->
<ol start="10">
<li>Piosenka amerykańskiego wykonawcy</li>
<li>Latynoski znany taniec</li>
<li>Muzyka z filmu gangsterskiego</li>
</ol>
<!--
zaczynamy liczyć w dół od 100
-->
<ol reversed start="100">
<li>Piosenka amerykańskiego wykonawcy</li>
<li>Latynoski znany taniec</li>
<li>Muzyka z filmu gangsterskiego</li>
</ol>
<!--
zaczynamy liczyć w górę od 100
korzystając z liczb rzymskich
-->
<ol start="100" type="i">
<li>Piosenka amerykańskiego wykonawcy</li>
<li>Latynoski znany taniec</li>
<li>Muzyka z filmu gangsterskiego</li>
</ol>
Jak to na tym świecie bywa, atrybut reversed nie działa na IE (mobile również) oraz Edge. Jednak ze względu na brak potrzeby angażowania CSS mogą się przydać.
Na dzis koniec zajęć!