Alles watten u moeten weten overheen ie gat na den lijstmarkering | CSS-trucs

ik wasgoed aan ie oplezen “Creatieve Lijst Styling” op den web.dev-blog van Google plus merkte iets vreemds op ter ene van den codevoorbeelden ter ie ::marker gedeelte van ie wetsartikel. Den ingebouwde lijstmarkeringen zijn opsommingstekens, rangtelwoorden plus letters. Den ::marker pseudo-element stelt onzerzijds ter staat wegens dit markeringen te stylen of zij te vervangen voort ene aanpassen letter of singeltje.

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

Ie voorbeeld dat mijn voetlicht trok, tweedehands ene SVG-pictogram indien aangepaste markering voordat den lijstitems. Maar er is zowel ene enkele spatie (" ") ter den CSS-waarde ongeacht den url() functie. Ie doelwit van dit spatie lijkt te zijn wegens ene ​​opening ter te voegen na den aangepaste markering.

Waarna ik dit code zag, vroegtijdig ik mij meteen over ​​of er ene betere wijze wasgoed wegens den kloof te creëren. Ene spatie toevoegen aan content voelt meer indien ene tijdelijke vraag dan den optimale vraag. CSS biedt margin Plus padding plus andere standaardmanieren wegens elementen op den pagina uit elkander te plekken. Zullen geen van dit eigenschappen ter dit situatie kunnen wordt tweedehands?

Voorgerecht probeerde ik ie spatieteken te vervangen voort ene goede speelruimte:

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

Dit werkte noch. Zoals ie blijkt, ::marker ondersteunt enkel ene kleine set van meestal tekstgerelateerde CSS-eigenschappen. U kunt bijvoorbeeld den font-size Plus color van den markering plus definieer ene aangepaste markering voort ter te stellen content zoals ene tekenreeks of URL, zoals hierboven weergegeven. Maar den margin Plus padding eigenschappen zijn niet ondersteunddus ie klaarmaken ervan heeft geen effect. Watten ene teleurstelling.

Zullen ie eigenlijk zo kunnen zijn dat ene spatie den enige wijze is wegens ene ​​gat ter te voegen na ene aangepaste markering? Ik moest erachter komen. Terwijl ik dit subject speuren, deed ik ene twee interessante ontdekkingen diegene ik ter dit wetsartikel wil porties.

Vulsel plus marges toevoegen

Permitteren wij voorgerecht knevelen watten margin Plus padding doet op den <ul> Plus <li> elementen. Ik heb hiervoor ene testpagina vervaardigd. Sleep den relevante schuifregelaars plus observeer ie effect op den afstand aan elke zijde van den lijstmarkering. Tip: Gewoonte den Reset-knop royaal wegens alle bedieningselementen terug te zetwerk zoals hun beginwaarden.

Opmerking: Browsers stappen ene standaard toe padding-inline-left van 40px zoals <ol> Plus <ul> elementen. Ie logische padding-inline-left eigendom is gelijksoortig aan ie fysieke padding-left karaktertrek ter schrijfsystemen met ene inline wending van linksom zoals rechts. Te dit wetsartikel ga ik omwille van den eenvoudigheid fysieke eigenschappen gewoontes.

Zoals jij vermag zien, padding-left op <li> vergroot ie gat na den lijstmarkering. Den andere drietal eigenschappen defini den afstand linksom van den markering, met andere woorden, den inspringing van ie lijstitem.

Merknaam op dat zelfs wanneer ie lijstitem’s padding-left is 0px, is er nog steeds ene minimale opening na den markering. Dit kloof vermag noch wordt verkleind met margin of padding. Den exacte lengte van den minimale opening is onderschikkend van den browser.

Samengevat, den inhoud van ie lijstitem bevindt zichzelf op ene browserspecifieke minimale afstand van den markering, plus dit afstand vermag voorts wordt vergroot voort ene padding-left zoals <li>.

Permitteren wij vervolgens loeren watten er gebeurt indien wij den markering plekken te ie lijstitem.

Den markering te ie lijstitem verrijden

Den list-style-position karaktertrek accepteert twee trefwoorden: outsidewatten den standaard is, plus inside, waarmee den markering te ie lijstitem wordt verplaatst. Dit laatste is handig voordat ie maken van ontwerpen met lijstitems overheen den volledige breedte.

