Alt du trenger å vite om gapet etter listemarkøren

jeg leste "Kreativ listestyling" på Googles web.dev-blogg og la merke til noe rart i et av kodeeksemplene i ::marker delen av artikkelen. De innebygde listemarkørene er kuler, ordenstall og bokstaver. De ::marker Pseudo-element lar oss style disse markørene eller erstatte dem med et egendefinert tegn eller bilde.

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

Eksemplet som fanget min oppmerksomhet bruker et SVG-ikon som en egendefinert markør for listeelementene. Men det er også et enkelt mellomromstegn (" ") i CSS-verdien ved siden av url() funksjon. Hensikten med denne plassen ser ut til å være å sette inn et gap etter den tilpassede markøren.

Da jeg så denne koden, lurte jeg umiddelbart på om det var en bedre måte å skape gapet på. Legger til et mellomrom til content føles mer som en løsning enn den optimale løsningen. CSS gir margin og padding og andre standardmåter for å skille mellom elementer på siden. Kunne ingen av disse egenskapene brukes i denne situasjonen?

Først prøvde jeg å erstatte mellomromstegnet med en passende marg:

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

Dette fungerte ikke. Som det viser seg, ::marker støtter kun a lite sett med hovedsakelig tekstrelaterte CSS-egenskaper. For eksempel kan du endre font-size og color av markøren, og definer en egendefinert markør etter innstilling content til en streng eller URL, som vist ovenfor. Men margin og padding eiendommer er ikke støttet, så å sette dem har ingen effekt. For en skuffelse.

Kan det virkelig være at et mellomromstegn er den eneste måten å sette inn et mellomrom etter en egendefinert markør? Jeg trengte å finne ut av det. Mens jeg undersøkte dette emnet, gjorde jeg noen interessante funn som jeg vil dele i denne artikkelen.

Legger til polstring og marger

Først, la oss bekrefte hva margin og padding gjøre på <ul> og <li> elementer. Jeg har laget en testside for dette formålet. Dra de relevante glidebryterne og observer effekten på avstanden på hver side av listemarkøren. Tips: Bruk nullstill-knappen rikelig for å tilbakestille alle kontroller til de opprinnelige verdiene.

OBS: Nettlesere bruker en standard padding-inline-left of 40px til <ol> og <ul> elementer. Det logiske padding-inline-left egenskap er ekvivalent med den fysiske padding-left eiendom i skrivesystemer med venstre-til-høyre inline retning. I denne artikkelen skal jeg bruke fysiske egenskaper for enkelhets skyld.

Som du kan se, padding-left on <li> øker gapet etter listemarkøren. De tre andre egenskapene kontrollerer avstanden til venstre for markøren, med andre ord, innrykk av listeelementet.

Legg merke til at selv når listeelementet er padding-left is 0px, er det fortsatt et minimumsavstand etter markøren. Dette gapet kan ikke reduseres med margin or padding. Den nøyaktige lengden på minimumsgapet avhenger av nettleseren.

For å oppsummere, er listeelementets innhold plassert i en nettleserspesifikk minimumsavstand fra markøren, og dette gapet kan økes ytterligere ved å legge til en padding-left til <li>.

Deretter, la oss se hva som skjer når vi plasserer markøren innsiden listeelementet.

Flytte markøren inne i listeelementet

De list-style-position eiendom godtar to søkeord: outside, som er standard, og inside, som flytter markøren inne i listeelementet. Sistnevnte er nyttig for å lage design med listeelementer i full bredde.

Hvis markøren er nå innsiden listeelementet, betyr dette det padding-left on <li> øker ikke lenger gapet etter markøren? La oss finne det ut. Slå på på testsiden min list-style-position: inside via avmerkingsboksen. Hvordan går det med de fire padding og margin eiendommer berørt av denne endringen?

Som du kan se, padding-left on <li> øker nå avstanden til venstre av markøren. Dette betyr at vi har mistet muligheten til å øke gapet etter markøren. I denne situasjonen vil det være nyttig å kunne legge til margin-right til ::marker seg selv, men det fungerer ikke, som vi har slått fast ovenfor.

I tillegg er det en feil i Chromium som får gapet etter markøren til trippel etter å ha byttet til inside posisjonering. Som standard er lengden på gapet omtrent en tredjedel av tekststørrelsen. Så som standard font-size of 16px, gapet er ca 5.5px. Etter å ha byttet til inside, vokser gapet til det fulle 16px i Chrome. Denne feilen påvirker disc, circleog square markører, men ikke ordinære tallmarkører.

Følgende bilde viser standardgjengivelsen av utvendige og innvendige listemarkører på tvers av tre store nettlesere på macOS. For enkelhets skyld har jeg justert alle listeelementene horisontalt på markørene deres for å gjøre det enklere å sammenligne forskjellene i gapstørrelser.

For å oppsummere, bytte til list-style-position: inside introduserer to problemer. Vi kan ikke lenger øke gapet via padding-left on <li>, og gapstørrelsen er inkonsekvent mellom nettlesere.

Til slutt, la oss se hva som skjer når vi erstatter standard listemarkør med en egendefinert markør.

Bytter til en egendefinert markør

Det er to måter å definere a egendefinert markør:

• list-style-type og list-style-image egenskaper
• content eiendom på ::marker pseudo-element

