Alt hvad du behøver at vide om kløften efter listemarkøren

jeg læste "Kreativ listestyling" på Googles web.dev-blog og bemærkede noget mærkeligt i et af kodeeksemplerne i ::marker afsnit af artiklen. De indbyggede listemarkører er punkttegn, ordenstal og bogstaver. Det ::marker Pseudo-element giver os mulighed for at style disse markører eller erstatte dem med et brugerdefineret tegn eller billede.

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

Eksemplet, der fangede min opmærksomhed, bruger et SVG-ikon som en brugerdefineret markør for listeelementerne. Men der er også et enkelt mellemrumstegn (" ") i CSS-værdien ved siden af url() fungere. Formålet med dette rum ser ud til at være at indsætte et hul efter den brugerdefinerede markør.

Da jeg så denne kode, spekulerede jeg straks på, om der var en bedre måde at skabe hullet på. Tilføjelse af et mellemrum til content føles mere som en løsning end den optimale løsning. CSS giver margin , padding og andre standardmåder til at placere elementer på siden. Kunne ingen af ​​disse egenskaber bruges i denne situation?

Først prøvede jeg at erstatte mellemrumstegnet med en passende margen:

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

Dette virkede ikke. Det viser sig, ::marker understøtter kun en lille sæt af for det meste tekst-relaterede CSS-egenskaber. For eksempel kan du ændre font-size , color af markøren, og definer en brugerdefineret markør ved at indstille content til en streng eller URL, som vist ovenfor. Men margin , padding ejendomme er understøttes ikke, så indstilling af dem har ingen effekt. Hvilken skuffelse.

Kan det virkelig være, at et mellemrumstegn er den eneste måde at indsætte et mellemrum efter en brugerdefineret markør? Jeg havde brug for at finde ud af det. Da jeg undersøgte dette emne, gjorde jeg et par interessante opdagelser, som jeg gerne vil dele i denne artikel.

Tilføjelse af polstring og marginer

Lad os først bekræfte hvad margin , padding gøre på <ul> , <li> elementer. Jeg har oprettet en testside til dette formål. Træk de relevante skydere og observer effekten på afstanden på hver side af listemarkøren. Tip: Brug Reset-knappen rigeligt til at nulstille alle kontroller til deres oprindelige værdier.

Bemærk: Browsere anvender en standard padding-inline-left of 40px til <ol> , <ul> elementer. Det logiske padding-inline-left egenskab svarer til den fysiske padding-left ejendom i skrivesystemer med en venstre-til-højre inline retning. I denne artikel vil jeg bruge fysiske egenskaber for enkelhedens skyld.

Som du kan se, padding-left on <li> øger afstanden efter listemarkøren. De andre tre egenskaber styrer afstanden til venstre for markøren, med andre ord indrykning af listeelementet.

Bemærk, at selv når listeelementet er padding-left is 0px, er der stadig et minimum mellemrum efter markøren. Denne forskel kan ikke mindskes med margin or padding. Den nøjagtige længde af minimumsmellemrummet afhænger af browseren.

For at opsummere er listeelementets indhold placeret i en browserspecifik minimumsafstand fra markøren, og dette hul kan øges yderligere ved at tilføje en padding-left til <li>.

Lad os derefter se, hvad der sker, når vi placerer markøren indvendig listepunktet.

Flytning af markøren inde i listeelementet

list-style-position ejendom accepterer to søgeord: outside, som er standard, og inside, som flytter markøren inde i listeelementet. Sidstnævnte er nyttig til at skabe design med listeelementer i fuld bredde.

Hvis markøren er nu indvendig listepunktet, betyder det det padding-left on <li> ikke længere øger afstanden efter markøren? Lad os finde ud af det. Slå til på min testside list-style-position: inside via afkrydsningsfeltet. Hvordan er de fire padding , margin ejendomme påvirket af denne ændring?

Som du kan se, padding-left on <li> øger nu mellemrummet til til venstre af markøren. Det betyder, at vi har mistet evnen til at øge afstanden efter markøren. I denne situation ville det være nyttigt at kunne tilføje margin-right til ::marker sig selv, men det virker ikke, som vi har fastslået ovenfor.

Derudover er der en fejl i Chromium der får mellemrummet efter markøren til triple efter at have skiftet til inside positionering. Som standard er længden af ​​mellemrummet omkring en tredjedel af tekststørrelsen. Altså som standard font-size of 16px, kløften er ca 5.5px. Efter at have skiftet til inside, kløften vokser til fulde 16px i Chrome. Denne fejl påvirker disc, circleog square markører, men ikke ordenstalsmarkører.

Følgende billede viser standardgengivelsen af ​​udvendige og indvendige listemarkører på tværs af tre store browsere på macOS. For nemheds skyld har jeg justeret alle listeelementer vandret på deres markører for at gøre det nemmere at sammenligne forskellene i mellemrumsstørrelser.

For at opsummere, skifte til list-style-position: inside introducerer to problemer. Vi kan ikke længere øge kløften via padding-left on <li>, og mellemrummets størrelse er inkonsekvent mellem browsere.

Lad os endelig se, hvad der sker, når vi erstatter standardlistemarkøren med en brugerdefineret markør.

Skift til en brugerdefineret markør

Der er to måder at definere a brugerdefineret markør:

• list-style-type , list-style-image egenskaber
• content ejendom på ::marker pseudo-element

content ejendom er mere kraftfuld. For eksempel giver det os mulighed for at bruge counter() funktion for at få adgang til listeelementets ordinære nummer (den implicitte list-item imødegå) og dekorer den med tilpassede snore.