Indien den markering nu is te ie lijstitem, betekent dit dat padding-left op <li> vergroot ie gat na den marker noch langer? Dat zoeken wij uit. Schalm op mijn testpagina ter list-style-position: inside via ie vinkje. Hoe gaat ie met den viertal padding Plus margin eigendommen beïnvloed voort dit wijziging?

Zoals jij vermag zien, padding-left op <li> vergroot nu den afstand totdat den linksom van den markering. Dit betekent dat wij den potentie hebben verloren wegens ie gat na den marker te vergroten. Te dit situatie zullen ie handig zijn wegens toe te kunnen voegen margin-right zoals den ::marker zelf, maar dat werkt noch, zoals wij hierboven hebben vastgesteld.

Daarnaast is er ene fout in Chromium dat veroorzaakt ie gat achter den marker verdrievoudigen na overstappen zoals inside positionering. Standaard is den lengte van den opening ruwweg ene derde van den tekstgrootte. Dus standaard font-size van 16pxden kloof is ruwweg 5.5px. Na overstap zoals insidegroeit den kloof totdat ie uiterste 16px ter Chrome. Dit bug is van stemkracht op den disc, circlePlus square markeringen, maar geen rangtelwoordmarkeringen.

Den volgende singeltje toont den standaardweergave van zonder plus te gepositioneerde lijstmarkeringen ter drietal belangrijke browsers op macOS. Voordat uw kalmaan heb ik alle lijstitems horizontaal uitgelijnd op hun markeringen wegens ie gemakkelijker te maken wegens den verschillen ter tussenruimtes te vergelijken.

Samengevat, overstappen zoals list-style-position: inside introduceert twee problemen. Wij kunnen ie gat noch meer vergroten via padding-left op <li>plus den ruimte van den tussenruimte is noch consistent tussen browsers.

Permitteren wij totdat slot ooit loeren watten er gebeurt indien wij den standaardlijstmarkering vervangen voort ene aangepaste markering.

Overschakelen zoals ene aangepaste markering

Er zijn twee wegen wegens a te definiëren aangepaste markering:

• list-style-type Plus list-style-image eigenschappen
• content pand op den ::marker pseudo-element

Den content eigendom is sterker. Ie stelt onzerzijds bijvoorbeeld ter staat wegens den toonbank() functie wegens toegang te krijgen totdat ie rangtelwoord van ie lijstitem (ie impliciet list-item balie) plus versier ie met aangepaste snaren.

Helaas ondersteunt Safari den content eigendom op ::marker nog (WebKit-fout). Wegens dit reden ga ik den list-style-type karaktertrek wegens den aangepaste markering te definiëren. U kunt nog steeds gewoonte maken van den ::marker selector wegens den aangepaste markering op te maken diegene is gedeclareerd via list-style-type. Dat opzicht van ::marker wordt ondersteund ter Safari.

Elk Unicode-teken vermag mogelijk dienen indien ene aangepaste lijstmarkering, maar slechts ene klein tal tekens heeft “Bullet” ter hun officiële naam, dus ik denk dat ik zij hier ter verwijzing zullen compileren.

Letter	Naam	Code punt	CSS-sleutelwoord
•	Kogel	U+2022	disc
‣	Driehoekige kogel	U+2023
⁃	Verbindingsteken	U+2043
⁌	Zwarte kogel zoals linksom	U+204C
⁍	Zwarte kogel zoals rechts	U+204D
◘	Tegenovergestelde kogel	U+25D8
◦	Witten kogel	U+25E6	circle
☙	Tegenovergestelde geroteerde bloemenhartkogel	U+2619
❥	Geroteerde zware zwarte hartkogel	U+2765
❧	Geroteerde bloemenhartkogel	U+2767
⦾	Omcirkelde witten kogel	U+29BE
⦿	Omcirkelde kogel	U+29BF

Opmerking: Den CSS square zoekwoord heeft geen bijgesloten “Bullet”-teken ter Unicode. Ie personage dat ie dichtst ter den buurt komt, is den emoji van ie zwarte kleine vierkantje (▪️) (U+25AA).

Permitteren wij nu ooit loeren watten er gebeurt indien wij den standaardlijstmarkering vervangen voort list-style-type: "•" (U+2022 Kogel). Dit is idem teken indien ie standaard opsommingsteken, dus er zullen geen uitgestrekte weergaveverschillen willen zijn. Schalm op mijn testpagina den list-style-type optie plus observeer eventuele wijzigingen aan den markering.

