Kõik, mida pead teadma tühimiku kohta pärast loendimarkerit

ma lugesin "Loovuse loendi stiil" Google'i web.dev ajaveebis ja märkasin ühes koodinäites midagi veidrat ::marker artikli osa. Sisseehitatud loendi markerid on täpid, järjekorranumbrid ja tähed. The ::marker pseudoelement võimaldab meil neid markereid stiilida või asendada kohandatud märgi või pildiga.

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

Minu tähelepanu köitnud näide kasutab loendiüksuste jaoks kohandatud markerina SVG-ikooni. Kuid seal on ka üks tühikumärk (" ") kõrval olevas CSS-i väärtuses url() funktsiooni. Selle tühiku eesmärk näib olevat sisestada kohandatud markeri järele tühik.

Kui ma seda koodi nägin, mõtlesin kohe, kas lünkade tekitamiseks on parem viis. Tühiku lisamine content tundub pigem lahendus kui optimaalne lahendus. CSS pakub margin ja padding ja muud standardsed viisid lehel elementide eraldamiseks. Kas ühtegi neist omadustest ei saaks antud olukorras kasutada?

Esiteks proovisin asendada tühiku õige veerisega:

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

See ei toiminud. Nagu selgub, ::marker toetab ainult a väike komplekt peamiselt tekstiga seotud CSS-i atribuute. Näiteks saate muuta font-size ja color ja määrake kohandatud marker sätte abil content stringile või URL-ile, nagu ülal näidatud. Kuid margin ja padding omadused on ei toetata, mistõttu nende seadistamine ei mõjuta. Milline pettumus.

Kas võib tõesti olla, et tühik on ainus viis kohandatud markeri järel tühiku sisestamiseks? Mul oli vaja teada saada. Seda teemat uurides tegin paar huvitavat avastust, mida soovin selles artiklis jagada.

Polsterduse ja veeriste lisamine

Kõigepealt kinnitame, mida margin ja padding tee peal <ul> ja <li> elemendid. Olen loonud selleks katselehe. Lohistage vastavaid liugureid ja jälgige loendimarkeri mõlemal küljel olevate vahekauguste mõju. Näpunäide. Kõigi juhtelementide algväärtuste lähtestamiseks kasutage rohkelt nuppu Lähtesta.

Märge: Brauserid rakendavad vaikeseadet padding-inline-left of 40px et <ol> ja <ul> elemendid. Loogiline padding-inline-left vara on samaväärne füüsilisega padding-left omadus kirjutussüsteemides sisesuunaga vasakult paremale. Selles artiklis kasutan lihtsuse huvides füüsilisi omadusi.

Nagu näete, padding-left on <li> suurendab tühikut pärast loendi markerit. Ülejäänud kolm atribuuti juhivad vahekaugust markerist vasakul, teisisõnu loendiüksuse taanet.

Pange tähele, et isegi siis, kui loendi üksus on padding-left is 0px, jääb markeri järel veel minimaalne vahe. Seda vahet ei saa vähendada margin or padding. Minimaalse vahe täpne pikkus sõltub brauserist.

Kokkuvõtteks võib öelda, et loendi üksuse sisu paikneb brauserispetsiifilisel minimaalsel kaugusel markerist ja seda lünka saab veelgi suurendada, lisades padding-left et <li>.

Järgmisena vaatame, mis juhtub markeri positsioneerimisel sees loendi üksus.

Markeri liigutamine loendiüksuse sees

. list-style-position atribuut aktsepteerib kahte märksõna: outside, mis on vaikeseade ja inside, mis liigutab markerit loendiüksuse sees. Viimane on kasulik täislaiuste loendiüksustega kujunduste loomiseks.

Kui marker on praegu sees loendi üksus, kas see tähendab seda padding-left on <li> ei suurenda enam vahet pärast markerit? Uurime välja. Minu testlehel lülitage sisse list-style-position: inside märkeruudu kaudu. Kuidas neil neljal läheb padding ja margin omadused, mida see muudatus mõjutab?

Nagu näete, padding-left on <li> suurendab nüüd vahekaugust kuni lahkus markerist. See tähendab, et oleme kaotanud võimaluse suurendada vahet pärast markerit. Sellises olukorras oleks kasulik, kui saaks lisada margin-right Euroopa ::marker ise, kuid see ei tööta, nagu me eespool tuvastasime.

Lisaks on seal a Chromiumi viga mis põhjustab markeri järgse tühiku kolmekordne peale üleminekut inside positsioneerimine. Vaikimisi on vahe pikkus umbes üks kolmandik teksti suurusest. Nii et vaikimisi font-size of 16px, vahe on umbes 5.5px. Pärast üleminekut inside, vahe kasvab täiega 16px Chrome'is. See viga mõjutab disc, circleja square markerid, kuid mitte järjekorranumbri markerid.

Järgmine pilt näitab väljastpoolt ja sees paiknevate loendimarkerite vaikerenderdust kolmes suuremas macOS-i brauseris. Teie mugavuse huvides joondasin kõik loendi üksused nende markeritel horisontaalselt, et oleks lihtsam lünkade suuruste erinevusi võrrelda.

Kokkuvõtteks üleminek list-style-position: inside toob kaasa kaks probleemi. Me ei saa enam vahet suurendada padding-left on <li>, ja vahe suurus on brauserite vahel ebaühtlane.

Lõpuks vaatame, mis juhtub, kui asendame loendi vaikemarkeri kohandatud markeriga.

Kohandatud markerile lülitumine

A defineerimiseks on kaks võimalust kohandatud marker:

• list-style-type ja list-style-image omadused
• content kinnistul ::marker pseudoelement

