chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

[HTML5] Lista numerowana – jakie są nowe możliwości?

Ta wersja
blog.piotrnalepa.pl/2012/02/27/html5-lista-numerowana-jakie-sa-nowe-mozliwosci
Opublikowano
Autor
, Staff Software Engineer
Kategoria
HTML5
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 14 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

Wraz z wdrożeniem specyfikacji HTML5 do przeglądarek internetowych powstało wiele nowych znaczników HTML oraz wiele z nich obudowano w nowe możliwości. Jednym z takich znaczników, którego możliwości zostały rozbudowane, jest znacznik <ol>.
Co ciekawe, powróciło część rzeczy porzuconych wraz ze specyfikacją HTML 4.01.

Sekcja 1Znacznik <ol> i jego nowe atrybuty

Znacznik listy numerowanej wzbogacił się o 4 nowe atrybuty: type, start, value i reverse. Praktycznie wszystkie są wspierane przez nowoczesne przeglądarki, ale co ciekawe teoretycznie najgorzej wypada implementacja atrybutu reverse, co dla mnie jest mało zrozumiałe.

Sekcja 1.1Atrybut: type

Atrybut ten jest odpowiedzialny za definiowanie stylu listy i ma on znaczenie semantyczne dla całego dokumentu HTML5. Takie podejście może powodować pewne zamieszanie w związku z tym, że dotychczas listy można było stylować za pomocą języka CSS. Nic w tej kwestii się nie zmienia. Można dalej stosować style CSS z powodzeniem. Jednak należy pamiętac o tym, że atrybut type będzie działał dla listy która nie ma zdefiniowanych stylów CSS.

Pytanie więc, gdzie można stosować ten nowy atrybut zgodnie ze standardami?
Zaleca się jego stosowanie w dokumentach technicznych i prawniczych, gdzie numeracja ma znaczenie szczególne.

Atrybut type może przyjąć 5 wartości:

type="1" domyślny styl numeracji za pomocą cyfr arabskich
type="a" numeracja za pomocą małych liter
type="A" numeracja za pomocą dużych liter
type="i" numeracja za pomocą małych cyfr rzymskich
type="I" numeracja za pomocą dużych cyfr rzymskich

Sekcja 1.2Atrybuty: start i value

Pierwszy z wyżej wymienionych atrybutów jest odpowiedzialny za określenie numeru od ktorego zacznie się numeracja danej listy numerycznej. Może to być szczególnie użyteczne w przypadku, gdy zależy nam na rozbiciu listy na mniejsze kawałki bez utraty ciągłości numeracji. Jest on przypisywany do znacznika <ol>.

Atrybut value jest bardzo podobny w działaniu do atrybutu start, lecz jest przypisywany do znacznika <li>. Dzięki temu, można łamać ciągłośc numeracji w dowolnym miejscu. Osobiście, nie do końca rozumiem sens stosowania tego atrybutu (value).

Przykład 1HTML
1
2
3
4
5
<ol type="a" start="3">
	<li>1 pozycja</li>
	<li value="7">2 pozycja</li>
	<li>3 pozycja</li>
</ol>

Sekcja 1.3Atrybut: reversed

Głównym zadaniem tego atrybutu jest numeracja listy od tyłu. Niestety jest jeszcze niewspierany przez przeglądarki. Szkoda.

Przykład 2HTML
1
2
3
4
5
6
<ol type="I" reversed>
	<li>1 pozycja</li>
	<li>2 pozycja</li>
	<li>3 pozycja</li>
	<li>4 pozycja</li>
</ol>

Sekcja 2Podsumowanie

Jak widać, nowe atrybuty pozwalają na wiele. Jeden z nich powiela się ze stylami CSS, ale czego się nie robi dla semantyki. Jednocześnie, szkoda że atrybut reversed nie został poprawnie zaimplementowany we wszystkich przeglądarkach.

Poniżej przedstawione jest zestawienie zgodności atrybutów w przeglądarkach:

Zgodność z przeglądarkami
Atrybut Chrome Firefox IE Opera Safari
type="" + + + + +
start="" + + + + +
value="" + + + + +
<ol reversed> +/- - - - +/-
Udostępnij
Uwagi

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!