Wszystko, co musisz wiedzieć o luce po znaczniku listy

czytałem „Stylizacja listy kreatywnej” na blogu Google web.dev i zauważyłem coś dziwnego w jednym z przykładów kodu w pliku ::marker część artykułu. Wbudowane znaczniki listy to wypunktowania, liczby porządkowe i litery. The ::marker pseudoelement pozwala nam stylizować te znaczniki lub zastępować je niestandardowym znakiem lub obrazem.

::marker { content: url('/marker.svg') ' ';
}

Przykład, który zwrócił moją uwagę, wykorzystuje ikonę SVG jako niestandardowy znacznik elementów listy. Ale jest też pojedynczy znak spacji (" ") w wartości CSS obok url() funkcjonować. Wydaje się, że celem tej przestrzeni jest wstawienie przerwy po niestandardowym znaczniku.

Kiedy zobaczyłem ten kod, od razu zacząłem się zastanawiać, czy istnieje lepszy sposób na utworzenie luki. Dołączanie spacji do content wydaje się bardziej obejściem niż optymalnym rozwiązaniem. CSS zapewnia margin i padding oraz inne standardowe sposoby rozmieszczania elementów na stronie. Czy w tej sytuacji nie można użyć żadnej z tych właściwości?

Najpierw próbowałem zastąpić znak spacji odpowiednim marginesem:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

To nie zadziałało. Jak się okazuje, ::marker obsługuje tylko A mały zestaw właściwości CSS związanych głównie z tekstem. Możesz zmienić np font-size i color znacznika i zdefiniuj znacznik niestandardowy przez ustawienie content do ciągu lub adresu URL, jak pokazano powyżej. Ale margin i padding właściwości są nie jest obsługiwany, więc ustawienie ich nie ma żadnego efektu. Co za rozczarowanie.

Czy to naprawdę możliwe, że znak spacji jest jedynym sposobem na wstawienie przerwy po niestandardowym znaczniku? Musiałem się dowiedzieć. Badając ten temat, dokonałem kilku interesujących odkryć, którymi chciałbym się podzielić w tym artykule.

Dodanie wypełnienia i marginesów

Najpierw potwierdźmy co margin i padding zrobić na <ul> i <li> elementy. Stworzyłem w tym celu stronę testową. Przeciągnij odpowiednie suwaki i obserwuj wpływ na odstępy po obu stronach znacznika listy. Porada: Obficie używaj przycisku Resetuj, aby zresetować wszystkie elementy sterujące do ich wartości początkowych.

Uwaga: Przeglądarki stosują wartość domyślną padding-inline-left of 40px do <ol> i <ul> elementy. logiczne padding-inline-left właściwość jest równoważna z fizyczną padding-left właściwość w systemach pisma z kierunkiem w linii od lewej do prawej. W tym artykule dla uproszczenia użyję właściwości fizycznych.

Jak widać, padding-left on <li> zwiększa odstęp za znacznikiem listy. Pozostałe trzy właściwości sterują odstępami po lewej stronie znacznika, innymi słowy wcięciem elementu listy.

Zauważ, że nawet jeśli element listy jest padding-left is 0px, za znacznikiem nadal pozostaje minimalna przerwa. Tej luki nie można zmniejszyć za pomocą margin or padding. Dokładna długość minimalnej przerwy zależy od przeglądarki.

Podsumowując, zawartość elementu listy jest umieszczona w określonej dla przeglądarki minimalnej odległości od znacznika, a odstęp ten można dodatkowo zwiększyć, dodając padding-left do <li>.

Następnie zobaczmy, co się stanie, gdy ustawimy znacznik wewnątrz element listy.

Przesuwanie znacznika wewnątrz elementu listy

Połączenia list-style-position właściwość akceptuje dwa słowa kluczowe: outside, która jest wartością domyślną, oraz inside, który przesuwa znacznik wewnątrz elementu listy. Ten ostatni jest przydatny do tworzenia projektów z elementami listy o pełnej szerokości.

