Minden, amit a listajelző utáni résről tudni kell

olvastam „Kreatív lista stílusa” a Google web.dev blogján, és valami furcsaságot észlelt az egyik kódpéldában a ::marker szakasza a cikkben. A beépített listajelölők felsorolásjelek, sorszámok és betűk. A ::marker A pszeudoelem lehetővé teszi, hogy ezeket a jelölőket stílusozzuk, vagy lecseréljük őket egy egyéni karakterre vagy képre.

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

A figyelmemet felkeltő példa egy SVG ikont használ egyéni jelölőként a listaelemekhez. De van egy szóköz karakter is (" ") a melletti CSS-értékben url() funkció. Úgy tűnik, ennek a szóköznek az a célja, hogy egy rést szúrjon be az egyéni jelölő után.

Amikor megláttam ezt a kódot, azonnal elgondolkodtam, hogy van-e jobb módszer a rést létrehozni. Szóköz hozzáfűzése ehhez content inkább megoldásnak tűnik, mint optimális megoldásnak. A CSS biztosítja margin és a padding és egyéb szabványos módszerek az elemek térközelítésére az oldalon. Ezen tulajdonságok egyike sem használható ebben a helyzetben?

Először megpróbáltam a szóköz karaktert megfelelő margóval helyettesíteni:

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

Ez nem működött. Ahogy kiderül, ::marker csak támogatja a többnyire szöveggel kapcsolatos CSS-tulajdonságok kis halmaza. Például megváltoztathatja a font-size és a color jelölőt, és beállítással definiáljon egyéni jelölőt content karakterláncra vagy URL-címre, ahogy fent látható. De a margin és a padding tulajdonságai vannak Nem támogatott, így ezek beállításának nincs hatása. Milyen csalódás.

Valóban előfordulhat, hogy a szóköz az egyetlen módja annak, hogy egy egyéni jelölő után rést szúrjunk be? ki kellett derítenem. A téma kutatása során néhány érdekes felfedezést tettem, amelyeket meg szeretnék osztani ebben a cikkben.

Kitöltés és margók hozzáadása

Először is erősítsük meg, mit margin és a padding csináld a <ul> és a <li> elemeket. Létrehoztam egy tesztoldalt erre a célra. Húzza el a megfelelő csúszkákat, és figyelje meg a szóközök hatását a listajelölő mindkét oldalán. Tipp: Használja bőségesen a Reset gombot az összes vezérlő visszaállításához a kezdeti értékre.

Jegyzet: A böngészők alapértelmezést alkalmaznak padding-inline-left of 40px nak nek <ol> és a <ul> elemeket. A logikus padding-inline-left tulajdonság egyenértékű a fizikaival padding-left tulajdonság balról jobbra haladó belső iránnyal rendelkező írásrendszerekben. Ebben a cikkben az egyszerűség kedvéért fizikai tulajdonságokat fogok használni.

Mint láthatjuk, padding-left on <li> növeli a rést a listajelző után. A másik három tulajdonság a jelölőtől balra lévő térközt, más szóval a listaelem behúzását szabályozza.

Vedd észre, hogy akkor is, ha a listaelem padding-left is 0px, még mindig van egy minimális rés a marker után. Ezt a különbséget nem lehet ezzel csökkenteni margin or padding. A minimális rés pontos hossza a böngészőtől függ.

Összefoglalva, a listaelem tartalma a böngésző-specifikus minimális távolságra helyezkedik el a markertől, és ez a különbség tovább növelhető egy padding-left nak nek <li>.

Ezután nézzük meg, mi történik, amikor elhelyezzük a jelölőt belső a listaelemet.

A jelölő mozgatása a listaelemen belül

A list-style-position tulajdonság két kulcsszót fogad el: outside, amely az alapértelmezett, és inside, amely a jelölőt a listaelemen belül mozgatja. Ez utóbbi hasznos a teljes szélességű listaelemeket tartalmazó tervek létrehozásához.