. content vara on võimsam. Näiteks võimaldab see meil kasutada counter() funktsioon, et pääseda juurde loendi üksuse järjekorranumbrile ( kaudselt list-item võidelda) ja kaunista see kohandatud paeltega.

Kahjuks Safari seda ei toeta content vara peal ::marker veel (WebKiti viga). Sel põhjusel kavatsen ma kasutada list-style-type atribuut kohandatud markeri määratlemiseks. Saate endiselt kasutada ::marker kaudu deklareeritud kohandatud markeri stiili valija list-style-type. See aspekt ::marker on Safaris toetatud.

Kõik Unicode'i tähemärgid võivad potentsiaalselt olla kohandatud loendimarkerid, kuid ainult väikese märkide komplekti ametlikus nimes on "Bullet", nii et mõtlesin, et koostan need siia viitamiseks.

Iseloom	Nimi	Koodipunkt	CSS-i märksõna
•	Kuul	U+2022	disc
‣	Kolmnurkne kuul	U+2023
⁃	Sidekriips Bullet	U+2043
⁌	Must vasakpoolne täpp	U+204C
⁍	Must paremale suunatud kuul	U+204D
◘	Pöördtäpp	U+25D8
◦	Valge kuul	U+25E6	circle
☙	Tagurpidi pööratud lillesüdamekuul	U+2619
❥	Rotated Heavy Black Heart Bullet	U+2765
❧	Rotated Floral Heart Bullet	U+2767
⦾	Ringiga valge täpp	U+29BE
⦿	Ringitud täpp	U+29BF

Märge: CSS square märksõnal puudub Unicode'is vastav "Bullet" märk. Kõige lähemal olev tegelane on Black Small Square (▪️) emotikon (U+25AA).

Nüüd vaatame, mis juhtub, kui asendame loendi vaikemarkeri märgiga list-style-type: "•" (U+2022 Täpp). See on sama märk kui vaiketäpp, seega ei tohiks olla suuri renderdamiserinevusi. Minu testlehel lülitage sisse list-style-type valikut ja jälgige markeri muudatusi.

Nagu näete, on kaks olulist muudatust:

1. Pärast markerit pole enam minimaalset vahet.
2. Kuul on muutunud väiksemaks, nagu oleks see väiksemaga renderdatud font-size.

Järgi CSS-i loenduri stiilid, 3. tase, loendi vaikemarker (disc) peaks olema „sarnane • U+2022 KUUL”. Näib, et brauserid suurendavad vaiketäpi suurust, et muuta see loetavamaks. Firefox kasutab isegi spetsiaalset fonti, -moz-bullet-font, markeri jaoks.

Kas väikese suuruse probleemi saab CSS-iga parandada? Lülitage minu testlehel sisse markeri stiil ja jälgige, mis juhtub, kui muudate font-size, line-heightja font-family markerist.

Nagu näete, suurendades font-size põhjustab kohandatud markeri vertikaalse joondamise ja seda ei saa parandada, vähendades line-height. vertical-align atribuuti, mis võiks selle probleemi hõlpsalt lahendada, ei toetata ::marker.

Kuid kas märkasite, et muutes font-family kas marker võib muutuda suuremaks? Proovige seda seadistada Tahoma. See võib olla piisavalt hea lahendus väikese suurusega probleemile, kuigi ma pole testinud, milline font töötab suuremates brauserites ja operatsioonisüsteemides kõige paremini.

Võib-olla olete ka märganud, et Chromiumi viga ei esine enam, kui asetate markeri loendiüksuse sisse. See tähendab, et kohandatud marker võib olla selle vea lahendamiseks. Ja see viib mind põhiprobleemi ja põhjuseni, miks ma seda teemat uurima hakkasin. Kui määrate kohandatud markeri ja asetate selle loendiüksuse sisse, ei jää markeri järel tühikut ega võimalust standardsete vahenditega lünka sisestada.

1. Pärast kohandatud markereid pole minimaalset vahet.
2. ::marker ei toeta padding or margin.
3. padding-left on <li> ei suurenda vahet, kuna marker on paigutatud inside.

kokkuvõte

Siin on kokkuvõte kõigist peamistest faktidest, mida olen artiklis maininud:

1. Brauserid rakendavad vaikeseadet padding-inline-start of 40px et <ul> ja <ol> elemente.
2. Sisseehitatud loendimarkerite järel on minimaalne vahe (disc, decimal, jne.). Kohandatud markerite (string või URL) järel ei ole minimaalset vahet.
3. Vahe pikkust saab suurendada, lisades a padding-left et <ul>, kuid ainult siis, kui marker asub väljaspool loendi üksust (vaikerežiim).
4. Kohandatud stringimarkeritel on väiksem vaikesuurus kui sisseehitatud markeritel. Muutes font-family on ::marker võivad nende suurust suurendada.

Järeldus

Vaadates tagasi koodinäidet artikli algusest, arvan, et saan nüüd aru, miks on tekstis tühikumärk content väärtus. Pole lihtsalt paremat viisi SVG-markeri järel tühiku sisestamiseks. See on lahendus, mis on vajalik, kuna puudub kogus margin ja padding saab luua tühimiku pärast kohandatud markerit, mis asub loendiüksuse sees. A margin-right on ::marker saaks seda hõlpsasti teha, kuid seda ei toetata.

kuni ::marker lisab toe rohkematele atribuutidele, ei jää veebiarendajatel sageli muud valikut kui marker peita ja seda jäljendada ::before pseudoelement. Pidin seda hiljuti ise tegema, sest ma ei saanud markerit vahetada background-color. Loodetavasti ei pea me võimsamat liiga kaua ootama ::marker pseudoelement.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/