Kilka przydatnych i kreatywnych sposobów na zmianę stylu listy.
Co przychodzi Ci do głowy, gdy myślisz o liście? Najbardziej oczywistym przykładem jest lista zakupów, czyli najprostsza z nich, czyli zbiór elementów w ustalonej kolejności. Jednak z list korzystamy w internecie na wiele różnych sposobów. Zbliża się koncert? Bardzo prawdopodobne, że jest to lista. Wieloetapowy proces rezerwacji? Prawdopodobnie lista. Galeria obrazów? Nawet to można uznać za listę obrazów z podpisami.
W tym artykule omówimy różne typy list HTML dostępne w internecie i ich zastosowania. Przedstawimy też atrybuty, których możesz nie znać. Omówimy też przydatne i kreatywne sposoby tworzenia stylów za pomocą CSS.
Kiedy używać listy
Elementu listy HTML należy używać, gdy elementy mają być pogrupowane semantycznie. Technologie wspomagające osoby z niepełnosprawnością (np. czytniki ekranu) powiadamiają użytkownika o dostępnej liście i liczbie elementów. Jeśli zastanowisz się nad siatką produktów w sklepie internetowym, posiadanie tych informacji byłoby bardzo pomocne. Dlatego dobrym rozwiązaniem może być użycie elementu listy.
Wyświetlenie listy typów
W przypadku znaczników mamy do wyboru 3 różne elementy listy:
- Lista nieuporządkowana
- Lista uporządkowana
- Lista opisów
Ich wybór zależy od konkretnego przypadku użycia.
Lista nieuporządkowana (ul)
Nieuporządkowany element listy (<ul>) jest najbardziej przydatny, gdy elementy na liście nie mają określonej kolejności. Domyślnie wyświetla się ona w postaci listy punktowanej. Przykładem może być lista zakupów, na której kolejność nie ma znaczenia.
Typowym przykładem witryny w internecie jest menu nawigacyjne. Podczas tworzenia menu warto umieścić atrybut ul w elemencie nav i określić je etykietą, by ułatwić korzystanie z technologii wspomagających. Powinniśmy też zidentyfikować bieżącą stronę w menu. Możemy to zrobić, korzystając z atrybutu aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
W tym artykule o strukturze menu znajdziesz szereg zaleceń, które sprawią, że menu nawigacyjne będzie dostępne dla wszystkich.
Lista uporządkowana (ol)
Uporządkowany element listy (<ol>) to najlepszy wybór, gdy ważna jest kolejność elementów (tak jak w przypadku procesu wieloetapowego). Domyślnie elementy listy są numerowane. Przykładem może być zestaw instrukcji, w których czynności należy wykonać po kolei.
Zarówno elementy <ol>, jak i <ul> mogą zawierać tylko elementy <li> jako bezpośrednie elementy podrzędne.
Lista opisów (dl)
Lista opisów zawiera hasła (elementy <dt>) i opisy (<dd>). Każdemu z tych terminów może towarzyszyć więcej niż 1 opis. Przykładem może być glosariusz czy menu restauracji. Listy opisów nie są domyślnie wyświetlane z żadnymi znacznikami, chociaż przeglądarki często dodają wcięcie elementu <dd>.
W języku HTML można grupować hasła z towarzyszącymi opisami za pomocą właściwości <div>. Jak zajrzymy dalej, może się to przydać do określenia stylu.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Prosty styl listy
Jednym z najprostszych zastosowań listy jest umieszczanie w bloku tekstu głównego. Te proste listy często nie wymagają wymyślnego stylu, ale możemy w pewnym stopniu dostosować znaczniki listy uporządkowanej lub nieuporządkowanej, np. za pomocą koloru marki lub niestandardowego obrazu dla punktorów. Dzięki elementowi list-style i pseudoelementowi ::marker możemy sporo zrobić.
::znacznik
Oprócz nadania znacznikom list podstawowych stylizacji możemy też tworzyć listy cykliczne. Używamy 3 różnych adresów URL zdjęć dla wartości content pseudoelementu ::marker, co zwiększa odręczny charakter naszej listy zakupów (w odróżnieniu od używania tylko jednego zdjęcia):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Wskaźniki niestandardowe
W przypadku niektórych list uporządkowanych można użyć wartości licznika, ale dołącz do niej inną wartość. Możemy użyć licznika list-item jako wartości właściwości content naszego znacznika i dołączyć dowolne inne treści:
::marker {
content: counter(list-item) '🐈 ';
}
Liczniki automatycznie zwiększają wartość o 1, ale możemy zezwolić na zwiększanie ich o inną wartość, ustawiając w elemencie listy właściwość counter-increment. Spowoduje to np. zwiększenie wartości liczników o 3 za każdym razem:
li {
counter-increment: list-item 3;
}
Liczniki zdarzeń można zgłębić o wiele więcej. W artykule Listy CSS, znaczniki i liczniki szczegółowo wyjaśniamy niektóre z możliwości.
Ograniczenia stylu znacznika ::marker
Czasami możemy potrzebować większej kontroli nad położeniem i stylem znaczników. Nie można na przykład umieścić znacznika za pomocą Flexbox lub siatki. Może to być problem, jeśli wymagasz innego wyrównania. ::marker ujawnia ograniczoną liczbę właściwości CSS na potrzeby stylu. Jeśli nasz projekt wymaga czegoś innego niż podstawowy styl, lepiej będzie użyć innego pseudoelementu.
Style list, które nie wyglądają jak listy
Czasem może się zdarzyć, że zechcesz nadać naszym listom styl zupełnie inny niż domyślny. Często zdarza się to w przypadku menu nawigacyjnego, w którym zazwyczaj lubimy usunąć wszystkie znaczniki. Możemy wtedy wyświetlić listę poziomo za pomocą Flexbox. Zazwyczaj wybiera się ustawienie none we właściwości list-style. Spowoduje to, że pseudoelement znacznika nie będzie już dostępny w DOM.
Niestandardowe znaczniki z symbolem ::przed
Styl pseudoelementu ::before był popularnym sposobem tworzenia niestandardowych znaczników list przed pojawieniem się ::marker. Jednak nawet teraz może pozwolić nam na większą elastyczność, gdy tego potrzebujemy, przy tworzeniu złożonych graficznie stylów list.
Podobnie jak w przypadku ::marker, możemy dodać własne style punktorów za pomocą atrybutu content. W odróżnieniu od ::marker, musimy przeprowadzić pewne ręczne pozycjonowanie, ponieważ nie uzyskujemy automatycznych korzyści oferowanych przez list-style-position. Korzystając z flexbox, możemy stosunkowo łatwo go umieścić i stwarza to większe możliwości dopasowania. Można na przykład zmienić położenie znacznika:
Jeśli określamy styl listy uporządkowanej za pomocą elementu ::before, można użyć liczników do dodania znaczników liczbowych.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Użycie właściwości ::before zamiast ::marker zapewnia nam pełny dostęp do właściwości CSS w celu określania niestandardowych stylów, a także zezwala na animacje i przejścia – w tym przypadku obsługa ::marker jest ograniczona.
Wyświetlanie listy atrybutów
Elementy listy uporządkowanej mogą przyjmować atrybuty opcjonalne, które mogą być przydatne w różnych przypadkach.
Odwrócone listy
Jeśli mamy 10 najpopularniejszych albumów ubiegłego roku, moglibyśmy odliczać od 10 do 1. Mogliśmy użyć do tego niestandardowych liczników i zwiększyć je w ujemny sposób. Możemy też po prostu użyć atrybutu reversed w kodzie HTML. Wydaje mi się, że zasadniczo warto korzystać z atrybutu reversed w sposób semantyczny, a nie negatywnie zwiększać licznik w CSS, chyba że są one czysto prezentacyjne. Jeśli nie uda się wczytać kodu CSS, liczby w kodzie HTML będą nadal prawidłowo odliczane. Musimy też zastanowić się, jak czytnik ekranu zinterpretuje listę.
Obejrzyj demonstrację 10 najpopularniejszych albumów z 2021 roku. Gdyby liczba liczników była zwiększana wyłącznie przez CSS, osoba uzyskująca dostęp do strony za pomocą czytnika ekranu mogła stwierdzić, że liczby liczone są w górę, więc liczba 10 w rzeczywistości była pierwszym.
Jak widać w wersji demonstracyjnej, dzięki atrybutowi reversed nasze znaczniki mają już prawidłową wartość, bez jakiejkolwiek ingerencji z naszej strony. Jeśli jednak tworzymy niestandardowe znaczniki list za pomocą pseudoelementu ::before, musimy dostosować liczniki. Musimy tylko nakazać naszemu licznikowi elementów list wzrost ujemny:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
W przeglądarce Firefox wystarczy to zrobić, ale w przeglądarkach Chrome i Safari znaczniki będą odliczać od zera do -10. Możemy to naprawić, dodając do listy atrybut start.
Podziel listy
Atrybut start pozwala nam określić wartość liczbową, od której ma się zaczynać lista. Jest to na przykład przydatne, gdy chcesz podzielić listę na grupy.
Posłużmy się przykładem 10 najpopularniejszych albumów. Możliwe, że chcemy wyliczyć 20 najpopularniejszych albumów, ale w grupie 10. Między tymi grupami znajduje się inna zawartość strony.
Musimy utworzyć w kodzie HTML dwie osobne listy, ale jak możemy się upewnić, że liczniki zdarzeń będą prawidłowe? Ponieważ nasze znaczniki nadal obowiązują, obie listy będą odliczać od 10 do 1, a tego nie chcemy. W kodzie HTML możemy jednak określić wartość atrybutu start. Jeśli dodasz do naszej pierwszej listy wartość start równą 20, znaczniki ponownie zostaną automatycznie zaktualizowane.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Wielokolumnowy układ listy
Wielokolumnowy układ może się niekiedy przydać na naszych listach, jak widać w poprzednich wersjach demonstracyjnych. Dzięki ustawieniu szerokości kolumny możemy mieć pewność, że nasza lista będzie automatycznie reagowała na zmiany, które zostaną umieszczone na co najmniej 2 kolumnach tylko wtedy, gdy jest na niej wystarczająca ilość miejsca. Możesz też ustawić odstęp między kolumnami, a aby zwiększyć zainteresowanie, możesz dodać stylizowaną regułę kolumny (za pomocą skrótu podobnego do właściwości border):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Użycie kolumn może spowodować brzydkie przerwy w elementach listy – nie zawsze jest to zgodne z oczekiwaniami.
Tych wymuszonych przerw można uniknąć, korzystając z elementu break-inside: avoid w elementach listy:
li {
break-inside: avoid;
}
Właściwości niestandardowe
Niestandardowe właściwości CSS dają wiele możliwości w zakresie określania stylu list. Jeśli znamy indeks elementu listy, możemy go użyć do obliczenia wartości właściwości. Niestety obecnie nie można określić indeksu elementu (w żaden sposób użyteczny) tylko w samym kodzie CSS. Liczniki pozwalają nam używać ich wartości tylko we właściwości content i nie zezwalają na obliczenia.
Możemy jednak ustawić indeks elementu w atrybucie style w kodzie HTML, co ułatwia wykonywanie obliczeń, zwłaszcza jeśli używamy języka szablonów. Ten przykład pokazuje, jak ustawimy to za pomocą argumentu Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js to biblioteka, która pełni podobną funkcję po stronie klienta.
Za pomocą wartości właściwości niestandardowej możemy pokazywać postęp na liście na różne sposoby. Może to być np. pasek postępu z listą etapów. W tym przykładzie używamy pseudoelementu z gradientem liniowym, by utworzyć słupek dla każdego elementu, który pokazuje, jak daleko na liście znajduje się użytkownik.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Moglibyśmy też dostosować odcień w miarę postępów listy, używając funkcji kolorów hsl(). Wartość hue możemy obliczyć za pomocą właściwości niestandardowej.
Styl listy opisów
Jak już wspomnieliśmy, możemy zawijać terminy i ich definicje w polu div w elemencie dl, aby dać nam więcej opcji stylu. Na przykład możemy wyświetlić listę w postaci siatki. Ustawienie atrybutu display: grid na liście bez opakowania div wokół każdej grupy oznacza, że warunki i opisy będą umieszczone w różnych komórkach siatki. Czasami jest to przydatne – na przykład w poniższym przykładzie pokazujemy menu ciast z opisami.
Możemy zdefiniować siatkę na samej liście i upewnić się, że hasła i opisy są zawsze wyrównane w kolumnach, a szerokość kolumny jest określana przez najdłuższy okres.
Z drugiej strony, gdy chcesz wyraźnie pogrupować hasła z ich opisami w stylu karty z opisem, bardzo przydatny będzie koder <div>.
Zasoby
- Listy – wprowadzenie do list i ::marker
- Znaczniki niestandardowe z tagiem ::marker
- Listy usług porównywania cen z licznikami