Listy

Podcast CSS – 030: Listy .

Wyobraź sobie, że masz kilka produktów, które planujesz kupić podczas następnej wizyty w sklepie spożywczym. Jednym z typowych sposobów przedstawienia tych informacji jest lista. Jak jednak dodać styl do listy zakupów?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Tworzenie listy

Poprzednia lista rozpoczynała się od elementu semantycznego lub od elementu <ul>, gdzie elementy listy zakupów (elementy: <li>) były elementami podrzędnymi. Jeśli przyjrzysz się elementom <li>, zobaczysz, że wszystkie zawierają element display: list-item, dlatego przeglądarka domyślnie renderuje tag ::marker.

li {
  display: list-item;
}

Istnieją 2 inne typy list.

Porządkowanie list można tworzyć za pomocą funkcji <ol>. W takim przypadku element listy będzie wyświetlać liczbę jako ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Listy opisów są tworzone za pomocą funkcji <dl>, ale ten typ listy nie zawiera elementu listy <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Style listy

Wiesz już, jak utworzyć listę, możesz więc ustalić jej styl. Pierwsze wykryte właściwości CSS to te, które zostały zastosowane do całej listy.

Aby określić styl przykładu, możesz użyć trzech właściwości stylu listy: list-style-position, list-style-image i list-style-type.

list-style-position

list-style-position umożliwia przeniesienie punktora do zawartości elementu inside lub outside elementu listy. Wartość domyślna outside oznacza, że punktor nie jest uwzględniany w zawartości elementów listy, a inside przenosi pierwszy element wśród zawartości elementu listy.

list-style-image

list-style-image umożliwia zastępowanie punktów na liście obrazami. Umożliwia to ustawienie obrazu, np. url lub none, i ustawianie punktorów jako obrazu, SVG lub GIF-a. Możesz też użyć dowolnego typu nośników, a nawet identyfikatora URI danych.

Przyjrzyjmy się, jak dodać zdjęcie każdego z naszych artykułów spożywczych jako list-style-image:

list-style-type

Ostatnią opcją jest określenie stylu elementu list-style-type – w tym przypadku lista zostanie zmieniona na słowa kluczowe w znanym stylu, ciągi niestandardowe, emotikony i inne elementy. Wszystkie możliwe typy stylów listy znajdziesz tutaj.

list-style skrót

Gdy masz już wszystkie te właściwości, możesz użyć skrótu list-style, aby umieścić wszystkie style list w jednym wierszu:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Funkcja list-style umożliwia zadeklarowanie kombinacji jednej, dwóch lub trzech właściwości list-style w dowolnej kolejności. Jeśli ustawione są zarówno list-style-type, jak i list-style-image, obraz list-style-type jest używany jako obraz zastępczy, gdy obraz jest niedostępny.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Jest to najczęściej używana właściwość stylów list omówionych w tej sekcji. Jedną z popularnych zastosowań jest list-style: none do ukrywania stylów domyślnych. Style domyślne pochodzą z przeglądarki i często można zauważyć, że arkusze stylów są resetowane, usuwając style listy, takie jak dopełnienie i marginesy. Możesz także użyć tego skrótu, aby określić style, np. list-style: square inside;

Do tej pory przykłady koncentrowały się na stylu całej listy i jej elementów, ale co z bardziej szczegółowym podejściem?

::marker pseudoelement

Znacznik list-item to kropka, łącznik lub cyfra rzymska, która ułatwia oznaczenie każdej pozycji na liście.

Jeśli sprawdzisz listę w Narzędziach deweloperskich, zobaczysz element ::marker w przypadku każdego elementu listy, mimo że żaden element nie został zadeklarowany w kodzie HTML. Jeśli przyjrzysz się bliżej tagowi ::marker, zobaczysz domyślny styl przeglądarki.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Przy zadeklarowaniu listy każdy element otrzymuje znacznik, mimo że w kodzie HTML nie ma kropki ani cyfry rzymskiej. Jest to pseudoelement, ponieważ przeglądarka generuje go dla Ciebie i udostępnia interfejs API do określania stylu w ograniczonym zakresie, który umożliwia mu kierowanie. Więcej informacji o budowie listy punktowanej CSS ::marker ma ograniczoną obsługę przeglądarki Safari.

Pudełko z markerem

W modelu układu CSS znaczniki elementów listy są reprezentowane przez pole znacznika powiązanego z każdym elementem listy. Pole znacznika to pojemnik, który zwykle zawiera punktor lub numer.

Aby zmienić styl pola znacznika, możesz użyć selektora ::marker. W ten sposób możesz wybrać tylko znacznik zamiast określania stylu na podstawie całej listy.

Style znaczników

Po wybraniu znacznika przyjrzyjmy się właściwościom stylu dostępnym w tym selektorze. Więcej informacji o niestandardowych punktorach z zastosowaniem CSS ::marker znajdziesz na stronie web.dev.

Jest sporo dozwolonych właściwości CSS ::marker:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Wyświetl typ

Wszystkie właściwości list-style i ::marker określają styl elementów <li>, ponieważ ich domyślna wartość wyświetlania to element list-item. Możesz też tworzyć elementy listy z elementów innych niż <li>.

W tym celu dodaj usługę display: list-item. Zastosowanie display: list-item pozwala na przykład uzyskać w nagłówku wycinek z zawieszeniem, tak aby móc zmienić go na inny element za pomocą polecenia ::marker. Poniższy przykład pokazuje nagłówek, w którym zastosowano display: list-item do określenia stylu, z listą zawierającą prawidłowe znaczniki listy.

Za pomocą funkcji display możesz zamienić dowolny widok listy w widok elementów, ale jeśli stylizowana treść to naprawdę lista, nie należy używać tego zamiast prawidłowych znaczników listy. Zmiana wyglądu elementu na element listy nie zmienia sposobu, w jaki usługi ułatwień dostępu odczytują i rozpoznają ten element. Nie zostanie on więc odczytany jako element listy na czytniki ekranu ani na inne urządzenia. Gdy tylko jest to możliwe, używaj znaczników semantycznych i twórz listy za pomocą atrybutu <li>.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach

Zasoby

• Przewodnik MDN po listach stylów
• Punktory niestandardowe za pomocą CSS ::marker
• Smashing Magazine: listy CSS, markery i liczniki
• MDN z użyciem liczników CSS
• Moduł Listy usług porównywania cen i liczniki – poziom 3
• CSS-Tricks: liczenie za pomocą liczników i siatki CSS