Desværre understøtter Safari ikke content ejendom på ::marker endnu (WebKit fejl). Af denne grund vil jeg bruge list-style-type egenskab for at definere den brugerdefinerede markør. Du kan stadig bruge ::marker vælger til at style den brugerdefinerede markør, der er erklæret via list-style-type. Det aspekt af ::marker er understøttet i Safari.

Ethvert Unicode-tegn kan potentielt tjene som en brugerdefineret listemarkør, men kun et lille sæt tegn har faktisk "Bullet" i deres officielle navn, så jeg tænkte, at jeg ville kompilere dem her til reference.

Character	Navn	Kodepunkt	CSS søgeord
•	Bullet	U+2022	disc
‣	Trekantet kugle	U+2023
⁃	Bindestreg Bullet	U+2043
⁌	Sort venstrekugle	U+204C
⁍	Sort Højre Kugle	U+204D
◘	Omvendt kugle	U+25D8
◦	Hvid kugle	U+25E6	circle
☙	Omvendt roteret blomsterhjertekugle	U+2619
❥	Roteret Heavy Black Heart Bullet	U+2765
❧	Roteret blomsterhjertekugle	U+2767
⦾	Cirklet hvid kugle	U+29BE
⦿	Cirklet kugle	U+29BF

Bemærk: CSS square nøgleordet har ikke et tilsvarende "Bullet"-tegn i Unicode. Den karakter, der kommer tættest på, er den sorte lille firkant (▪️) emoji (U+25AA).

Lad os nu se, hvad der sker, når vi erstatter standardlistemarkøren med list-style-type: "•" (U+2022 Kugle). Dette er det samme tegn som standardpunktet, så der burde ikke være nogen større gengivelsesforskelle. Slå til på min testside list-style-type indstilling og observer eventuelle ændringer af markøren.

Som du kan se, er der to væsentlige ændringer:

1. Der er ikke længere et minimumsmellemrum efter markøren.
2. Kuglen er blevet mindre, som var den gengivet på en mindre font-size.

Ifølge CSS Counter Styles niveau 3, standardlistemarkøren (disc) skal være "ligner • U+2022 KUGLE". Det ser ud til, at browsere øger størrelsen på standardkuglen for at gøre den mere læselig. Firefox bruger endda en speciel skrifttype, -moz-bullet-font, for markøren.

Kan problemet med lille størrelse løses med CSS? På min testside skal du slå markørstyling til og observere, hvad der sker, når du ændrer font-size, line-heightog font-family af markøren.

Som du kan se, øges font-size får den brugerdefinerede markør til at blive lodret forkert justeret, og dette kan ikke rettes ved at formindske line-height. Det vertical-align egenskab, som nemt kunne løse dette problem, understøttes ikke på ::marker.

Men lagde du mærke til, at ændre font-family kan få markøren til at blive større? Prøv at indstille det til Tahoma. Dette kunne potentielt være en god nok løsning til problemet med lille størrelse, selvom jeg ikke har testet, hvilken skrifttype der fungerer bedst på tværs af de store browsere og operativsystemer.

Du har måske også bemærket, at Chromium-fejlen ikke længere opstår, når du placerer markøren inde i listeelementet. Dette betyder, at en brugerdefineret markør kan tjene som en løsning på denne fejl. Og dette leder mig til hovedproblemet og grunden til, at jeg begyndte at undersøge dette emne. Hvis du definerer en brugerdefineret markør og placerer den inde i listeelementet, er der ingen mellemrum efter markøren og ingen måde at indsætte et mellemrum på med standardmidler.

1. Der er ingen minimumsafstand efter brugerdefinerede markører.
2. ::marker understøtter ikke padding or margin.
3. padding-left on <li> øger ikke mellemrummet, da markøren er placeret inside.

Resumé

Her er en oversigt over alle de vigtigste fakta, som jeg har nævnt i artiklen:

1. Browsere anvender en standard padding-inline-start of 40px til <ul> , <ol> elementer.
2. Der er et minimum mellemrum efter indbyggede listemarkører (disc, decimal, etc.). Der er ingen minimumsafstand efter tilpassede markører (streng eller URL).
3. Længden af ​​mellemrummet kan øges ved at tilføje en padding-left til <ul>, men kun hvis markøren er placeret uden for listeelementet (standardtilstanden).
4. Brugerdefinerede strengmarkører har en mindre standardstørrelse end indbyggede markører. Ændring af font-family on ::marker kan øge deres størrelse.

Konklusion

Når jeg ser tilbage på kodeeksemplet fra begyndelsen af ​​artiklen, tror jeg, at jeg nu forstår, hvorfor der er et mellemrumstegn i content værdi. Der er bare ingen bedre måde at indsætte et mellemrum efter SVG-markøren. Det er en løsning, der er nødvendig, fordi ingen mængde af margin , padding kan skabe et hul efter en brugerdefineret markør, der er placeret inde i listeelementet. EN margin-right on ::marker kunne sagtens gøre det, men det understøttes ikke.

Indtil ::marker tilføjer understøttelse af flere egenskaber, vil webudviklere ofte ikke have andet valg end at skjule markøren og efterligne den med en ::before pseudo-element. Jeg var selv nødt til at gøre det for nylig, fordi jeg ikke kunne ændre markørens background-color. Forhåbentlig skal vi ikke vente for længe på en mere kraftfuld ::marker pseudo-element.

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/