Element ol w HTML 5 ma nowy atrybut — reversed. Przywrócone zostały również niektóre z atrybutów wcześniej usuniętych w języku HTML 4. Są to: start i type dla elementu ol oraz value dla elementu li. Co ciekawsze te przywrócone atrybuty zostały usunięte z języka HTML 4 jako prezentacyjne. Dlaczego je przywrócono? Odpowiedź poniżej.

Prezentacja a semantyka

Jak wiadomo warstwa prezentacji to domena CSS, a nie HTML. Własność list-style-type zastąpiła atrybut type języka HTML 4.01, natomiast atrybuty start i value zostały opuszczone i można je jedynie zastąpić w niektórych przypadkach licznikami CSS. Dlaczego zatem mielibyśmy chcieć określać własności prezentacyjne list za pomocą HTML-a?

Atrybut type

Podczas gdy styl licznika listy uporządkowanej jest ogólnie rzecz biorąc prezentacyjny, to jednak w niektórych dokumentach może być on częścią semantyki dokumentu, na co wskazują zapisy w dokumentacji na temat tego atrybutu.

Atrybutu type można używać do określenia rodzaju znacznika, który ma być użyty w liście, w przypadkach, gdy ma to jakieś znaczenie (np. w treści dokumentu są odwołania do liczb/liter poszczególnych elementów).

— Obecne standardy języka HTML WHATWG

Poniższe przykłady dotyczą dokumentów urzędowych oraz technicznych:

Obowiązki firmy — Transza Pierwsza

3.3 Stosownie do punktu 3.2(a) po zakończeniu pierwszej transzy firma:
(a) zakupi stół z piłkarzykami dla personelu
(b) …

Przykład dokumentu urzędowego ze zwróceniem uwagi na odniesienie do elementu listy o niedziesiętnym numerze.

Styl listy możemy określić używając atrybutu type z następującymi wartościami:

Wartości <ol type="">	Ekwiwalent list-style-type
type="1"	decimal (domyślny)
type="a"	lower-alpha
type="A"	upper-alpha
type="i"	lower-roman
type="I"	upper-roman

Należy podkreślić, że nie jest to pełna alternatywa dla wartości list-style-type, ponieważ tylko tych pięć stylów listy jest dostępnych, podczas gdy CSS2.1 określa ich jedenaście dla elementu ol. Jeśli używane są liczniki dziesiętne albo brak odniesień do numerów liczników w tekście powinno się używać CSS zamiast atrybutu type. Jeśli jednak licznik listy pełni rolę semantyczną, to należy go utworzyć za pomocą HTML-a. Zauważ, że własność list-style-type przesłoni wartości atrybutu type, zatem atrybut ten zadziała tylko wtedy, jeżeli nie zostanie określony typ listy za pomocą własności list-style-type.

Atrybuty start i value

Atrybut start umożliwia nam ustawienie pierwszej pozycji licznika. Jest to wygodne wtedy, gdy trzeba utworzyć listę podzieloną na kilka części i chcemy mieć możliwość kontynuowania numeracji od miejsca, w którym została zakończona poprzednia lista. Atrybutu value używa się dla elementów li, co umożliwia ręczne numerowanie elementów listy. Atrybut value zdefiniowany dla pierwszego elementu nadpisuje atrybut start. Następny element li bez atrybutu value będzie zwiększał poprzedni atrybut value o jeden.

Pierwszy element na liście ma liczbę porządkową określoną przez atrybut start elementu ol, chyba że elementli będzie miał poprawnie zdefiniowany atrybut value, w którym to przypadku elementowi temu zostanie przypisana wartość określona właśnie w tym atrybucie value. — Obecne standardy języka HTML WHATWG

Oto przykład sposobu użycia atrybutów start, value i type:

 
<!-- Kontynuacja wcześniejszej listy z value="" -->
<ol type="I">
  <li value="7">siódmy element listy</li>
  <li>ósmy element listy</li>
  <li>dziewiąty element listy</li>
</ol>
<!-- Kontynuacja wcześniejszej listy start="" -->
<ol type="I" start="7">
  <li>siódmy element listy</li>
  <li>ósmy element listy</li>
  <li>dziewiąty element listy</li>
</ol>

7. siódmy element listy (przy zastosowaniu <li value=”7″>)
8. ósmy element listy
9. dziewiąty element listy

7. siódmy element listy (przy zastosowaniu <ol start=”7″>)
8. ósmy element listy
9. dziewiąty element listy

Użycie atrybutów value i start w celu kontynuowania poprzedniej listy składającej się z sześciu elementów.

Te dwa atrybuty dają nam większą kontrolę nad numerowaniem, jednak wadą ich stosowania jest to, że listy tworzone przy ich użyciu mogą wyglądać jakby były źle skonstruowane. Dlatego dobrze jest też zapoznać się z tajnikami liczników CSS. Być może będziesz chciał użyć liczników CSS do tworzenia zagnieżdżonych list typu „1.1.1.”

Sortowanie malejące przy użyciu atrybutu reversed

Atrybut reversed umożliwia utworzenie uporządkowanej listy z sortowaniem malejącym. Jeżeli kodujesz listę składającą się z 210 elementów i uporządkowaną malejąco albo masz jakiś dziwny fetysz, to ten atrybut jest w sam raz dla Ciebie.

Atrybut reversed jest atrybutem logicznym, tzn. jego obecność oznacza, że lista jest uporządkowana malejąco (…3, 2, 1).