Ha a jelző most belső a listaelem, ez azt jelenti-e padding-left on <li> már nem növeli a rést a marker után? Találjuk ki. A tesztoldalamon kapcsolja be list-style-position: inside a jelölőnégyzeten keresztül. Hogy van a négy padding és a margin a változás által érintett ingatlanok?

Mint láthatjuk, padding-left on <li> most növeli a távolságot a balra a marker. Ez azt jelenti, hogy elvesztettük azt a képességet, hogy növeljük a jelölő utáni rést. Ebben a helyzetben hasznos lenne hozzátenni margin-right hoz ::marker önmagában, de ez nem működik, ahogy azt fentebb megállapítottuk.

Ezen kívül van egy hiba a Chromiumban ami miatt a jelölő utáni rés az hármas váltás után inside pozicionálás. Alapértelmezés szerint a hézag hossza körülbelül a szöveg méretének egyharmada. Tehát alapértelmezésben font-size of 16px, a szakadék kb 5.5px. A váltás után inside, a rés teljesre nő 16px Chrome-ban. Ez a hiba érinti a disc, circleés square jelzők, de nem sorszámjelzők.

A következő kép a külső és a belső elrendezésű listajelzők alapértelmezett megjelenítését mutatja három fő böngészőben macOS rendszeren. Az Ön kényelme érdekében az összes listaelemet vízszintesen igazítottam a jelölőikre, hogy könnyebb legyen összehasonlítani a hézagméretek közötti különbségeket.

Összefoglalva, váltás list-style-position: inside két problémát vet fel. A különbséget tovább nem tudjuk növelni padding-left on <li>, és a rés mérete inkonzisztens a böngészők között.

Végül nézzük meg, mi történik, ha az alapértelmezett listajelölőt egyéni jelölőre cseréljük.

Váltás egyéni jelölőre

Kétféleképpen lehet meghatározni a egyéni marker:

• list-style-type és a list-style-image ingatlanait
• content ingatlan a ::marker pszeudo-elem

A content az ingatlan erősebb. Például lehetővé teszi számunkra, hogy a counter() funkció a listaelem sorszámának eléréséhez (a hallgatólagos list-item ellen), és díszítse egyedi zsinórokkal.

Sajnos a Safari nem támogatja a content ingatlanon ::marker még (WebKit hiba). Emiatt fogom használni a list-style-type tulajdonság az egyéni marker meghatározásához. Továbbra is használhatod a ::marker választó a keresztül deklarált egyéni marker stílusához list-style-type. Az a szempont ::marker a Safari támogatja.

Bármely Unicode-karakter használható egyéni listajelölőként, de valójában csak a karakterek kis halmazának van a hivatalos nevében a „Bullet”, ezért úgy gondoltam, referenciaként összeállítom őket.

Karakter	Név	Kódpont	CSS kulcsszó
•	Golyó	U+2022	disc
‣	Háromszög alakú golyó	U+2023
⁃	Kötőjel Bullet	U+2043
⁌	Fekete bal irányú golyó	U+204C
⁍	Fekete jobb oldali golyó	U+204D
◘	Inverz Bullet	U+25D8
◦	Fehér Golyó	U+25E6	circle
☙	Fordított elforgatott virágos szívgolyó	U+2619
❥	Elforgatott nehéz fekete szív golyó	U+2765
❧	Elforgatott virágos szív golyó	U+2767
⦾	Körbe zárt fehér golyó	U+29BE
⦿	Bekarikázott golyó	U+29BF

Jegyzet: A CSS square a kulcsszónak nincs megfelelő „Bullet” karaktere a Unicode-ban. A legközelebbi karakter a Fekete kis négyzet (▪️) emoji (U+25AA).