Zoals u kunt zien, zijn er twee belangrijke wijzigingen:

1. Er is geen minimale opening meer na den markering.
2. Den kogel is kleiner werd, nep hij kleiner is weergegeven font-size.

Volgens CSS-tellerstijlen niveau 3den standaard lijstmarkering (disc) moeten zijn “vergelijkbaar met • U+2022 KOGEL”. Ie lijkt erop dat browsers den ruimte van ie standaard opsommingsteken vergroten wegens ie leesbaarder te maken. Firefox tweedehands zelfs ene speciaal lettertype, -moz-bullet-fontvoordat den markering.

Vermag ie probleem van den kleine omvang wordt opgelost met CSS? Schalm op mijn testpagina markeringsstyling ter plus kijk watten er gebeurt indien u den font-size, line-heightPlus font-family van den markering.

Zoals u kunt zien, verhoogt u den font-size zorgt ervoor dat den aangepaste markering verticaal verkeerd wordt uitgelijnd plus dit vermag noch wordt gecorrigeerd voort den line-height. Den vertical-align karaktertrek, diegene dit probleem gemakkelijk zullen kunnen oplossen, wordt noch ondersteund op ::marker.

Maar heb jij gemerkt dat ie veranderen van den font-family vermag ervoor zorgen dat den marker groter wordt? Probeer ie ter te stellen op Tahoma. Dit zullen mogelijk ene goede vraag kunnen zijn voordat ie kleine probleem, hoewel ik noch heb getest welk lettertype ie uitgelezene werkt ter den belangrijkste browsers plus besturingssystemen.

Ie is jij misschien zowel opgevallen dat den Chromium-bug noch meer voorkomt wanneer jij den markering ter ie lijstitem plaatst. Dit betekent dat ene aangepaste markering vermag dienen indien tijdelijke vraag voordat dit bug. Plus dit brengt mij erop ie grootste probleem plus den reden waarom ik dit subject ben gaan onderzoeken. Indien u ene aangepaste markering definieert plus dit te ie lijstitem plaatst, is er geen opening na den markering plus is ie noch mogelijk wegens op den standaard wijze ene opening ter te voegen.

1. Er is geen minimale opening na aangepaste markeringen.
2. ::marker ondersteunt noch padding of margin.
3. padding-left op <li> vergroot den opening noch, overmits den markering is gepositioneerd inside.

Uittreksel

Hier is ene uittreksel van alle belangrijke feiten diegene ik ter ie wetsartikel heb medegedeeld:

1. Browsers stappen ene standaard toe padding-inline-start van 40px zoals <ul> Plus <ol> elementen.
2. Er is ene minimale opening na ingebouwde lijstmarkeringen (disc, decimal, enzovoort.). Er is geen minimumafstand na aangepaste markeringen (tekenreeks of URL).
3. Den lengte van den opening vermag wordt vergroot voort ene toe te voegen padding-left zoals <ul>maar enkel indien den markering zonder ie lijstitem staat (den standaardmodus).
4. Aangepaste tekenreeksmarkeringen hebben ene kleinere standaardgrootte dan ingebouwde markeringen. Ie wijzigen van den font-family op ::marker kunnen groter wordt.

Gevolgtrekking

Terugkijkend op ie codevoorbeeld vanaf ie start van ie wetsartikel, denken ik dat ik nu begrijp waarom er ene spatie ter den content waarde. Er is gewoon geen betere wijze wegens ene ​​opening ter te voegen na den SVG-markering. Ie is ene tijdelijke vraag diegene nodig is omdat er geen hoeveelheid is margin Plus padding vermag ene opening creëren na ene aangepaste markering diegene te ie lijstitem is situeren. A margin-right op ::marker zullen ie gemakkelijk kunnen doet, maar dat wordt noch ondersteund.

Totdat ::marker steun voordat meer eigenschappen toevoegt, hebben webontwikkelaars vaak geen andere preferentie dan den markering te verduisteren plus te emuleren met ene ::before pseudo-element. Dat moest ik onlangs zelf doet omdat ik den stiften noch kon veranderen background-color. Hopelijk paardenhoeven wij noch te lang te wachten op ene krachtigere ::marker pseudo-element.