The CSS Podcast - 030: Lists
Wyobraź sobie, że masz wiele produktów, które planujesz kupić podczas następnego zakupów. Jednym z najczęściej stosowanych sposobów wizualnego przedstawienia tego jest lista, ale jak 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 zaczynała się elementem semantycznym <ul>
, a jej elementami podrzędnymi były elementy listy zakupów (elementy <li>
). Jeśli przyjrzysz się każdemu elementowi <li>
, zauważysz, że wszystkie mają wartość display: list-item
, dlatego przeglądarka domyślnie renderuje element ::marker
.
li {
display: list-item;
}
Istnieją 2 inne typy list.
Uporządkowane listy można tworzyć za pomocą elementu <ol>
. W takim przypadku element listy będzie wyświetlać liczbę jako element ::marker
.
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
Listy opisów są tworzone za pomocą elementu <dl>
, ale ten typ listy nie używa elementu listy <li>
.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
Style list
Teraz, gdy już wiesz, jak utworzyć listę, możesz nadać jej styl. Najpierw wykrywane są właściwości usług porównywania cen, które są stosowane do całej listy.
Do nadawania stylów przykładom możesz użyć 3 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 punktuor do pozycji inside
lub outside
na liście. Domyślna wartość outside
oznacza, że punkt nie jest uwzględniany w zawartości elementu listy, natomiast wartość inside
przenosi pierwszy element w zawartości elementu listy.
list-style-image
list-style-image
pozwala zastąpić punktory listy obrazami. Dzięki temu możesz ustawić obraz, np. url
lub none
, aby punkty były obrazem, plikiem SVG lub GIF. Możesz też użyć dowolnego typu multimediów lub nawet identyfikatora URI danych.
Zobaczmy, jak dodać obraz każdego produktu spożywczego jako list-style-image
:
list-style-type
Ostatnią opcją jest nadanie stylów za pomocą list-style-type
, co zmienia punkty na znane słowa kluczowe, niestandardowe ciągi znaków, emotikony itp. Wszystkie możliwe typy stylów list znajdziesz tutaj.
list-style
skrót
Teraz, gdy masz już wszystkie te właściwości, możesz użyć skrótu list-style
, aby ustawić wszystkie style listy w jednym wierszu:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
umożliwia deklarowanie kombinacji 1, 2 lub 3 właściwości list-style
w dowolnej kolejności. Jeśli zarówno list-style-type
, jak i list-style-image
są ustawione, w przypadku niedostępności obrazu używany jest obrazlist-style-type
.
/* 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 omawianych w tej sekcji. Jedną z częstych zastosowań jest użycie list-style: none
do ukrycia domyślnych stylów. Style domyślne pochodzą z przeglądarki i często widzisz zresetowane arkuszy stylów, które usuwają style list, takie jak odstępy i marginesy. Możesz też użyć tej skrótu do ustawiania stylów, np. list-style: square inside;
Do tej pory przykłady koncentrowały się na nadawaniu stylu całej liście i jej elementom, ale co z dokładniejszym podejściem?
Element pseudo ::marker
Element znacznika list-item
to znak odstępu, łącznik lub cyfra rzymska, który pomaga wskazać poszczególne elementy na liście.
Jeśli zbadasz listę w narzędziach dla deweloperów, zobaczysz element ::marker
dla każdego elementu listy, mimo że nie zadeklarowano żadnego w HTML. Jeśli przyjrzysz się ::marker
, zobaczysz styl domyślny 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;
}
Gdy zadeklarujesz listę, każdy element zostanie oznaczony, mimo że w kodzie HTML nie ma znaku na strzałkę ani cyfry rzymskiej. Jest to pseudoelement, ponieważ przeglądarka generuje go za Ciebie i zapewnia ograniczony interfejs API do stylizacji. Więcej informacji o cechach produktu w usługach porównywania cen ::marker
ma ograniczoną obsługę w Safari.
Pole znacznika
W modelu układu CSS znaczniki elementów listy są reprezentowane przez pole znacznika powiązane z każdym elementem listy. Pole znacznika to kontener, który zwykle zawiera punktor lub numer.
Aby zmienić styl pola znacznika, możesz użyć selektora ::marker
. Dzięki temu możesz wybrać tylko znacznik zamiast stylizacji na podstawie całej listy.
Style znaczników
Po wybraniu znacznika przyjrzyjmy się właściwościom stylizacji dostępnym dla tego selektora. Więcej informacji o niestandardowych punktach z użyciem atrybutu CSS ::marker znajdziesz na stronie web.dev.
Dozwolonych właściwości CSS ::marker
jest sporo:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Wyświetl typ
Wszystkie nasze właściwości list-style
i ::marker
wiedzą, jak stylizować elementy <li>
, ponieważ mają domyślną wartość wyświetlania list-item. Możesz też tworzyć elementy listy, które nie są elementami <li>
.
Aby to zrobić, dodaj właściwość display: list-item
. Przykładem użycia display: list-item
jest sytuacja, gdy chcesz umieścić w nagłówku odsyłacz, który można zmienić na coś innego za pomocą ::marker
. Ten przykład pokazuje nagłówek, który używa elementu display: list-item
do stylizacji, oraz listę z prawidłowym znacznikiem listy.
Chociaż za pomocą atrybutu display
możesz przekształcić dowolny element w widok elementu listy, nie powinieneś używać go zamiast prawidłowego znacznika listy, jeśli stylizowana treść jest rzeczywiście listą. Zmiana wizualnego wyglądu elementu na element listy nie zmienia sposobu odczytu i rozpoznawania elementu przez usługi ułatwień dostępu, więc nie będzie on odczytywany jako element listy przez czytniki ekranu ani urządzenia z przełącznikami. W miarę możliwości zawsze używaj znaczników semantycznych i twórz listy za pomocą <li>
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o listach
Element poprzedzający element listy nazywa się
::counter
::pencil
::marker
::bullet
Występują 3 typy list HTML:
<lo>
<ul>
<ol>
<li>
<list>
<dl>
Które 2 style z tej listy zostaną zastosowane do ::marker
?
color
transition
display
background-color