— Obecne standardy języka HTML WHATWG

Domyślnie ol reversed rozpoczyna odliczanie od sumy wszystkich elementów i liczy do jedynki, zatem nie ma potrzeby określania atrybutu start, dopóki nie zechcesz wprowadzić jakichś zmian. Niestety jak za moment zobaczymy w tabeli obsługi atrybutów przez przeglądarki, żadna z nich jeszcze tego nie obsługuje, zatem w międzyczasie możesz ustawić listę z atrybutem reversed ręcznie, określając każdą pozycję elementu listy przy użyciu atrybutu value (zobacz poniższy przykład) lub liczników CSS.

<!-- lista domyślna -->
<ol>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>
<!-- użycie atrybutu reversed (w obsługującej go przeglądarce będzie to wyglądało tak samo jak trzecia z poniższych list) -->
<ol reversed>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>
<!-- użycie atrybutów value w elementach li -->
<ol>
  <li value="3">trzy</li>
  <li value="2">dwa</li>
  <li value="1">jeden</li>
</ol>

1. trzy
2. dwa
3. jeden

1. trzy
2. dwa
3. jeden

3. trzy
2. dwa
1. jeden

Normalna uporządkowana lista, uporządkowana lista z atrybutem reversed oraz uporządkowana lista z każdym elementem numerowanym ręcznie poprzez użycie atrybutu value

Tabela obsługi atrybutów type, start, value i reversed przez przeglądarki

Przeglądarki obsługują atrybuty start, type i value , aby poprawnie wyświetlać starsze treści (np. w HTML-u 3.2), zatem możemy ich używać od zaraz.

Przeglądarki obsługujące atrybuty start, type, value i reversed

Atrybut	IE	Firefox	Safari	Chrome	Opera
<ol type="">	✔	✔	✔	✔	✔
<ol start="">	✔	✔	✔	✔	✔
<li value="">	✔	✔	✔	✔	✔
<ol reversed>1	✘	✘2	5.23	183	✘

1. Możemy użyć wypełniacza (ang. polyfill) JavaScript, aby obejść brak obsługi atrybutu reversed takiego jak wypełniacz (i towarzyszący mu artykuł) zaproponowany przez Loiusa Lazarisa lub wypełniacze zaproponowane przez Titani, które używają atrybutu value
2. Niestety jest to jeszcze nienaprawiony błąd 601912
3. Przeglądarka Chrome 18 (taki numer miała wersja rozwojowa w czasie pisania tego artykułu) obsługuje atrybut reversed (podziękowania dla Philipa Tellisa). Robi to również Safari 5.2 w wersji rozwojowej (Developer Release) (podziękowania dla Sam Rayner)

 
<!-- domyślny atrybut reversed (nieobsługiwany) -->
<ol reversed>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>
<!-- użycie wypełniacza atrybutu reversed -->
<ol class="polyfill-me" reversed>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>

1. trzy (domyślny atrybut reversed)
2. dwa
3. jeden

1. trzy (użycie wypełniacza atrybutu reversed)
2. dwa
3. jeden

Nasz wcześniejszy przykład z użyciem atrybutu reversed z zastosowaniem wypełniacza Titani.

Używając narzędzia Modernizr lub za pomocą dodatku „lists-reversed ” możesz wykryć obsługę atrybutu reversed przez przeglądarki. Jeżeli twój wypełniacz znajdowałby się w pliku reversed.js to mógłbyś go wczytać za pomocą poniższego kodu:

yepnope({
  test : Modernizr.olreversed,
  nope : ['reversed.js']
});

Standardowe ustawienia w celu załadowania kodu przy użyciu narzędzia Modernizr:

• Extra > Modernizr.load
• Extensibility > Modernizr.addTest
• Community add-ons > lists-reversed

Wnioski

Nie są to atrybuty, których będziesz często używać, ale mogą się okazać przydatne. Pomogą Ci one uniknąć numerowania elementów listy, jako części zawartości (prowadząc do podwójnego numerowania, jeżeli w arkuszu stylów nie będzie deklaracji list-style-type: none;), stosowania brzydkich sztuczek typu ustawienie height:0; dla kilku elementów li, aby uzyskać odpowiednią wartość początkową. Najlepsze jest to, że atrybuty type, start i value są już obsługiwane i gotowe do użycia.

Teraz jak zwykle należy upewnić się, że używasz ich w odpowiednim miejscu:

• Atrybutu type należy używać tylko wtedy, gdy styl listy dla liczników ma wartość semantyczną a znaczenie dokumentu się zmieni, jeśli CSS (zawierając odpowiednie wartości list-style-type) się nie załaduje.
• Zastanów się czy w przypadku atrybutu start ma to być lista mieszana.
• O ile to możliwe, należy unikać atrybutu value, ponieważ numerowanie przez przeglądarkę jest o wiele bardziej niezawodne od ręcznego ustawiania numeracji.
• Niestety obecny brak obsługi przez przeglądarki oznacza, że będzie istniała konieczność użycia wypełniacza w celu uzupełnienia obsługi atrybutu reversed.

Co myślisz o tych nowych atrybutach? Potrzebowałeś ich w przeszłości? Używałeś niektórych z nich, jako „starej szkoły programowania” w języku HTML 3.2? Użyjesz ich w przyszłości? Daj nam znać w komentarzach.