Styl listy kreacji

Poznaj przydatne i kreatywne sposoby stylizowania listy.

Michelle Barker
Michelle Barker

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.

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.

Lista zakupów z produktami takimi jak chleb, mleko czy jabłka.

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.

Lista szczegółowych instrukcji parzenia herbaty z mlekem.

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::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.

Szkic listy w kolumnach z elementem rozciągającym się na połowę kolumn.

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.

Demonstracja sposobu dzielenia treści na 2 kolumny

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