Vse, kar morate vedeti o vrzeli za oznako seznama

bral sem »Slog ustvarjalnega seznama« na Googlovem blogu web.dev in opazil nekaj čudnega v enem od primerov kode v ::marker del članka. Vgrajeni označevalci seznama so oznake, zaporedne številke in črke. The ::marker psevdoelement nam omogoča, da te oznake stiliziramo ali jih nadomestimo z znakom ali sliko po meri.

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

Primer, ki je pritegnil mojo pozornost, uporablja ikono SVG kot oznako po meri za elemente seznama. Obstaja pa tudi en presledek (" ") v vrednosti CSS poleg url() funkcijo. Zdi se, da je namen tega prostora vstaviti vrzel za oznako po meri.

Ko sem videl to kodo, sem se takoj vprašal, ali obstaja boljši način za ustvarjanje vrzeli. Dodajanje presledka k content se zdi bolj rešitev kot optimalna rešitev. CSS ponuja margin in padding in druge standardne načine za razmik elementov na strani. Ali nobene od teh lastnosti ni mogoče uporabiti v tej situaciji?

Najprej sem poskusil zamenjati presledek z ustreznim robom:

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

To ni delovalo. Kot se izkaže, ::marker podpira samo a majhen nabor lastnosti CSS, ki so večinoma povezane z besedilom. Na primer, lahko spremenite font-size in color oznake in določite oznako po meri z nastavitvijo content na niz ali URL, kot je prikazano zgoraj. Toda margin in padding lastnosti so ne podpira, zato njihova nastavitev nima učinka. Kakšno razočaranje.

Ali je res mogoče, da je presledek edini način za vstavljanje vrzeli za oznako po meri? Moral sem izvedeti. Ko sem raziskoval to temo, sem prišel do nekaj zanimivih odkritij, ki bi jih rad delil v tem članku.

Dodajanje oblazinjenja in robov

Najprej potrdimo, kaj margin in padding narediti na <ul> in <li> elementi. V ta namen sem ustvaril testno stran. Povlecite ustrezne drsnike in opazujte učinek na razmik na vsaki strani oznake seznama. Nasvet: obilno uporabite gumb Ponastavi, da ponastavite vse kontrolnike na začetne vrednosti.

Opomba: Brskalniki uporabijo privzeto padding-inline-left of 40px do <ol> in <ul> elementi. Logično padding-inline-left premoženje je enakovredno fizičnemu padding-left lastnost v pisnih sistemih s smerjo v vrstici od leve proti desni. V tem članku bom zaradi poenostavitve uporabil fizikalne lastnosti.

Kot lahko vidite, padding-left on <li> poveča vrzel za oznako seznama. Druge tri lastnosti nadzirajo razmik levo od označevalca, z drugimi besedami, zamik elementa seznama.

Upoštevajte, da tudi ko je element seznama padding-left is 0px, je za markerjem še vedno minimalna vrzel. Te vrzeli ni mogoče zmanjšati z margin or padding. Natančna dolžina minimalne vrzeli je odvisna od brskalnika.

Če povzamemo, vsebina elementa seznama je nameščena na minimalni razdalji, ki je specifična za brskalnik, od oznake, to vrzel pa je mogoče še povečati z dodajanjem padding-left do <li>.

Nato poglejmo, kaj se zgodi, ko postavimo marker v notranjosti predmet seznama.

Premikanje označevalca znotraj elementa seznama

O list-style-position Lastnost sprejema dve ključni besedi: outside, kar je privzeto, in inside, ki premakne oznako znotraj elementa seznama. Slednje je uporabno za ustvarjanje modelov z elementi seznama polne širine.

Če je oznaka zdaj v notranjosti element seznama, ali to pomeni, da padding-left on <li> ne povečuje več vrzeli za markerjem? Pa ugotovimo. Na moji testni strani vklopite list-style-position: inside prek potrditvenega polja. Kako so štirje padding in margin lastnosti, na katere vpliva ta sprememba?

Kot lahko vidite, padding-left on <li> zdaj poveča razmik na levo markerja. To pomeni, da smo izgubili možnost povečanja vrzeli za markerjem. V tej situaciji bi bilo koristno, če bi lahko dodali margin-right k ::marker sama, vendar to ne deluje, kot smo ugotovili zgoraj.

Poleg tega obstaja a napaka v Chromiumu ki povzroči vrzel za oznako trojni po preklopu na inside pozicioniranje. Privzeto je dolžina vrzeli približno ena tretjina velikosti besedila. Torej privzeto font-size of 16px, vrzel je približno 5.5px. Po preklopu na inside, vrzel se poveča do konca 16px v Chromu. Ta napaka vpliva na disc, circlein square markerji, ampak ne označevalci zaporednih številk.

Naslednja slika prikazuje privzeto upodabljanje zunanjih in notranjih oznak seznama v treh glavnih brskalnikih v sistemu macOS. Za vaše udobje sem vodoravno poravnal vse elemente seznama na njihove oznake, da olajšam primerjavo razlik v velikostih vrzeli.

Če povzamem, preklop na list-style-position: inside predstavlja dve težavi. Ne moremo več povečati vrzeli prek padding-left on <li>, velikost vrzeli pa ni skladna med brskalniki.

Nazadnje poglejmo, kaj se zgodi, ko zamenjamo privzeto oznako seznama z oznako po meri.

Preklop na označevalec po meri

Obstajata dva načina za opredelitev a marker po meri:

• list-style-type in list-style-image Lastnosti
• content lastnina na ::marker psevdoelement