Most pedig nézzük meg, mi történik, ha az alapértelmezett listajelölőt a következőre cseréljük list-style-type: "•" (U+2022 Golyó). Ez ugyanaz a karakter, mint az alapértelmezett felsorolásjel, tehát nem lehetnek jelentős renderelési különbségek. A tesztoldalamon kapcsolja be a list-style-type opciót, és figyelje meg a marker változásait.

Amint látja, két jelentős változás van:

1. A marker után már nincs minimális rés.
2. A golyó kisebb lett, mintha egy kisebbnél lett volna megjelenítve font-size.

Szerint CSS számlálóstílusok 3. szint, az alapértelmezett listajelző (disc) legyen „hasonló a • U+2022 GOLYÓ". Úgy tűnik, hogy a böngészők növelik az alapértelmezett listajel méretét, hogy olvashatóbbá tegyék. A Firefox még speciális betűtípust is használ, -moz-bullet-font, a jelölőhöz.

Megoldható a kis méret probléma CSS-sel? A tesztoldalamon kapcsolja be a marker stílusát, és figyelje meg, mi történik, ha megváltoztatja a font-size, line-heightés font-family a marker.

Mint látható, növelve a font-size az egyéni jelölő függőleges eltolódását okozza, és ez nem javítható a line-height Az vertical-align tulajdonság, amely könnyen megoldhatja ezt a problémát, nem támogatott ::marker.

De észrevette-e, hogy megváltoztatja a font-family okozhat a marker nagyobbá válását? Próbáld meg beállítani Tahoma. Ez valószínűleg elég jó megoldás lehet a kis méretű probléma megoldására, bár még nem teszteltem, hogy melyik betűtípus működik a legjobban a főbb böngészőkben és operációs rendszerekben.

Azt is észrevette, hogy a Chromium-hiba többé nem fordul elő, amikor a jelölőt a listaelemen belül helyezi el. Ez azt jelenti, hogy egy egyéni jelölő megoldásként szolgálhat erre a hibára. És ez elvezet a fő problémához, és ahhoz, hogy miért kezdtem kutatni ebben a témában. Ha egyéni jelölőt definiál, és a listaelemen belül helyezi el, akkor nem marad rés a jelölő után, és nincs mód arra, hogy szabványos módon hézagot szúrjon be.

1. Az egyéni markerek után nincs minimális rés.
2. ::marker nem támogatja padding or margin.
3. padding-left on <li> nem növeli a rést, mivel a marker el van helyezve inside.

Összegzésként

Íme egy összefoglaló a cikkben említett legfontosabb tényekről:

1. A böngészők alapértelmezést alkalmaznak padding-inline-start of 40px nak nek <ul> és a <ol> elemek.
2. A beépített listajelzők után van egy minimális hézag (disc, decimalstb.). Az egyéni jelölők (karakterlánc vagy URL) után nincs minimális hézag.
3. A rés hossza a hozzáadásával növelhető padding-left nak nek <ul>, de csak akkor, ha a jelölő a listaelemen kívül van (az alapértelmezett mód).
4. Az egyéni karakterlánc-jelölők alapértelmezett mérete kisebb, mint a beépített markerek. Változása a font-family on ::marker növelhetik méretüket.

Következtetés

Visszatekintve a cikk eleji kódpéldára, azt hiszem, most már értem, miért van szóköz karakter a content érték. Nincs jobb módja annak, hogy az SVG-jelölő után rést szúrjunk be. Ez egy megoldás, amelyre szükség van, mert nincs mennyiség margin és a padding rést hozhat létre a listaelemen belül elhelyezett egyéni jelölő után. A margin-right on ::marker könnyen megteheti, de ez nem támogatott.

Amíg ::marker további tulajdonságok támogatásával a webfejlesztőknek gyakran nincs más választásuk, mint elrejteni a jelölőt és emulálni egy ::before pszeudo-elem. Nemrég magamnak is meg kellett tennem, mert nem tudtam megváltoztatni a jelzőt background-color. Remélhetőleg nem kell sokat várnunk egy erősebbre ::marker pszeudo-elem.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/