Alles wat u moet weten over het gat na de lijstmarkering

ik was aan het lezen "Creatieve Lijst Styling" op de web.dev-blog van Google en merkte iets vreemds op in een van de codevoorbeelden in het ::marker gedeelte van het artikel. De ingebouwde lijstmarkeringen zijn opsommingstekens, rangtelwoorden en letters. De ::marker pseudo-element stelt ons in staat om deze markeringen te stylen of ze te vervangen door een aangepast karakter of afbeelding.

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

Het voorbeeld dat mijn aandacht trok, gebruikt een SVG-pictogram als aangepaste markering voor de lijstitems. Maar er is ook een enkele spatie (" ") in de CSS-waarde naast de url() functie. Het doel van deze spatie lijkt te zijn om een ​​opening in te voegen na de aangepaste markering.

Toen ik deze code zag, vroeg ik me meteen af ​​of er een betere manier was om de kloof te creëren. Een spatie toevoegen aan content voelt meer als een tijdelijke oplossing dan de optimale oplossing. CSS biedt margin en padding en andere standaardmanieren om elementen op de pagina uit elkaar te plaatsen. Zou geen van deze eigenschappen in deze situatie kunnen worden gebruikt?

Eerst probeerde ik het spatieteken te vervangen door een goede marge:

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

Dit werkte niet. Zoals het blijkt, ::marker ondersteunt alleen een kleine set van meestal tekstgerelateerde CSS-eigenschappen. U kunt bijvoorbeeld de font-size en color van de markering en definieer een aangepaste markering door in te stellen content naar een tekenreeks of URL, zoals hierboven weergegeven. Maar de margin en padding eigenschappen zijn niet ondersteund, dus het instellen ervan heeft geen effect. Wat een teleurstelling.

Zou het echt zo kunnen zijn dat een spatie de enige manier is om een ​​gat in te voegen na een aangepaste markering? Ik moest erachter komen. Terwijl ik dit onderwerp onderzocht, deed ik een paar interessante ontdekkingen die ik in dit artikel wil delen.

Opvulling en marges toevoegen

Laten we eerst bevestigen wat margin en padding doen op de <ul> en <li> elementen. Ik heb hiervoor een testpagina gemaakt. Sleep de relevante schuifregelaars en observeer het effect op de afstand aan elke kant van de lijstmarkering. Tip: Gebruik de Reset-knop royaal om alle bedieningselementen terug te zetten naar hun beginwaarden.

Opmerking: Browsers passen een standaard toe padding-inline-left of 40px naar <ol> en <ul> elementen. Het logische padding-inline-left eigendom is gelijk aan het fysieke padding-left eigenschap in schrijfsystemen met een inline richting van links naar rechts. In dit artikel ga ik omwille van de eenvoud fysieke eigenschappen gebruiken.

Zoals je kan zien, padding-left on <li> vergroot het gat na de lijstmarkering. De andere drie eigenschappen bepalen de afstand links van de markering, met andere woorden, de inspringing van het lijstitem.

Merk op dat zelfs wanneer het lijstitem's padding-left is 0px, is er nog steeds een minimale opening na de markering. Deze kloof kan niet worden verkleind met margin or padding. De exacte lengte van de minimale opening is afhankelijk van de browser.

Kortom, de inhoud van het lijstitem bevindt zich op een browserspecifieke minimale afstand van de markering, en deze afstand kan verder worden vergroot door een padding-left naar <li>.

Laten we vervolgens kijken wat er gebeurt als we de markering plaatsen binnen het lijstitem.

De markering binnen het lijstitem verplaatsen

De list-style-position eigenschap accepteert twee trefwoorden: outside, wat de standaard is, en inside, waarmee de markering binnen het lijstitem wordt verplaatst. Dit laatste is handig voor het maken van ontwerpen met lijstitems over de volledige breedte.

