Kaikki mitä sinun tarvitsee tietää aukosta luettelomerkinnän jälkeen

olin lukemassa "Luovien luetteloiden tyyli" Googlen web.dev-blogissa ja huomasin jotain outoa yhdessä koodiesimerkeistä ::marker artikkelin osio. Sisäänrakennetut luettelomerkit ovat luettelomerkkejä, järjestysnumeroita ja kirjaimia. The ::marker pseudoelementin avulla voimme muokata näitä merkkejä tai korvata ne mukautetulla merkillä tai kuvalla.

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

Huomioni kiinnittänyt esimerkki käyttää SVG-kuvaketta mukautettuna merkinnänä luettelon kohteille. Mutta siellä on myös yksi välilyöntimerkki (" ") CSS-arvossa vieressä url() toiminto. Tämän tilan tarkoitus näyttää olevan lisätä rako mukautetun merkin jälkeen.

Kun näin tämän koodin, mietin heti, olisiko olemassa parempaa tapaa luoda aukko. Lisätään välilyönti content tuntuu enemmän kiertotavan kuin optimaaliselta ratkaisulta. CSS tarjoaa margin ja padding ja muita tavallisia tapoja erottaa elementtejä sivulta. Eikö mitään näistä ominaisuuksista voitaisi käyttää tässä tilanteessa?

Ensin yritin korvata välilyönnin oikealla marginaalilla:

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

Tämä ei toiminut. Kuten käy ilmi, ::marker tukee vain a pieni joukko enimmäkseen tekstiin liittyviä CSS-ominaisuuksia. Voit esimerkiksi muuttaa font-size ja color ja määritä mukautettu merkki asettamalla content merkkijonoon tai URL-osoitteeseen, kuten yllä näkyy. Mutta margin ja padding ominaisuudet ovat ei tueta, joten niiden asettamisella ei ole vaikutusta. Mikä pettymys.

Voisiko todella olla, että välilyönti on ainoa tapa lisätä väli mukautetun merkin jälkeen? Minun piti ottaa selvää. Tutkiessani tätä aihetta tein muutaman mielenkiintoisen löydön, jotka haluaisin jakaa tässä artikkelissa.

Lisää täyte ja marginaalit

Ensin vahvistetaan mitä margin ja padding tee päällä <ul> ja <li> elementtejä. Olen luonut testisivun tätä tarkoitusta varten. Vedä asianmukaisia ​​liukusäätimiä ja tarkkaile vaikutusta luettelomerkinnän kummallakin puolella olevaan väliin. Vihje: Käytä Reset-painiketta runsaasti palauttaaksesi kaikki säätimet alkuperäisiin arvoihinsa.

Huomautus: Selaimet käyttävät oletusasetusta padding-inline-left of 40px että <ol> ja <ul> elementtejä. Looginen padding-inline-left omaisuus vastaa fyysistä padding-left ominaisuus kirjoitusjärjestelmissä, joiden rivisuunta on vasemmalta oikealle. Tässä artikkelissa aion käyttää fyysisiä ominaisuuksia yksinkertaisuuden vuoksi.

Kuten näette, padding-left on <li> lisää aukkoa listamerkin jälkeen. Muut kolme ominaisuutta ohjaavat merkin vasemmalla puolella olevaa välilyöntiä, toisin sanoen listakohteen sisennystä.

Huomaa, että vaikka luettelon kohde olisi padding-left is 0px, merkin jälkeen on vielä vähimmäisrako. Tätä eroa ei voi pienentää margin or padding. Vähimmäisvälin tarkka pituus riippuu selaimesta.

Yhteenvetona voidaan todeta, että luettelokohteen sisältö on sijoitettu selainkohtaiselle vähimmäisetäisyydelle merkistä, ja tätä aukkoa voidaan edelleen lisätä lisäämällä padding-left että <li>.

Katsotaan seuraavaksi, mitä tapahtuu, kun asetamme merkin sisällä luettelon kohde.

Merkin siirtäminen luettelokohteen sisällä

- list-style-position omaisuus hyväksyy kaksi avainsanaa: outside, joka on oletusarvo, ja inside, joka siirtää merkkiä luettelokohteen sisällä. Jälkimmäinen on hyödyllinen luotaessa malleja, joissa on kokoleveät luettelokohteet.

