Poznaj przydatne i kreatywne sposoby stylizowania listy.
Co przychodzi Ci na myśl, gdy myślisz o liście? Najbardziej oczywistym przykładem jest lista zakupów – najprostsza z list, czyli zbiór elementów w dowolnej kolejności. W internecie używamy jednak list na wiele różnych sposobów. kolekcja nadchodzących koncertów w danym miejscu? Prawdopodobnie lista. wieloetapowy proces rezerwacji; Prawdopodobnie lista. Galeria obrazów? Nawet to może być uważane za listę obrazów z podpisami.
W tym artykule omawiamy różne typy list HTML dostępnych w internecie i okoliczności ich użycia, w tym niektóre atrybuty, które mogą być Ci nieznane. Przyjrzymy się też przydatnym i twórczym sposobom stylizacji elementów za pomocą CSS.
Kiedy używać listy
Element listy HTML należy używać, gdy elementy trzeba grupować semantycznie. Technologie wspomagające (np. czytniki ekranu) informują użytkownika o istnieniu listy i liczbie elementów. Jeśli weźmiemy pod uwagę siatkę produktów na stronie sklepu, wiedza o tych informacjach może być bardzo przydatna. Dlatego warto użyć elementu listy.
Wyświetlenie listy typów
Jeśli chodzi o znaczniki, mamy do wyboru 3 elementy listy:
- Lista nieuporządkowana
- Lista uporządkowana
- Lista opisu
Który z nich wybrać, zależy od przypadku użycia.
Lista nieuporządkowana (ul)
Element listy nieuporządkowanej (<ul>
) jest najbardziej przydatny, gdy elementy na liście nie odpowiadają żadnej określonej kolejności. Domyślnie będzie to lista wypunktowana. Przykładem jest lista zakupów, w której kolejność nie ma znaczenia.
W internecie częstszym przykładem jest menu nawigacyjne. Podczas tworzenia menu warto umieścić element ul
w elemencie nav
i oznaczyć menu etykietą, aby ułatwić korzystanie z technologii wspomagających. Musimy też zidentyfikować bieżącą stronę w menu. Możemy to zrobić za pomocą 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 na temat struktury menu znajdziesz kilka zaleceń, które pomogą Ci zapewnić wszystkim użytkownikom dostęp do menu nawigacyjnych.
Lista uporządkowana (ol)
Element listy uporządkowanej (<ol>
) jest najlepszym wyborem, gdy kolejność elementów ma znaczenie, np. w przypadku procesu wieloetapowego. Domyślnie elementy listy są numerowane. Może to być na przykład zestaw instrukcji, w których kroki muszą być wykonywane w określonej kolejności.
Zarówno elementy <ol>
, jak i elementy <ul>
mogą zawierać jako bezpośrednie elementy podrzędne tylko elementy <li>
.
Lista opisu (dl)
Lista opisów zawiera terminy (elementy <dt>
) i teksty reklamy (elementy <dd>
). Każdemu terminowi może towarzyszyć więcej niż 1 tekst reklamy. Możliwe zastosowania to np. słowniczek terminów czy menu restauracji. Domyślnie listy opisów nie są wyświetlane z żadnymi znacznikami, ale przeglądarki zazwyczaj wcięcie elementu <dd>
.
W HTML można grupować terminy z ich opisami za pomocą <div>
. Może to być przydatne do stylizacji, jak zobaczysz później.
<!-- 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 jej użycie w bloku tekstu głównego. Często te proste listy nie wymagają skomplikowanego stylizowania, ale możemy w pewnym stopniu dostosować znaczniki uporządkowanej lub nieuporządkowanej listy, np. za pomocą koloru marki lub niestandardowego obrazu w przypadku symboli punktowanych. Za pomocą pseudoelementów list-style
i ::marker
możemy zrobić naprawdę wiele.
::marker
Oprócz podstawowego stylizowania znaczników list możemy też tworzyć kółkowe punkty. Tutaj używamy 3 różnych adresów URL obrazów dla wartości content
pseudoelementu ::marker
, co nadaje przykładowi listy zakupów ręcznie napisany charakter (w przeciwieństwie do użycia jednego obrazu dla wszystkich elementów):
::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 uporządkowanych list możemy chcieć użyć wartości licznika, ale dodać do niej inną wartość. Licznik list-item
może służyć jako wartość właściwości content
znacznika, do której można dołączyć dowolną treść:
::marker {
content: counter(list-item) '🐈 ';
}
Nasze liczniki automatycznie zwiększają się o 1, ale możemy zezwolić na zwiększanie ich o inną wartość, ustawiając w elemencie listy właściwość counter-increment
. Na przykład w tym przypadku liczniki będą zwiększane o 3 za każdym razem:
li {
counter-increment: list-item 3;
}
Liczniki mogą być bardzo przydatne. W artykule Listy, znaczniki i liczniki w CSS znajdziesz więcej informacji o niektórych możliwościach.
Ograniczenia stylizacji ::marker
Czasami może nam zależeć na większej kontroli nad pozycją i stylem znaczników. Nie można ustawić znacznika za pomocą flexboxa ani siatki, co może być czasem niewygodne, jeśli potrzebujesz innego wyrównania. ::marker
udostępnia ograniczoną liczbę właściwości CSS do stylizacji. Jeśli nasz projekt wymaga czegoś innego niż podstawowego stylizowania, lepiej użyć innego pseudoelementu.
nadawanie stylów listom, które nie wyglądają jak listy;
Czasami chcemy nadać listom styl zupełnie inny niż domyślny. Tak jest często w przypadku menu nawigacyjnego, w którym zwykle chcemy usunąć wszystkie znaczniki i wyświetlić listę poziomo za pomocą flexboxa. Zwykle ustawia się właściwość list-style
na none
. Oznacza to, że pseudoelement markera nie będzie już dostępny w DOM.
znaczniki niestandardowe z ::before,
Przed wprowadzeniem elementu ::marker
stylizowanie elementu pseudo-elementu ::before
było powszechnym sposobem tworzenia niestandardowych znaczników listy. Ale nawet teraz może nam ona zapewnić większą elastyczność, gdy zajdzie taka potrzeba, w przypadku stylizacji złożonych wizualnie list.
Podobnie jak w przypadku ::marker
możemy dodawać własne niestandardowe style wypunktowania za pomocą atrybutu content
. W odróżnieniu od ::marker
musimy ręcznie ustawić pozycję, ponieważ nie mamy automatycznych korzyści oferowanych przez list-style-position
. Możemy jednak ustawić go stosunkowo łatwo za pomocą flexboxa, który daje więcej możliwości dopasowania. Możemy na przykład zmieniać pozycję znacznika:
Jeśli stylizujemy uporządkowaną listę za pomocą elementu ::before
, możemy też użyć liczników, aby dodać znaczniki liczbowe.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Użycie ::before
zamiast ::marker
daje nam pełny dostęp do właściwości CSS na potrzeby niestandardowego stylowania, a także umożliwia tworzenie animacji i przejść, których obsługa jest ograniczona w przypadku ::marker
.
Atrybuty listy
Elementy uporządkowanych list akceptują niektóre atrybuty opcjonalne, które mogą być przydatne w różnych przypadkach użycia.
Odwrócone listy
Jeśli mamy listę 10 najpopularniejszych albumów z ubiegłego roku, możemy wyświetlić je w kolejności od 10 do 1. Możemy do tego celu użyć niestandardowych liczników i zwiększać je ujemnie. Możemy też użyć atrybutu reversed
w kodzie HTML. Uważam, że z semantycznego punktu widzenia lepszym rozwiązaniem jest użycie atrybutu reversed
niż zwiększanie licznika w CSS, chyba że liczniki mają charakter czysto wizualny. Jeśli nie udało się załadować pliku CSS, w pliku HTML nadal będziesz widzieć prawidłowo odliczające się liczby. Musimy też wziąć pod uwagę, jak czytnik ekranu zinterpretuje listę.
Oto prezentacja 10 najpopularniejszych albumów z 2021 r. Jeśli liczniki były zwiększane tylko za pomocą CSS, osoba otwierająca stronę za pomocą czytnika ekranu mogłaby uznać, że liczby są liczone w górę, więc liczba 10 jest w rzeczywistości liczbą 1.
W wersji demonstracyjnej widać, że dzięki atrybucie reversed
nasze znaczniki mają już prawidłową wartość bez żadnego dodatkowego wysiłku z naszej strony. Jeśli jednak tworzymy znaczniki list niestandardowych za pomocą pseudoelementu ::before
, musimy dostosować nasze liczniki. Musimy tylko zlecić licznikowi elementów listy, aby zwiększał się w odwrocie:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
W Firefoxie wystarczy to, ale w Chrome i Safari znaczniki będą odliczać od zera do -10. Możemy to naprawić, dodając atrybut start
do listy.
Dzielenie list
Atrybut start
pozwala nam określić wartość liczbową, od której ma się zaczynać lista. Może to być przydatne, gdy chcesz podzielić listę na grupy.
Rozwinijmy przykład 10 najpopularniejszych albumów. Może chcemy wyświetlić 20 najpopularniejszych albumów, ale w grupach po 10? Pomiędzy tymi grupami znajduje się inna zawartość strony.
Musimy utworzyć 2 osobne listy w HTML-u, ale jak możemy mieć pewność, że liczniki będą prawidłowe? W obecnej wersji znacznika obie listy będą się odliczać od 10 do 1, a nie chcemy tego. W kodzie HTML możemy jednak określić wartość atrybutu start
. Jeśli do naszej pierwszej listy dodamy wartość start
20, znaczniki zostaną ponownie zaktualizowane automatycznie.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Układ listy wielokolumnowej
Jak widać w poprzednich prezentacjach, układ wielokolumnowy może być czasem odpowiedni dla naszych list. Ustawienie szerokości kolumny pozwala nam zapewnić, aby lista była automatycznie dostosowywana, wyświetlając się w 2 lub więcej kolumnach tylko wtedy, gdy jest wystarczająco dużo miejsca. Możemy też ustawić odstęp między kolumnami, a na dodatek dodać stylizowaną column-rule (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 czasami spowodować nieestetyczne przerwy w elementach listy, co nie zawsze jest pożądanym efektem.
Możemy zapobiec tym wymuszanym przerwom, używając znaku break-inside: avoid
w elementach listy:
li {
break-inside: avoid;
}
Właściwości niestandardowe
Właściwości niestandardowe w CSS otwierają przed Tobą całą gamę możliwości stylizacji list. Jeśli znamy indeks elementu listy, możemy go użyć do obliczenia wartości właściwości. Obecnie nie ma możliwości określenia indeksu elementu (w przydatny sposób) tylko w CSS. Liczniki umożliwiają nam używanie ich wartości tylko w usłudze content
i nie pozwalają na wykonywanie obliczeń.
Możemy jednak ustawić indeks elementu w atrybucie style
w kodzie HTML, co może ułatwić obliczenia, zwłaszcza jeśli używamy języka szablonów. Ten przykład pokazuje, jak ustawić to za pomocą 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 wyświetlać postępy w przeglądaniu listy na różne sposoby. Jednym z nich jest pasek postępu dla listy kroków. W tym przykładzie użyliśmy pseudoelementu z gradientem liniowym, aby utworzyć pasek dla każdego elementu, który pokazuje, jak daleko na liście jest 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);
}
Możemy też dostosować odcień w miarę wypełniania listy, używając funkcji koloru hsl()
. Wartość hue
możemy obliczyć za pomocą właściwości niestandardowej.
Stylizacja listy opisu
Jak już wspomnieliśmy, aby uzyskać więcej opcji stylizacji, możemy umieścić terminy i ich definicje w elementach div
w elementach dl
. Możemy na przykład chcieć wyświetlić listę jako siatkę. Ustawienie wartości display: grid
na liście bez owijania div
każdej grupy oznaczałoby, że nasze warunki i opisy byłyby umieszczane w różnych komórkach siatki. Czasami jest to przydatne, jak w przypadku poniższego przykładu, w którym wyświetlane jest menu z opisami potraw.
Możemy zdefiniować siatkę na liście i zadbać o to, aby terminy i opisy były zawsze wyrównane w kolumnach, a szerokość kolumny określana przez najdłuższy termin.
Jeśli jednak chcemy wyraźnie pogrupować warunki z ich opisami w formie kart, bardzo przydatna jest klamra <div>
.
Zasoby
- Listy – wprowadzenie do list i znaku ::marker
- Znaczniki niestandardowe za pomocą funkcji ::marker
- Listy usług porównywania cen z licznikami