Als de markering nu is binnen het lijstitem, betekent dit dat padding-left on <li> vergroot het gat na de marker niet langer? Dat zoeken we uit. Schakel op mijn testpagina in list-style-position: inside via het vinkje. Hoe gaat het met de vier padding en margin eigendommen beïnvloed door deze wijziging?

Zoals je kan zien, padding-left on <li> vergroot nu de afstand tot de links van de markering. Dit betekent dat we de mogelijkheid hebben verloren om het gat na de marker te vergroten. In deze situatie zou het handig zijn om toe te kunnen voegen margin-right aan de ::marker zelf, maar dat werkt niet, zoals we hierboven hebben vastgesteld.

Daarnaast is er een fout in Chromium dat veroorzaakt het gat achter de marker drievoudig na het overschakelen naar inside positionering. Standaard is de lengte van de opening ongeveer een derde van de tekstgrootte. Dus standaard font-size of 16px, de kloof is ongeveer 5.5px. Na overstap naar inside, groeit de kloof tot het uiterste 16px in Chrome. Deze bug is van invloed op de disc, circle en square markeringen, maar geen rangtelwoordmarkeringen.

De volgende afbeelding toont de standaardweergave van buiten en binnen gepositioneerde lijstmarkeringen in drie belangrijke browsers op macOS. Voor uw gemak heb ik alle lijstitems horizontaal uitgelijnd op hun markeringen om het gemakkelijker te maken om de verschillen in tussenruimtes te vergelijken.

Kortom, overstappen naar list-style-position: inside introduceert twee problemen. We kunnen het gat niet meer vergroten via padding-left on <li>, en de grootte van de tussenruimte is niet consistent tussen browsers.

Laten we tot slot eens kijken wat er gebeurt als we de standaardlijstmarkering vervangen door een aangepaste markering.

Overschakelen naar een aangepaste markering

Er zijn twee manieren om a te definiëren aangepaste markering:

• list-style-type en list-style-image vastgoed
• content eigendom op de ::marker pseudo-element

De content eigendom is sterker. Het stelt ons bijvoorbeeld in staat om de counter() functie om toegang te krijgen tot het rangtelwoord van het lijstitem (het stilzwijgend list-item teller) en versier het met aangepaste snaren.

Helaas ondersteunt Safari de content eigendom op ::marker nog (WebKit-bug). Om deze reden ga ik de list-style-type eigenschap om de aangepaste markering te definiëren. U kunt nog steeds gebruik maken van de ::marker selector om de aangepaste markering op te maken die is gedeclareerd via list-style-type. Dat aspect van ::marker wordt ondersteund in Safari.

Elk Unicode-teken kan mogelijk dienen als een aangepaste lijstmarkering, maar slechts een klein aantal tekens heeft eigenlijk "Bullet" in hun officiële naam, dus ik dacht dat ik ze hier zou compileren ter referentie.

Karakter	Naam	Code punt	CSS-sleutelwoord
•	Kogel camera's	U+2022	disc
‣	Driehoekige kogel	U+2023
⁃	Koppelteken	U+2043
⁌	Zwarte kogel naar links	U+204C
⁍	Zwarte kogel naar rechts	U+204D
◘	Omgekeerde kogel	U+25D8
◦	Witte kogel	U+25E6	circle
☙	Omgekeerd gedraaid bloemenhart Bullet	U+2619
❥	Geroteerde zware zwarte hartkogel	U+2765
❧	Geroteerde bloemenhartkogel	U+2767
⦾	Omcirkelde witte kogel	U+29BE
⦿	Omcirkelde kogel	U+29BF

Opmerking: De CSS square zoekwoord heeft geen bijbehorend "Bullet"-teken in Unicode. Het personage dat het dichtst in de buurt komt, is de emoji van het zwarte kleine vierkantje (▪️) (U+25AA).

Laten we nu eens kijken wat er gebeurt als we de standaardlijstmarkering vervangen door list-style-type: "•" (U+2022 Kogel). Dit is hetzelfde teken als het standaard opsommingsteken, dus er zouden geen grote weergaveverschillen moeten zijn. Schakel op mijn testpagina de list-style-type optie en observeer eventuele wijzigingen aan de markering.