Jos merkki on nyt sisällä luettelon kohde, tarkoittaako tämä sitä padding-left on <li> ei enää lisää eroa merkin jälkeen? Otetaan selvää. Käynnistä testisivullani list-style-position: inside valintaruudun kautta. Miten ne neljä padding ja margin ominaisuuksia, joihin tämä muutos vaikuttaa?

Kuten näette, padding-left on <li> lisää nyt väliä arvoon vasemmalle merkistä. Tämä tarkoittaa, että olemme menettäneet kyvyn kasvattaa eroa merkin jälkeen. Tässä tilanteessa olisi hyödyllistä pystyä lisäämään margin-right että ::marker itse, mutta se ei toimi, kuten olemme todenneet edellä.

Lisäksi siellä on a bugi Chromiumissa mikä aiheuttaa merkin jälkeisen aukon kolminkertainen vaihtamisen jälkeen inside paikannus. Oletusarvoisesti välin pituus on noin kolmasosa tekstin koosta. Oletusarvolla siis font-size of 16px, ero on noin 5.5px. Vaihtamisen jälkeen inside, aukko kasvaa täyteen 16px Chromessa. Tämä bugi vaikuttaa disc, circleja square merkit, mutta ei järjestyslukumerkit.

Seuraava kuva näyttää ulko- ja sisäpuolella olevien luettelomerkkien oletusmuodon kolmessa suurimmassa macOS:n selaimessa. Olen kohdistanut kaikki luettelon kohteet vaakasuoraan merkintöihinsä helpottaakseni aukkojen kokojen erojen vertailua.

Yhteenvetona, siirtyminen list-style-position: inside tuo kaksi ongelmaa. Emme voi enää kasvattaa kuilua kautta padding-left on <li>, ja eron koko on epäjohdonmukainen selainten välillä.

Katsotaan lopuksi, mitä tapahtuu, kun korvaamme oletusluettelomerkinnän mukautetulla merkinnällä.

Vaihtaminen mukautettuun merkintään

On kaksi tapaa määritellä a mukautettu merkki:

• list-style-type ja list-style-image ominaisuudet
• content omaisuutta ::marker pseudoelementti

- content omaisuus on vahvempi. Sen avulla voimme esimerkiksi käyttää counter() toiminto, jolla pääset luettelokohteen järjestysnumeroon ( implisiittinen list-item torjua) ja koristele se mukautetuilla naruilla.

Valitettavasti Safari ei tue content omaisuus päällä ::marker vielä (WebKit bugi). Tästä syystä aion käyttää list-style-type ominaisuutta mukautetun merkin määrittämiseen. Voit silti käyttää ::marker -valitsimen kautta ilmoittaman mukautetun merkin tyyliin list-style-type. Se puoli ::marker on tuettu Safarissa.

Mikä tahansa Unicode-merkki voi mahdollisesti toimia mukautettuna luettelomerkintänä, mutta vain pienessä joukossa merkkejä on tosiasiallisesti "Bullet" virallisessa nimessä, joten ajattelin koota ne tänne viitteeksi.

Merkki	Nimi	Koodipiste	CSS-avainsana
•	luoti	U+2022	disc
‣	Kolmion muotoinen luoti	U+2023
⁃	Tavumerkki Bullet	U+2043
⁌	Musta vasen luoti	U+204C
⁍	Musta oikealle suunnattu luoti	U+204D
◘	Käänteinen luoti	U+25D8
◦	Valkoinen luoti	U+25E6	circle
☙	Käänteinen pyörivä kukkainen sydänluoti	U+2619
❥	Kierretty raskas musta sydänluoti	U+2765
❧	Kierretty kukkainen sydänluoti	U+2767
⦾	Ympyröity valkoinen luoti	U+29BE
⦿	Ympyröity luoti	U+29BF

Huomautus: CSS square avainsanalla ei ole vastaavaa "Bullet"-merkkiä Unicodessa. Lähimpänä oleva hahmo on Black Small Square (▪️) emoji (U+25AA).

Katsotaan nyt, mitä tapahtuu, kun korvaamme oletusluettelomerkinnän list-style-type: "•" (U+2022 Luoti). Tämä on sama merkki kuin oletusmerkki, joten suuria renderöintieroja ei pitäisi olla. Ota testisivullani käyttöön list-style-type vaihtoehto ja tarkkaile merkin muutoksia.