De content eiendom er kraftigere. For eksempel lar det oss bruke counter() funksjon for å få tilgang til listeelementets ordinære nummer (den implisitt list-item disk) og dekorer den med tilpassede strenger.

Dessverre støtter ikke Safari content eiendom på ::marker ennå (WebKit-feil). Av denne grunn kommer jeg til å bruke list-style-type egenskap for å definere den egendefinerte markøren. Du kan fortsatt bruke ::marker velger for å style den egendefinerte markøren deklarert via list-style-type. Det aspektet av ::marker støttes i Safari.

Ethvert Unicode-tegn kan potensielt tjene som en egendefinert listemarkør, men bare et lite sett med tegn har faktisk "Bullet" i sitt offisielle navn, så jeg tenkte jeg skulle kompilere dem her for referanse.

Character	Navn	Kodepunkt	CSS nøkkelord
•	Bullet	U+2022	disc
‣	Trekantet kule	U+2023
⁃	Bindestrek Bullet	U+2043
⁌	Svart venstre kule	U+204C
⁍	Black Rightwards Bullet	U+204D
◘	Omvendt kule	U+25D8
◦	Hvit kule	U+25E6	circle
☙	Omvendt rotert blomsterhjertekule	U+2619
❥	Rotert Heavy Black Heart Bullet	U+2765
❧	Rotert blomsterhjertekule	U+2767
⦾	Sirklet hvit kule	U+29BE
⦿	Sirklet kule	U+29BF

OBS: CSS square nøkkelordet har ikke et tilsvarende "Bullet"-tegn i Unicode. Karakteren som kommer nærmest er den svarte lille firkanten (▪️) emoji (U+25AA).

La oss nå se hva som skjer når vi erstatter standard listemarkør med list-style-type: "•" (U+2022 Kule). Dette er det samme tegnet som standardkulen, så det bør ikke være noen store gjengivelsesforskjeller. På testsiden min slår du på list-style-type og observer eventuelle endringer på markøren.

Som du kan se, er det to vesentlige endringer:

1. Det er ikke lenger et minimumsavstand etter markøren.
2. Kulen har blitt mindre, som om den ble gjengitt på en mindre font-size.

Ifølge CSS Counter Styles Nivå 3, standard listemarkør (disc) skal være "lignende på • U+2022 KULE". Det ser ut til at nettlesere øker størrelsen på standardkulen for å gjøre den mer lesbar. Firefox bruker til og med en spesiell font, -moz-bullet-font, for markøren.

Kan problemet med liten størrelse løses med CSS? På testsiden min slår du på markørstyling og observerer hva som skjer når du endrer font-size, line-heightog font-family av markøren.

Som du kan se, øker font-size fører til at den tilpassede markøren blir vertikalt feiljustert, og dette kan ikke korrigeres ved å redusere line-height. De vertical-align egenskapen, som lett kan fikse dette problemet, støttes ikke på ::marker.

Men la du merke til at endre font-family kan føre til at markøren blir større? Prøv å sette den til Tahoma. Dette kan potensielt være en god nok løsning for problemet med liten størrelse, selv om jeg ikke har testet hvilken skrift som fungerer best på tvers av de store nettleserne og operativsystemene.

Du har kanskje også lagt merke til at Chromium-feilen ikke oppstår lenger når du plasserer markøren inne i listeelementet. Dette betyr at en egendefinert markør kan tjene som en løsning for denne feilen. Og dette leder meg til hovedproblemet, og grunnen til at jeg begynte å forske på dette emnet. Hvis du definerer en egendefinert markør og plasserer den inne i listeelementet, er det ingen mellomrom etter markøren og ingen måte å sette inn et mellomrom på med standard midler.

1. Det er ingen minimumsavstand etter egendefinerte markører.
2. ::marker støtter ikke padding or margin.
3. padding-left on <li> øker ikke gapet, siden markøren er plassert inside.

Oppsummering

Her er et sammendrag av alle nøkkelfakta som jeg har nevnt i artikkelen:

1. Nettlesere bruker en standard padding-inline-start of 40px til <ul> og <ol> elementer.
2. Det er et minimumsavstand etter innebygde listemarkører (disc, decimal, etc.). Det er ingen minimumsavstand etter egendefinerte markører (streng eller URL).
3. Lengden på gapet kan økes ved å legge til en padding-left til <ul>, men bare hvis markøren er plassert utenfor listeelementet (standardmodus).
4. Egendefinerte strengmarkører har en mindre standardstørrelse enn innebygde markører. Endring av font-family on ::marker kan øke størrelsen.

konklusjonen

Når jeg ser tilbake på kodeeksemplet fra begynnelsen av artikkelen, tror jeg at jeg forstår nå hvorfor det er et mellomromstegn i content verdi. Det er bare ingen bedre måte å sette inn et mellomrom etter SVG-markøren. Det er en løsning som er nødvendig fordi ingen mengde margin og padding kan opprette et gap etter en egendefinert markør som er plassert inne i listeelementet. EN margin-right on ::marker kan enkelt gjøre det, men det støttes ikke.

Før ::marker legger til støtte for flere egenskaper, vil webutviklere ofte ikke ha noe annet valg enn å skjule markøren og etterligne den med en ::before pseudo-element. Jeg måtte gjøre det selv nylig fordi jeg ikke kunne endre markørens background-color. Forhåpentligvis trenger vi ikke å vente for lenge på en kraftigere ::marker pseudo-element.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/