Jeśli znacznik jest teraz wewnątrz element listy, czy to oznacza, że padding-left on <li> nie zwiększa już odstępu po znaczniku? Dowiedzmy Się. Na mojej stronie testowej włącz list-style-position: inside za pomocą pola wyboru. Jak czwórka padding i margin właściwości, których dotyczy ta zmiana?

Jak widać, padding-left on <li> teraz zwiększa odstępy do lewo znacznika. Oznacza to, że straciliśmy możliwość zwiększania odstępu po znaczniku. W tej sytuacji przydałaby się możliwość dodania margin-right do ::marker sam w sobie, ale to nie działa, jak ustaliliśmy powyżej.

Dodatkowo jest a błąd w Chromium co powoduje przerwę po znaczniku potrójny po przełączeniu na inside pozycjonowanie. Domyślnie długość przerwy wynosi około jednej trzeciej rozmiaru tekstu. Więc domyślnie font-size of 16px, różnica wynosi ok 5.5px. Po przejściu na inside, różnica rośnie do końca 16px w Chrome. Ten błąd wpływa na disc, circle, square znaczniki, ale nie porządkowe znaczniki liczb.

Poniższy obraz przedstawia domyślne renderowanie zewnętrznych i wewnętrznych znaczników listy w trzech głównych przeglądarkach w systemie macOS. Dla Twojej wygody wyrównałem poziomo wszystkie elementy listy na ich znacznikach, aby ułatwić porównywanie różnic w rozmiarach odstępów.

Podsumowując, przejście na list-style-position: inside wprowadza dwa problemy. Nie możemy już zwiększyć luki przez padding-left on <li>, a rozmiar przerwy jest niespójny w różnych przeglądarkach.

Na koniec zobaczmy, co się stanie, gdy zastąpimy domyślny znacznik listy znacznikiem niestandardowym.

Przełączanie na znacznik niestandardowy

Istnieją dwa sposoby definiowania a niestandardowy znacznik:

• list-style-type i list-style-image niska zabudowa
• content nieruchomość na ::marker pseudoelement

Połączenia content właściwość jest potężniejsza. Na przykład pozwala nam używać counter() aby uzyskać dostęp do numeru porządkowego elementu listy (tzw domniemany list-item licznik) i udekoruj go niestandardowymi sznureczkami.

Niestety Safari nie obsługuje content nieruchomość włączona ::marker już (Błąd WebKit). W tym celu skorzystam z tzw list-style-type właściwość, aby zdefiniować znacznik niestandardowy. Nadal możesz korzystać z ::marker selektor, aby nadać styl niestandardowemu znacznikowi zadeklarowanemu przez list-style-type. Ten aspekt ::marker jest obsługiwany w przeglądarce Safari.

Dowolny znak Unicode może potencjalnie służyć jako niestandardowy znacznik listy, ale tylko niewielki zestaw znaków ma w swojej oficjalnej nazwie słowo „Bullet”, więc pomyślałem, że skompiluję je tutaj w celach informacyjnych.

Postać	Imię	Punkt kodu	Słowo kluczowe CSS
•	Kula	U+2022	disc
‣	Trójkątny pocisk	U+2023
⁃	Kula myślnika	U+2043
⁌	Czarny lewicowy pocisk	U+204C
⁍	Czarna kula w prawo	U+204D
◘	Odwrócony pocisk	U+25D8
◦	Biała Kula	U+25E6	circle
☙	Odwrócony obrócony kwiecisty pocisk w kształcie serca	U+2619
❥	Obrócony Ciężki Czarny Kula Serca	U+2765
❧	Obracany kwiecisty punktor serca	U+2767
⦾	Krążąca Biała Kula	U+29BE
⦿	Kula w kółku	U+29BF

Uwaga: CSS square słowo kluczowe nie ma odpowiedniego znaku „punktora” w Unicode. Postać, która jest najbliższa, to emoji Czarny mały kwadrat (▪️) (U+25AA).

Zobaczmy teraz, co się stanie, gdy zastąpimy domyślny znacznik listy przez list-style-type: "•" (U+2022 Pocisk). Jest to ten sam znak, co punktor domyślny, więc nie powinno być żadnych większych różnic w renderowaniu. Na mojej stronie testowej włącz list-style-type opcję i obserwuj wszelkie zmiany w znaczniku.

