Allt du behöver veta om gapet efter listmarkören

jag läste "Kreativ liststyling" på Googles web.dev-blogg och märkte något konstigt i ett av kodexemplen i ::marker avsnitt av artikeln. De inbyggda listmarkörerna är punkter, ordningssiffror och bokstäver. De ::marker pseudo-element låter oss styla dessa markörer eller ersätta dem med en anpassad karaktär eller bild.

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

Exemplet som fångade min uppmärksamhet använder en SVG-ikon som en anpassad markör för listobjekten. Men det finns också ett enda mellanslag (" ") i CSS-värdet bredvid url() fungera. Syftet med detta utrymme verkar vara att infoga ett mellanrum efter den anpassade markören.

När jag såg den här koden undrade jag direkt om det fanns ett bättre sätt att skapa gapet. Lägger till ett mellanslag till content känns mer som en lösning än den optimala lösningen. CSS tillhandahåller margin och padding och andra vanliga sätt att placera ut element på sidan. Skulle ingen av dessa egenskaper kunna användas i den här situationen?

Först försökte jag ersätta mellanslagstecken med en ordentlig marginal:

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

Det här fungerade inte. Som det visar sig, ::marker stöder endast a liten uppsättning mestadels textrelaterade CSS-egenskaper. Du kan till exempel ändra font-size och color av markören och definiera en anpassad markör genom inställning content till en sträng eller URL, som visas ovan. Men margin och padding egenskaper är stöds inte, så att ställa in dem har ingen effekt. Vilken besvikelse.

Kan det verkligen vara så att ett mellanslagstecken är det enda sättet att infoga ett mellanrum efter en anpassad markör? Jag behövde ta reda på det. När jag undersökte detta ämne gjorde jag några intressanta upptäckter som jag skulle vilja dela med mig av i den här artikeln.

Lägger till stoppning och marginaler

Låt oss först bekräfta vad margin och padding göra på <ul> och <li> element. Jag har skapat en testsida för detta ändamål. Dra de relevanta reglagen och observera effekten på avståndet på varje sida av listmarkören. Tips: Använd återställningsknappen flitigt för att återställa alla kontroller till deras initiala värden.

Notera: Webbläsare tillämpar en standard padding-inline-left of 40px till <ol> och <ul> element. Det logiska padding-inline-left egendom är likvärdig med den fysiska padding-left egendom i skriftsystem med en inline-riktning från vänster till höger. I den här artikeln kommer jag att använda fysiska egenskaper för enkelhetens skull.

Som ni kan se, padding-left on <li> ökar gapet efter listmarkören. De andra tre egenskaperna styr avståndet till vänster om markören, med andra ord, indragningen av listobjektet.

Observera att även när listobjektet är padding-left is 0px, det finns fortfarande ett minsta mellanrum efter markören. Detta gap kan inte minskas med margin or padding. Den exakta längden på minsta gap beror på webbläsaren.

Sammanfattningsvis är listobjektets innehåll placerat på ett webbläsarspecifikt minimiavstånd från markören, och detta gap kan ökas ytterligare genom att lägga till en padding-left till <li>.

Låt oss sedan se vad som händer när vi placerar markören inuti listobjektet.

Flytta markören inuti listobjektet

Smakämnen list-style-position egenskapen accepterar två sökord: outside, som är standard, och inside, som flyttar markören inuti listobjektet. Det sistnämnda är användbart för att skapa mönster med listobjekt i full bredd.

Om markören är nu inuti listposten, betyder detta det padding-left on <li> inte längre ökar gapet efter markören? Låt oss ta reda på. Slå på på min testsida list-style-position: inside via kryssrutan. Hur mår de fyra padding och margin fastigheter som påverkas av denna förändring?

Som ni kan se, padding-left on <li> ökar nu avståndet till vänster av markören. Det betyder att vi har tappat förmågan att öka gapet efter markören. I det här läget skulle det vara användbart att kunna lägga till margin-right till ::marker själv, men det fungerar inte, som vi har fastställt ovan.

Dessutom finns det en bugg i Chromium som gör att gapet efter markören trippel efter att ha bytt till inside positionering. Som standard är längden på mellanrummet ungefär en tredjedel av textstorleken. Som standard alltså font-size of 16px, gapet är ungefär 5.5px. Efter att ha bytt till inside, gapet växer till fullo 16px i Chrome. Denna bugg påverkar disc, circleoch square markörer, men inte ordningstalsmarkörer.

Följande bild visar standardrenderingen av listmarkörer som är placerade på utsidan och insidan över tre stora webbläsare på macOS. För din bekvämlighet har jag justerat alla listobjekt horisontellt på deras markörer för att göra det lättare att jämföra skillnaderna i mellanrumsstorlekar.

För att sammanfatta, byta till list-style-position: inside introducerar två problem. Vi kan inte längre öka klyftan via padding-left on <li>, och gapstorleken är inkonsekvent mellan webbläsare.

Slutligen, låt oss se vad som händer när vi ersätter standardlistmarkören med en anpassad markör.

Byter till en anpassad markör

Det finns två sätt att definiera a anpassad markör:

• list-style-type och list-style-image egenskaper
• content fastighet på ::marker pseudo-elementet

