Styl listy kreacji

Poznaj przydatne i kreatywne sposoby stylizowania listy.

Michelle Barker
Michelle Barker
X Strona główna

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 sposobów. kolekcja nadchodzących koncertów w danym miejscu? Prawdopodobnie jest to 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ępne 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 dobrym rozwiązaniem może być użycie elementu listy.

Wyświetlenie listy typów

Jeśli chodzi o znaczniki, mamy do wyboru 3 różne elementy listy:

  • Lista nieuporządkowana
  • Lista uporządkowana
  • Lista opisów

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 może być 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 o strukturze menu znajdziesz kilka zaleceń, które pomogą zapewnić wszystkim dostęp do menu nawigacyjnego.

Lista uporządkowana (ol)

Element uporządkowanej listy (<ol>) jest najlepszym wyborem, gdy kolejność elementów ma znaczenie, np. w przypadku wieloetapowego procesu. Domyślnie elementy listy są numerowane. Przykładem może być zestaw instrukcji, w których poszczególne kroki należy wykonać po kolei.

Lista szczegółowych instrukcji parzenia herbaty z mlekem.

Elementy <ol> i <ul> mogą zawierać tylko elementy <li> jako bezpośrednie elementy podrzędne.

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 opis. Możliwe zastosowania to np. słowniczek terminów czy menu restauracji. Domyślnie listy opisów nie są wyświetlane ze znacznikami, chociaż przeglądarki zazwyczaj tworzą wcięcie w elemencie <dd>.

W kodzie HTML można grupować terminy z towarzyszącymi im opisami za pomocą elementu <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>

Proste określanie stylu 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. Dzięki list-style i pseudoelementowi ::marker możemy zrobić naprawdę wiele.

::marker

Oprócz podstawowego stylizowania znaczników list możemy też tworzyć kółkowe punkty. W tym przykładzie używamy 3 różnych adresów URL obrazów dla wartości content pseudoelementu ::marker, co zwiększa wygląd przykładowej listy zakupów (a nie tylko jednego obrazu dla wszystkich):

::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 pozwolić im zwiększać się 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 mają wiele innych zastosowań. W artykule Listy, znaczniki i liczniki w CSS znajdziesz więcej informacji o niektórych możliwościach.

Ograniczenia stylizacji ::marker

Czasami możemy potrzebować większej kontroli nad położeniem i stylem naszych znaczników. Nie można ustawić pozycji 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 możemy chcieć zmienić styl list w zupełnie inny niż domyślny styl. 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,

Określanie stylu pseudoelementu ::before było popularnym sposobem tworzenia niestandardowych znaczników list przed pojawieniem się ::marker. 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 przeciwieństwie do ::marker musimy przeprowadzić pewne ręczne pozycjonowanie, ponieważ nie uzyskujemy 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 określamy styl listy uporządkowanej 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 atrybutu ::before zamiast ::marker daje nam pełny dostęp do właściwości CSS na potrzeby niestandardowych stylów oraz pozwala na używanie animacji i przejść – w przypadku których reguła ::marker jest obsługiwana w ograniczonym zakresie.

Atrybuty listy

Elementy list uporządkowanych mogą akceptować pewne atrybuty opcjonalne, które mogą być przydatne w różnych przypadkach.

Odwrócone listy

Jeśli mamy listę 10 najlepszych albumów z zeszłego roku, możemy odliczać od 10 do 1. Możemy użyć do tego niestandardowych liczników i zwiększać je ujemnie. Możesz też użyć atrybutu reversed w kodzie HTML. Użycie atrybutu reversed zamiast zwiększania wartości licznika w CSS jest zwykle sensowne, chyba że liczniki te służą tylko do prezentacji. Jeśli nie udało się załadować pliku CSS, w kodzie HTML nadal będziesz widzieć prawidłowo odliczające się liczby. Musimy też wziąć pod uwagę, jak czytnik ekranu zinterpretuje listę.

Oto demo z 10 najpopularniejszymi albumami 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 atrybutowi reversed nasze znaczniki mają już prawidłową wartość. Nie wymaga to dodatkowego nakładu pracy 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.

Popatrzmy na przykład z 10 najpopularniejszymi albumami. 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. Jednak w kodzie HTML możemy 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. Jeśli ustawisz szerokość kolumny, lista będzie automatycznie reagowana na tekst, który będzie znajdował się na dwóch lub większej liczbie kolumn tylko wtedy, gdy będzie wystarczająca ilość miejsca. Możemy też ustawić przerwę między kolumnami i dodatkowo wzbogacić ich wygląd o regułę kolumny z odpowiednim stylem (w postaci skrótu podobnego do właściwości border):

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}

Korzystanie z kolumn może sprawić, że elementy listy będą się czasami wyświetlać brzydko, ale nie zawsze będzie to dokładnie tak, jakbyśmy chcieli.

Demonstracja pokazująca, jak treści są dzielone między 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

Niestandardowe właściwości CSS otwierają szerokie możliwości w zakresie list stylów. 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 pozwalają nam używać ich wartości wyłącznie we właściwości content. Nie są dozwolone obliczenia.

Możemy jednak ustawić indeks elementu w atrybucie style w kodzie HTML, co może uprościć obliczenia, zwłaszcza w przypadku korzystania z 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żywamy pseudoelementu z gradientem liniowym, aby utworzyć pasek dla każdego elementu, który pokazuje, jak daleko użytkownik jest na liście.

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 wokół 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.

Z drugiej strony, jeśli chcesz wyraźnie pogrupować hasła za pomocą ich stylu karty z opisem, bardzo przydatny będzie kod <div>.

Zasoby