Jak widać, są dwie istotne zmiany:

1. Nie ma już odstępu minimalnego za znacznikiem.
2. Pocisk stał się mniejszy, jakby był renderowany w mniejszym stopniu font-size.

Zgodnie z Style liczników CSS poziom 3, domyślny znacznik listy (disc) powinno być „podobne do • U+2022 POCISK". Wygląda na to, że przeglądarki zwiększają rozmiar domyślnego punktora, aby był bardziej czytelny. Firefox używa nawet specjalnej czcionki, -moz-bullet-font, dla znacznika.

Czy problem z małym rozmiarem można rozwiązać za pomocą CSS? Na mojej stronie testowej włącz stylizację znaczników i obserwuj, co się stanie, gdy zmienisz font-size, line-height, font-family znacznika.

Jak widać, zwiększenie font-size powoduje, że znacznik niestandardowy jest przesunięty w pionie i nie można tego poprawić zmniejszając line-height, vertical-align właściwość, która mogłaby łatwo rozwiązać ten problem, nie jest obsługiwana ::marker.

Ale czy zauważyłeś, że zmiana font-family może spowodować, że znacznik stanie się większy? Spróbuj ustawić na Tahoma. Może to być potencjalnie wystarczająco dobre obejście problemu małych rozmiarów, chociaż nie testowałem, która czcionka działa najlepiej w głównych przeglądarkach i systemach operacyjnych.

Być może zauważyłeś również, że błąd Chromium nie występuje już po umieszczeniu znacznika wewnątrz elementu listy. Oznacza to, że niestandardowy znacznik może służyć jako obejście tego błędu. I to prowadzi mnie do głównego problemu i powodu, dla którego zacząłem badać ten temat. Jeśli zdefiniujesz znacznik niestandardowy i umieścisz go wewnątrz elementu listy, po znaczniku nie będzie odstępu ani możliwości wstawienia odstępu w standardowy sposób.

1. Nie ma minimalnej przerwy po niestandardowych znacznikach.
2. ::marker nie obsługuje padding or margin.
3. padding-left on <li> nie zwiększa odstępu, ponieważ znacznik jest ustawiony inside.

Podsumowanie

Oto podsumowanie wszystkich kluczowych faktów, o których wspomniałem w artykule:

1. Przeglądarki stosują wartość domyślną padding-inline-start of 40px do <ul> i <ol> elementy.
2. Istnieje minimalna przerwa po wbudowanych znacznikach listy (disc, decimalitp.). Nie ma minimalnej przerwy po znacznikach niestandardowych (ciąg znaków lub adres URL).
3. Długość przerwy można zwiększyć, dodając a padding-left do <ul>, ale tylko wtedy, gdy znacznik znajduje się poza elementem listy (tryb domyślny).
4. Niestandardowe znaczniki ciągów znaków mają mniejszy domyślny rozmiar niż znaczniki wbudowane. Zmienianie font-family on ::marker może zwiększyć ich rozmiar.

Wnioski

Patrząc wstecz na przykład kodu z początku artykułu, myślę, że teraz rozumiem, dlaczego w pliku content wartość. Po prostu nie ma lepszego sposobu na wstawienie przerwy po znaczniku SVG. Jest to obejście, które jest potrzebne, ponieważ żadna ilość margin i padding może utworzyć przerwę po niestandardowym znaczniku umieszczonym wewnątrz elementu listy. A margin-right on ::marker mógłby to łatwo zrobić, ale to nie jest obsługiwane.

Aż do ::marker dodaje obsługę większej liczby właściwości, twórcy stron internetowych często nie mają innego wyjścia, jak tylko ukryć znacznik i emulować go za pomocą a ::before pseudoelement. Sam ostatnio musiałem to zrobić, bo nie mogłem zmienić markera background-color. Miejmy nadzieję, że na potężniejszego nie będziemy musieli czekać zbyt długo ::marker pseudoelement.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/