Smakämnen content egendom är mer kraftfull. Till exempel tillåter det oss att använda counter() funktion för att komma åt listobjektets ordningsnummer (den implicita list-item motverka) och dekorera den med anpassade snören.

Tyvärr stöder inte Safari content fastighet på ::marker än (WebKit-bugg). Av denna anledning kommer jag att använda list-style-type egenskap för att definiera den anpassade markören. Du kan fortfarande använda ::marker väljare för att utforma den anpassade markören som deklareras via list-style-type. Den aspekten av ::marker stöds i Safari.

Alla Unicode-tecken kan potentiellt fungera som en anpassad listmarkör, men bara en liten uppsättning tecken har faktiskt "Bullet" i sitt officiella namn, så jag tänkte att jag skulle kompilera dem här för referens.

Karaktär	Namn	Kodpunkt	CSS nyckelord
•	Kula	U+2022	disc
‣	Triangulär kula	U+2023
⁃	Bindestreck Bullet	U+2043
⁌	Svart vänsterkula	U+204C
⁍	Svart högerkula	U+204D
◘	Omvänd kula	U+25D8
◦	Vit kula	U+25E6	circle
☙	Omvänd roterad blommig hjärtakula	U+2619
❥	Roterad Heavy Black Heart Bullet	U+2765
❧	Roterad blommig hjärtkula	U+2767
⦾	Inringad vit kula	U+29BE
⦿	Inringad kula	U+29BF

Notera: CSS square nyckelordet har inte ett motsvarande "Bullet"-tecken i Unicode. Den karaktär som kommer närmast är den svarta lilla fyrkanten (▪️) emoji (U+25AA).

Låt oss nu se vad som händer när vi ersätter standardlistmarkören med list-style-type: "•" (U+2022 Kula). Detta är samma karaktär som standardkulan, så det borde inte finnas några större skillnader i renderingen. På min testsida, slå på list-style-type och observera eventuella ändringar av markören.

Som du kan se finns det två betydande förändringar:

1. Det finns inte längre ett minsta mellanrum efter markören.
2. Kulan har blivit mindre, som om den var renderad på en mindre font-size.

Enligt CSS Counter Styles Nivå 3, standardlistmarkören (disc) bör vara "liknar • U+2022 KULA". Det verkar som om webbläsare ökar storleken på standardkulan för att göra den mer läsbar. Firefox använder till och med ett speciellt typsnitt, -moz-bullet-font, för markören.

Kan problemet med liten storlek fixas med CSS? På min testsida, slå på markörstyling och observera vad som händer när du ändrar font-size, line-heightoch font-family av markören.

Som du kan se ökar font-size gör att den anpassade markören blir vertikalt feljusterad, och detta kan inte korrigeras genom att minska line-height. De vertical-align egendom, som lätt kan lösa detta problem, stöds inte på ::marker.

Men märkte du att ändra font-family kan göra att markören blir större? Prova att ställa in den på Tahoma. Detta kan potentiellt vara en tillräckligt bra lösning för problemet med liten storlek, även om jag inte har testat vilket typsnitt som fungerar bäst i de stora webbläsarna och operativsystemen.

Du kanske också har märkt att Chromium-felet inte uppstår längre när du placerar markören i listobjektet. Detta innebär att en anpassad markör kan fungera som en lösning för denna bugg. Och detta leder mig till huvudproblemet och anledningen till att jag började forska i detta ämne. Om du definierar en anpassad markör och placerar den inuti listobjektet, finns det inget mellanrum efter markören och inget sätt att infoga ett mellanrum med standardmetoder.

1. Det finns inget minsta mellanrum efter anpassade markörer.
2. ::marker stöder inte padding or margin.
3. padding-left on <li> ökar inte gapet, eftersom markören är placerad inside.

Sammanfattning

Här är en sammanfattning av alla nyckelfakta som jag har nämnt i artikeln:

1. Webbläsare tillämpar en standard padding-inline-start of 40px till <ul> och <ol> element.
2. Det finns en minsta lucka efter inbyggda listmarkörer (disc, decimal, etc.). Det finns inget minsta mellanrum efter anpassade markörer (sträng eller URL).
3. Spaltens längd kan ökas genom att lägga till a padding-left till <ul>, men bara om markören är placerad utanför listobjektet (standardläget).
4. Anpassade strängmarkörer har en mindre standardstorlek än inbyggda markörer. Ändra font-family on ::marker kan öka sin storlek.

Slutsats

När jag ser tillbaka på kodexemplet från början av artikeln tror jag att jag nu förstår varför det finns ett mellanslagstecken i content värde. Det finns bara inget bättre sätt att infoga en lucka efter SVG-markören. Det är en lösning som behövs eftersom ingen mängd margin och padding kan skapa ett mellanrum efter en anpassad markör som är placerad inuti listobjektet. A margin-right on ::marker skulle lätt kunna göra det, men det stöds inte.

Tills ::marker lägger till stöd för fler egenskaper, har webbutvecklare ofta inget annat val än att dölja markören och emulera den med en ::before pseudo-element. Jag var tvungen att göra det själv nyligen eftersom jag inte kunde ändra markörens background-color. Förhoppningsvis behöver vi inte vänta för länge på en kraftfullare ::marker pseudoelement.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/