Tot ce trebuie să știți despre decalajul după marcatorul de listă

Citeam „Stilizarea listei creative” pe blogul web.dev al Google și am observat ceva ciudat într-unul dintre exemplele de cod din ::marker secțiunea articolului. Marcatorii de listă încorporați sunt marcatori, numere ordinale și litere. The ::marker pseudo-elementul ne permite să stilăm aceste marcaje sau să le înlocuim cu un caracter personalizat sau o imagine.

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

Exemplul care mi-a atras atenția folosește o pictogramă SVG ca marcator personalizat pentru elementele din listă. Dar există și un singur caracter spațiu (" ") în valoarea CSS de lângă url() funcţie. Scopul acestui spațiu pare să fie acela de a introduce un spațiu după marcatorul personalizat.

Când am văzut acest cod, m-am întrebat imediat dacă există o modalitate mai bună de a crea decalajul. Adăugarea unui spațiu la content pare mai degrabă o soluție de soluție decât soluția optimă. CSS oferă margin și padding și alte modalități standard de a distanța elementele de pe pagină. Niciuna dintre aceste proprietăți nu ar putea fi folosită în această situație?

Mai întâi, am încercat să înlocuiesc caracterul spațiu cu o marjă adecvată:

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

Asta nu a mers. După cum se dovedește, ::marker suportă doar a set mic de proprietăți CSS în principal legate de text. De exemplu, puteți schimba font-size și color a marcatorului și definiți un marcator personalizat prin setare content la un șir sau URL, așa cum se arată mai sus. Cu exceptia margin și padding proprietățile sunt nu sunt acceptate, deci setarea lor nu are niciun efect. Ce dezamagire.

Este posibil ca un caracter de spațiu să fie singura modalitate de a insera un spațiu după un marcator personalizat? Trebuia să aflu. Pe măsură ce am cercetat acest subiect, am făcut câteva descoperiri interesante pe care aș dori să le împărtășesc în acest articol.

Adăugarea de umplutură și margini

Mai întâi, să confirmăm ce margin și padding face pe <ul> și <li> elemente. Am creat o pagină de test în acest scop. Trageți glisoarele relevante și observați efectul asupra spațierii de pe fiecare parte a marcatorului listei. Sfat: Folosiți butonul Reset pentru a reseta toate comenzile la valorile lor inițiale.

Notă: Browserele aplică o valoare implicită padding-inline-left of 40px la <ol> și <ul> elemente. Cel logic padding-inline-left proprietatea este echivalentă cu cea fizică padding-left proprietate în sistemele de scriere cu o direcție inline de la stânga la dreapta. În acest articol, voi folosi proprietățile fizice de dragul simplității.

După cum puteți vedea, padding-left on <li> mărește decalajul după marcatorul de listă. Celelalte trei proprietăți controlează spațierea din stânga marcatorului, cu alte cuvinte, indentarea elementului din listă.

Observați că, chiar și atunci când elementul din listă este padding-left is 0px, există încă un decalaj minim după marcator. Acest decalaj nu poate fi redus cu margin or padding. Lungimea exactă a intervalului minim depinde de browser.

Pentru a rezuma, conținutul elementului din listă este poziționat la o distanță minimă specifică browserului față de marcator, iar acest decalaj poate fi mărit și mai mult prin adăugarea unui padding-left la <li>.

În continuare, să vedem ce se întâmplă când poziționăm markerul în interiorul elementul din listă.

Mutarea marcatorului în interiorul articolului din listă

list-style-position proprietatea acceptă două cuvinte cheie: outside, care este implicit și inside, care mută marcatorul în interiorul articolului din listă. Acesta din urmă este util pentru crearea de modele cu elemente de listă cu lățime completă.

Dacă markerul este acum în interiorul elementul din listă, înseamnă asta? padding-left on <li> nu mai crește decalajul după marker? Să aflăm. Pe pagina mea de testare, pornește list-style-position: inside prin caseta de selectare. Cum sunt cei patru padding și margin proprietăți afectate de această modificare?

După cum puteți vedea, padding-left on <li> acum crește distanța la stânga a markerului. Aceasta înseamnă că ne-am pierdut capacitatea de a mări decalajul după marcator. În această situație, ar fi util să poți adăuga margin-right la ::marker în sine, dar asta nu funcționează, așa cum am stabilit mai sus.

În plus, există o bug în Chromium care determină decalajul după marker să triplu după trecerea la inside poziționare. În mod implicit, lungimea spațiului este de aproximativ o treime din dimensiunea textului. Deci implicit font-size of 16px, decalajul este de aproximativ 5.5px. După trecerea la inside, decalajul crește la maxim 16px în Chrome. Acest bug afectează disc, circle, și square markere, dar nu marcatori de numere ordinale.

Următoarea imagine arată redarea implicită a marcatorilor de listă poziționați în exterior și în interior în trei browsere majore pe macOS. Pentru comoditatea dvs., am aliniat orizontal toate elementele din listă pe marcatoarele lor pentru a facilita compararea diferențelor între dimensiunile golurilor.

Pentru a rezuma, trecerea la list-style-position: inside introduce două probleme. Nu mai putem crește decalajul prin padding-left on <li>, iar dimensiunea decalajului este inconsecventă între browsere.

În cele din urmă, să vedem ce se întâmplă când înlocuim marcatorul implicit de listă cu un marcator personalizat.

Trecerea la un marcator personalizat

Există două moduri de a defini a marker personalizat:

• list-style-type și list-style-image proprietăţi
• content proprietate pe ::marker pseudo-element