Kuten näet, on kaksi merkittävää muutosta:

1. Merkin jälkeen ei ole enää vähimmäisrakoa.
2. Luoti on pienentynyt, ikään kuin se olisi tehty pienemmällä font-size.

Mukaan CSS-laskurityylit, taso 3, oletusluettelomerkki (disc) tulee olla ”samanlainen kuin • U+2022 LUODIN”. Näyttää siltä, ​​että selaimet lisäävät oletusmerkin kokoa tehdäkseen siitä luettavamman. Firefox käyttää jopa erityistä fonttia, -moz-bullet-font, merkkiä varten.

Voiko pienen koon ongelman korjata CSS:llä? Ota testisivullani käyttöön merkkien tyyli ja tarkkaile, mitä tapahtuu, kun muutat font-size, line-heightja font-family merkistä.

Kuten näette, lisäämällä font-size aiheuttaa mukautetun merkin pystysuoran kohdistusvirheen, eikä tätä voi korjata pienentämällä line-height. vertical-align ominaisuutta, joka voisi helposti korjata tämän ongelman, ei tueta ::marker.

Mutta oletko huomannut, että muuttavat font-family voiko merkki kasvaa? Kokeile asettaa se Tahoma. Tämä saattaa olla riittävän hyvä ratkaisu pienikokoiseen ongelmaan, vaikka en ole testannut, mikä kirjasin toimii parhaiten yleisimmissä selaimissa ja käyttöjärjestelmissä.

Olet ehkä myös huomannut, että Chromium-virhettä ei enää esiinny, kun asetat merkin luettelokohteen sisään. Tämä tarkoittaa, että mukautettu merkki voi toimia tämän virheen kiertotapana. Ja tämä johtaa minut pääongelmaan ja syyn, miksi aloin tutkia tätä aihetta. Jos määrität mukautetun merkin ja sijoitat sen luettelokohteen sisälle, merkin jälkeen ei ole aukkoa eikä mahdollisuutta lisätä aukkoa vakiokeinoilla.

1. Mukautettujen merkkien jälkeen ei ole vähimmäisrakoa.
2. ::marker ei tue padding or margin.
3. padding-left on <li> ei lisää rakoa, koska merkki on paikoillaan inside.

Yhteenveto

Tässä on yhteenveto kaikista tärkeimmistä faktoista, jotka olen maininnut artikkelissa:

1. Selaimet käyttävät oletusasetusta padding-inline-start of 40px että <ul> ja <ol> elementtejä.
2. Sisäänrakennettujen luettelomerkkien jälkeen on vähimmäisrako (disc, decimal, jne.). Muokattujen merkkien (merkkijono tai URL) jälkeen ei ole vähimmäisväliä.
3. Raon pituutta voidaan lisätä lisäämällä a padding-left että <ul>, mutta vain jos merkki on listakohteen ulkopuolella (oletustila).
4. Mukautettujen merkkijonomerkkien oletuskoko on pienempi kuin sisäänrakennetuilla merkeillä. Muuttaminen font-family on ::marker voivat kasvattaa niiden kokoa.

Yhteenveto

Kun katson taaksepäin koodiesimerkkiä artikkelin alusta, luulen ymmärtäväni nyt, miksi välilyönnissä on välilyöntimerkki. content arvo. Ei vain ole parempaa tapaa lisätä rakoa SVG-merkin jälkeen. Se on kiertotapa, jota tarvitaan, koska sitä ei ole margin ja padding voi luoda aukon mukautetun merkin jälkeen, joka on sijoitettu luettelokohteen sisään. A margin-right on ::marker voisi helposti tehdä sen, mutta sitä ei tueta.

Asti ::marker lisää tuen useille ominaisuuksille, verkkokehittäjillä ei usein ole muuta vaihtoehtoa kuin piilottaa merkintä ja emuloida sitä ::before pseudoelementti. Jouduin tekemään sen itse äskettäin, koska en voinut vaihtaa merkkiä background-color. Toivottavasti meidän ei tarvitse odottaa liian kauan tehokkaampaa ::marker pseudoelementti.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/