Zoals u kunt zien, zijn er twee belangrijke wijzigingen:

1. Er is geen minimale opening meer na de markering.
2. De kogel is kleiner geworden, alsof hij kleiner is weergegeven font-size.

Think CSS-tellerstijlen niveau 3, de standaard lijstmarkering (disc) moet zijn "vergelijkbaar met • U+2022 KOGEL". Het lijkt erop dat browsers de grootte van het standaard opsommingsteken vergroten om het leesbaarder te maken. Firefox gebruikt zelfs een speciaal lettertype, -moz-bullet-font, voor de markering.

Kan het probleem van de kleine omvang worden opgelost met CSS? Schakel op mijn testpagina markeringsstyling in en kijk wat er gebeurt als u de font-size, line-height en font-family van de markering.

Zoals u kunt zien, verhoogt u de font-size zorgt ervoor dat de aangepaste markering verticaal verkeerd wordt uitgelijnd en dit kan niet worden gecorrigeerd door de line-height. De vertical-align eigenschap, die dit probleem gemakkelijk zou kunnen oplossen, wordt niet ondersteund op ::marker.

Maar heb je gemerkt dat het veranderen van de font-family kan ervoor zorgen dat de marker groter wordt? Probeer het in te stellen op Tahoma. Dit zou mogelijk een goede oplossing kunnen zijn voor het kleine probleem, hoewel ik niet heb getest welk lettertype het beste werkt in de belangrijkste browsers en besturingssystemen.

Het is je misschien ook opgevallen dat de Chromium-bug niet meer voorkomt wanneer je de markering in het lijstitem plaatst. Dit betekent dat een aangepaste markering kan dienen als tijdelijke oplossing voor deze bug. En dit brengt me bij het grootste probleem en de reden waarom ik dit onderwerp ben gaan onderzoeken. Als u een aangepaste markering definieert en deze binnen het lijstitem plaatst, is er geen opening achter de markering en is het niet mogelijk om standaard een opening in te voegen.

1. Er is geen minimale opening na aangepaste markeringen.
2. ::marker ondersteunt niet padding or margin.
3. padding-left on <li> vergroot de opening niet, aangezien de markering is gepositioneerd inside.

Samengevat

Hier is een samenvatting van alle belangrijke feiten die ik in het artikel heb genoemd:

1. Browsers passen een standaard toe padding-inline-start of 40px naar <ul> en <ol> elementen.
2. Er is een minimale opening na ingebouwde lijstmarkeringen (disc, decimal, enz.). Er is geen minimumafstand na aangepaste markeringen (tekenreeks of URL).
3. De lengte van de opening kan worden vergroot door een toe te voegen padding-left naar <ul>, maar alleen als de markering buiten het lijstitem staat (de standaardmodus).
4. Aangepaste tekenreeksmarkeringen hebben een kleinere standaardgrootte dan ingebouwde markeringen. Het wijzigen van de font-family on ::marker kunnen groter worden.

Conclusie

Terugkijkend op het codevoorbeeld vanaf het begin van het artikel, denk ik dat ik nu begrijp waarom er een spatie in de content waarde. Er is gewoon geen betere manier om een ​​opening in te voegen na de SVG-markering. Het is een tijdelijke oplossing die nodig is omdat er geen hoeveelheid is margin en padding kan een opening creëren na een aangepaste markering die binnen het lijstitem is geplaatst. A margin-right on ::marker zou het gemakkelijk kunnen doen, maar dat wordt niet ondersteund.

Tot ::marker ondersteuning voor meer eigenschappen toevoegt, hebben webontwikkelaars vaak geen andere keuze dan de markering te verbergen en te emuleren met een ::before pseudo-element. Dat moest ik laatst zelf doen omdat ik de stiften niet kon veranderen background-color. Hopelijk hoeven we niet te lang te wachten op een krachtigere ::marker pseudo-element.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/