content proprietatea este mai puternică. De exemplu, ne permite să folosim counter() funcția de accesare a numărului ordinal al elementului din listă (the implicit list-item contracara) și decorați-l cu șiruri personalizate.

Din păcate, Safari nu acceptă content proprietate pe ::marker inca (Bug WebKit). Din acest motiv, voi folosi list-style-type proprietate pentru a defini marcatorul personalizat. Puteți folosi în continuare ::marker selector pentru a stila marcatorul personalizat declarat prin list-style-type. Acel aspect al ::marker este acceptat în Safari.

Orice caracter Unicode poate servi ca marcator de listă personalizat, dar numai un set mic de caractere au de fapt „Bullet” în numele lor oficial, așa că m-am gândit să le compilam aici pentru referință.

Caracter	Nume si Prenume	Punct de cod	cuvânt cheie CSS
•	Glonţ	U+2022	disc
‣	Glonț triunghiular	U+2023
⁃	Cratima Glonț	U+2043
⁌	Black Leftward Bullet	U+204C
⁍	Glonț negru spre dreapta	U+204D
◘	Glonț invers	U+25D8
◦	Glonț alb	U+25E6	circle
☙	Glonț cu inimă florală inversată	U+2619
❥	Glonț inimă neagră și grea rotită	U+2765
❧	Glonțul inimii florale rotite	U+2767
⦾	Glonț alb încercuit	U+29BE
⦿	Glonț înconjurat	U+29BF

Notă: CSS-ul square cuvântul cheie nu are un caracter „Bullet” corespunzător în Unicode. Personajul care se apropie cel mai mult este emoji-ul Black Small Square (▪️) (U+25AA).

Acum să vedem ce se întâmplă când înlocuim marcatorul implicit de listă cu list-style-type: "•" (U+2022 Glonţ). Acesta este același caracter ca marcatorul implicit, deci nu ar trebui să existe diferențe majore de randare. Pe pagina mea de testare, porniți list-style-type opțiunea și observați orice modificări aduse marcatorului.

După cum puteți vedea, există două schimbări semnificative:

1. Nu mai există un spațiu minim după marcator.
2. Glonțul a devenit mai mic, ca și cum ar fi fost redat la un mic font-size.

În conformitate cu Stiluri de contor CSS Nivelul 3, marcatorul implicit al listei (disc) ar trebui să fie „asemănător cu • U+2022 GLONŢ". Se pare că browserele măresc dimensiunea marcatorului implicit pentru a-l face mai lizibil. Firefox folosește chiar și un font special, -moz-bullet-font, pentru marker.

Problema dimensiunilor mici poate fi rezolvată cu CSS? Pe pagina mea de testare, activați stilul markerului și observați ce se întâmplă când schimbați font-size, line-height, și font-family a markerului.

După cum puteți vedea, creșterea font-size face ca marcatorul personalizat să devină nealiniat vertical, iar acest lucru nu poate fi corectat prin scăderea valorii line-height. vertical-align proprietatea, care ar putea rezolva cu ușurință această problemă, nu este acceptată ::marker.

Dar ai observat că schimbarea font-family poate face ca markerul să devină mai mare? Încercați să o setați la Tahoma. Aceasta ar putea fi o soluție suficient de bună pentru problema de dimensiuni mici, deși nu am testat care font funcționează cel mai bine în browserele și sistemele de operare majore.

Este posibil să fi observat, de asemenea, că eroarea Chromium nu mai apare atunci când poziționați marcatorul în interiorul elementului din listă. Aceasta înseamnă că un marcator personalizat poate servi ca o soluție pentru această eroare. Și asta mă duce la problema principală și la motivul pentru care am început să cercetez acest subiect. Dacă definiți un marcator personalizat și îl poziționați în interiorul articolului din listă, nu există niciun spațiu după marcator și nicio modalitate de a insera un spațiu prin mijloace standard.

1. Nu există un spațiu minim după marcatoarele personalizate.
2. ::marker nu suportă padding or margin.
3. padding-left on <li> nu mărește decalajul, deoarece markerul este poziționat inside.

Rezumat

Iată un rezumat al tuturor faptelor cheie pe care le-am menționat în articol:

1. Browserele aplică o valoare implicită padding-inline-start of 40px la <ul> și <ol> elemente.
2. Există un spațiu minim după marcatorii de listă încorporați (disc, decimal, etc.). Nu există un interval minim după marcatorii personalizați (șir sau URL).
3. Lungimea golului poate fi mărită prin adăugarea a padding-left la <ul>, dar numai dacă markerul este poziționat în afara articolului din listă (modul implicit).
4. Marcatoarele de șir personalizate au o dimensiune implicită mai mică decât marcatoarele încorporate. Schimbarea font-family on ::marker le pot crește dimensiunea.

Concluzie

Privind înapoi la exemplul de cod de la începutul articolului, cred că înțeleg acum de ce există un caracter spațiu în content valoare. Nu există o modalitate mai bună de a insera un spațiu după marcatorul SVG. Este o soluție care este necesară deoarece nu există o cantitate de margin și padding poate crea un gol după un marcator personalizat care este poziționat în interiorul articolului din listă. A margin-right on ::marker ar putea face asta cu ușurință, dar acest lucru nu este acceptat.

Până la ::marker adaugă suport pentru mai multe proprietăți, dezvoltatorii web nu vor avea deseori de ales decât să ascundă markerul și să-l emuleze cu un ::before pseudo-element. A trebuit să fac asta recent pentru că nu am putut schimba marcatorul background-color. Să sperăm că nu va trebui să așteptăm prea mult pentru un mai puternic ::marker pseudo-element.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/