O content lastnina je močnejša. Na primer, omogoča nam uporabo counter() funkcija za dostop do redne številke elementa seznama ( implicitno list-item preprečevanje) in ga okrasite z vrvicami po meri.

Na žalost Safari ne podpira content lastnina na ::marker še (Napaka WebKit). Iz tega razloga bom uporabil list-style-type lastnost za definiranje oznake po meri. Še vedno lahko uporabljate ::marker izbirnik za oblikovanje oznake po meri, deklarirane prek list-style-type. Ta vidik ::marker je podprt v Safariju.

Vsak znak Unicode lahko potencialno služi kot označevalec seznama po meri, vendar ima le majhen nabor znakov dejansko »Bullet« v svojem uradnem imenu, zato sem mislil, da jih bom zbral tukaj za referenco.

Znaki	Ime	Kodna točka	ključna beseda CSS
•	Bullet	U+2022	disc
‣	Trikotna krogla	U+2023
⁃	Vezaj Bullet	U+2043
⁌	Črna krogla levo	U+204C
⁍	Črna krogla desno	U+204D
◘	Inverzna krogla	U+25D8
◦	Bela krogla	U+25E6	circle
☙	Obrnjeno zasukana krogla s cvetličnim srcem	U+2619
❥	Rotirana težka krogla s črnim srcem	U+2765
❧	Krogla z zasukanim cvetličnim srcem	U+2767
⦾	Obkrožena bela krogla	U+29BE
⦿	Obkrožena krogla	U+29BF

Opomba: CSS square ključna beseda nima ustreznega znaka »Bullet« v Unicode. Lik, ki se mu najbolj približa, je emoji črnega kvadrata (▪️) (U+25AA).

Zdaj pa poglejmo, kaj se zgodi, ko zamenjamo privzeto oznako seznama z list-style-type: "•" (U+2022 Metka). To je isti znak kot privzeta oznaka, zato ne bi smelo biti večjih razlik pri upodabljanju. Na moji testni strani vklopite list-style-type možnost in opazujte morebitne spremembe markerja.

Kot lahko vidite, sta dve pomembni spremembi:

1. Za markerjem ni več minimalne vrzeli.
2. Krogla je postala manjša, kot da bi bila manjša font-size.

Glede na Slogi števca CSS, raven 3, privzeti označevalec seznama (disc) mora biti »podoben • U+2022 METKA”. Zdi se, da brskalniki povečajo velikost privzete oznake, da postane bolj berljiva. Firefox uporablja celo posebno pisavo, -moz-bullet-font, za marker.

Ali je težavo z majhno velikostjo mogoče odpraviti s CSS? Na moji testni strani vklopite stil označevalca in opazujte, kaj se zgodi, ko spremenite font-size, line-heightin font-family markerja.

Kot lahko vidite, povečanje font-size povzroči, da oznaka po meri postane navpično neporavnana in tega ni mogoče popraviti z zmanjšanjem line-height. vertical-align Lastnost, ki bi zlahka odpravila to težavo, ni podprta na ::marker.

Toda ali ste opazili, da spreminjanje font-family lahko povzroči, da se oznaka poveča? Poskusite ga nastaviti na Tahoma. To bi lahko bila dovolj dobra rešitev za težavo z majhno velikostjo, čeprav nisem preizkusil, katera pisava najbolje deluje v glavnih brskalnikih in operacijskih sistemih.

Morda ste tudi opazili, da se napaka v Chromiumu ne pojavi več, ko postavite oznako znotraj elementa seznama. To pomeni, da lahko oznaka po meri služi kot rešitev za to napako. In to me pripelje do glavnega problema in razloga, zakaj sem začel raziskovati to temo. Če definirate oznako po meri in jo postavite znotraj elementa seznama, za oznako ni nobene vrzeli in ni možnosti, da bi jo vstavili na standarden način.

1. Za oznakami po meri ni minimalne vrzeli.
2. ::marker ne podpira padding or margin.
3. padding-left on <li> ne poveča vrzeli, saj je marker nameščen inside.

Povzetek

Tukaj je povzetek vseh ključnih dejstev, ki sem jih omenil v članku:

1. Brskalniki uporabijo privzeto padding-inline-start of 40px do <ul> in <ol> elemente.
2. Za vgrajenimi oznakami seznama je minimalna vrzel (disc, decimalitd.). Za označevalci po meri (niz ali URL) ni minimalne vrzeli.
3. Dolžino vrzeli lahko povečate z dodajanjem a padding-left do <ul>, vendar le, če je oznaka postavljena izven elementa seznama (privzeti način).
4. Merilniki nizov po meri imajo manjšo privzeto velikost kot vgrajeni markerji. Spreminjanje font-family on ::marker lahko povečajo njihovo velikost.

zaključek

Če pogledam nazaj na primer kode z začetka članka, mislim, da zdaj razumem, zakaj je v content vrednost. Preprosto ni boljšega načina za vstavljanje vrzeli za oznako SVG. To je rešitev, ki je potrebna, ker nobena količina margin in padding lahko ustvari vrzel za oznako po meri, ki je nameščena znotraj elementa seznama. A margin-right on ::marker bi to zlahka naredil, vendar to ni podprto.

Do ::marker doda podporo za več lastnosti, spletnim razvijalcem pogosto ne bo preostalo drugega, kot da skrijejo oznako in jo posnemajo z ::before psevdoelement. Pred kratkim sem moral to narediti sam, ker nisem mogel spremeniti markerja background-color. Upajmo, da nam na močnejšega ne bo treba predolgo čakati ::marker psevdoelement.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/