Tutto quello che c'è da sapere sul divario dopo l'indicatore di elenco

stavo leggendo "Stile dell'elenco creatività" sul blog web.dev di Google e ho notato qualcosa di strano in uno degli esempi di codice in ::marker sezione dell'articolo. Gli indicatori di elenco incorporati sono punti elenco, numeri ordinali e lettere. IL ::marker lo pseudo-elemento ci consente di modellare questi marcatori o sostituirli con un carattere o un'immagine personalizzati.

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

L'esempio che ha attirato la mia attenzione utilizza un'icona SVG come marcatore personalizzato per gli elementi dell'elenco. Ma c'è anche un singolo carattere di spazio (" ") nel valore CSS accanto a url() funzione. Lo scopo di questo spazio sembra essere quello di inserire uno spazio vuoto dopo il marcatore personalizzato.

Quando ho visto questo codice, mi sono subito chiesto se ci fosse un modo migliore per creare il divario. Aggiunta di uno spazio a content sembra più una soluzione alternativa che la soluzione ottimale. CSS fornisce margin ed padding e altri modi standard per distanziare gli elementi sulla pagina. Nessuna di queste proprietà potrebbe essere utilizzata in questa situazione?

Innanzitutto, ho provato a sostituire il carattere spazio con un margine appropriato:

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

Questo non ha funzionato. Come risulta, ::marker supporta solo a piccolo insieme di proprietà CSS per lo più relative al testo. Ad esempio, puoi modificare il file font-size ed color del marcatore e definire un marcatore personalizzato mediante l'impostazione content a una stringa o a un URL, come mostrato sopra. Ma il margin ed padding le proprietà sono non supportata, quindi impostarli non ha alcun effetto. Che delusione.

Potrebbe davvero essere che un carattere spazio sia l'unico modo per inserire uno spazio vuoto dopo un marcatore personalizzato? Avevo bisogno di scoprirlo. Durante le mie ricerche su questo argomento, ho fatto alcune scoperte interessanti che vorrei condividere in questo articolo.

Aggiunta di padding e margini

Innanzitutto, confermiamo cosa margin ed padding fare sul <ul> ed <li> elementi. Ho creato una pagina di prova per questo scopo. Trascina i cursori pertinenti e osserva l'effetto sulla spaziatura su ciascun lato dell'indicatore di elenco. Suggerimento: utilizzare liberamente il pulsante Ripristina per ripristinare tutti i controlli ai valori iniziali.

Nota: I browser applicano un valore predefinito padding-inline-left of 40px a <ol> ed <ul> elementi. Il logico padding-inline-left la proprietà è equivalente al fisico padding-left proprietà nei sistemi di scrittura con una direzione in linea da sinistra a destra. In questo articolo, userò le proprietà fisiche per semplicità.

Come si può vedere, padding-left on <li> aumenta lo spazio dopo il marcatore di elenco. Le altre tre proprietà controllano la spaziatura a sinistra del marcatore, in altre parole, il rientro dell'elemento dell'elenco.

Si noti che anche quando la voce dell'elenco è padding-left is 0px, c'è ancora uno spazio minimo dopo il marcatore. Questo divario non può essere ridotto con margin or padding. La lunghezza esatta della distanza minima dipende dal browser.

Per riassumere, il contenuto dell'elemento dell'elenco è posizionato a una distanza minima specifica del browser dall'indicatore e questo spazio può essere ulteriormente aumentato aggiungendo un padding-left a <li>.

Successivamente, vediamo cosa succede quando posizioniamo il marcatore interno la voce di elenco.

Spostare il marcatore all'interno dell'elemento dell'elenco

I list-style-position proprietà accetta due parole chiave: outside, che è l'impostazione predefinita, e inside, che sposta l'indicatore all'interno dell'elemento dell'elenco. Quest'ultimo è utile per creare progetti con voci di elenco a larghezza intera.

Se il marcatore è ora interno la voce dell'elenco, questo significa che padding-left on <li> non aumenta più il distacco dopo il marcatore? Scopriamolo. Nella mia pagina di test, attiva list-style-position: inside tramite la casella di controllo. Come stanno i quattro padding ed margin proprietà interessate da questo cambiamento?

Come si può vedere, padding-left on <li> ora aumenta la spaziatura al a sinistra del marcatore. Ciò significa che abbiamo perso la capacità di aumentare il distacco dopo il marcatore. In questa situazione, sarebbe utile poter aggiungere margin-right Vai all’email ::marker stesso, ma non funziona, come abbiamo stabilito sopra.

Inoltre, c'è un errore in Chromium che provoca il divario dopo il marcatore a triplo dopo il passaggio a inside posizionamento. Per impostazione predefinita, la lunghezza dello spazio vuoto è circa un terzo della dimensione del testo. Quindi a un valore predefinito font-size of 16px, il divario è di circa 5.5px. Dopo il passaggio a inside, il divario cresce al massimo 16px in Chrome. Questo bug riguarda il disc, circlee square marcatori, ma marcatori di numeri non ordinali.

L'immagine seguente mostra il rendering predefinito degli indicatori di elenco posizionati all'esterno e all'interno nei tre principali browser su macOS. Per tua comodità, ho allineato orizzontalmente tutti gli elementi dell'elenco sui rispettivi indicatori per semplificare il confronto delle differenze nelle dimensioni degli spazi.

Per riassumere, passare a list-style-position: inside introduce due problemi. Non possiamo più aumentare il divario via padding-left on <li>e la dimensione del divario non è coerente tra i browser.

Infine, vediamo cosa succede quando sostituiamo il marcatore elenco predefinito con un marcatore personalizzato.

Passare a un marcatore personalizzato

Ci sono due modi per definire a marcatore personalizzato:

• list-style-type ed list-style-image proprietà
• content proprietà sul ::marker pseudo-elemento

I content la proprietà è più potente. Ad esempio, ci consente di utilizzare il counter() funzione per accedere al numero ordinale dell'elemento dell'elenco (the implicito list-item contrastare) e decoralo con stringhe personalizzate.

Sfortunatamente, Safari non supporta il content proprietà su ::marker ancora (Bug di WebKit). Per questo motivo, userò il list-style-type proprietà per definire il marcatore personalizzato. Puoi ancora usare il ::marker selettore per definire lo stile del marcatore personalizzato dichiarato tramite list-style-type. Quell'aspetto di ::marker è supportato in Safari.

Qualsiasi carattere Unicode può potenzialmente fungere da indicatore di elenco personalizzato, ma solo un piccolo set di caratteri ha effettivamente "Bullet" nel nome ufficiale, quindi ho pensato di compilarli qui come riferimento.

Carattere	Nome	Punto di codice	Parola chiave CSS
· XNUMX€	proiettile	U+2022	disc
‣	Proiettile Triangolare	U+2023
⁃	Trattino proiettile	U+2043
⁌	Proiettile nero verso sinistra	U+204C
⁍	Proiettile nero verso destra	U+204D
◘	Proiettile inverso	U+25D8
◦	Proiettile bianco	U+25E6	circle
☙	Proiettile a cuore floreale ruotato invertito	U+2619
❥	Proiettile cuore nero pesante ruotato	U+2765
❧	Proiettile cuore floreale ruotato	U+2767
⦾	Proiettile bianco cerchiato	U+29BE
⦿	Proiettile cerchiato	U+29BF

Nota: Il CSS square parola chiave non ha un corrispondente carattere "Bullet" in Unicode. Il carattere che si avvicina di più è l'emoji Quadratino Nero ( ▪️) (U+25AA).

Ora vediamo cosa succede quando sostituiamo l'indicatore di elenco predefinito con list-style-type: "•" (U+2022 Proiettile). Questo è lo stesso carattere del punto elenco predefinito, quindi non dovrebbero esserci differenze di rendering importanti. Nella mia pagina di test, attiva il list-style-type opzione e osservare eventuali modifiche al marcatore.

Come puoi vedere, ci sono due cambiamenti significativi:

1. Non c'è più uno spazio minimo dopo il marcatore.
2. Il proiettile è diventato più piccolo, come se fosse stato reso più piccolo font-size.

Secondo Stili contatore CSS livello 3, l'indicatore di elenco predefinito (disc) dovrebbe essere “simile a • U+2022 PROIETTILE". Sembra che i browser aumentino le dimensioni del punto elenco predefinito per renderlo più leggibile. Firefox utilizza persino un carattere speciale, -moz-bullet-font, per il marcatore.

Il problema delle piccole dimensioni può essere risolto con i CSS? Nella mia pagina di test, attiva lo stile dei marcatori e osserva cosa succede quando cambi il file font-size, line-heighte font-family del marcatore.

Come puoi vedere, aumentando il font-size fa sì che l'indicatore personalizzato diventi disallineato verticalmente e questo non può essere corretto diminuendo il line-height. vertical-align proprietà, che potrebbe facilmente risolvere questo problema, non è supportata su ::marker.

Ma hai notato che cambiando il file font-family può far diventare il marcatore più grande? Prova a impostarlo su Tahoma. Questa potrebbe potenzialmente essere una soluzione abbastanza buona per il problema di piccole dimensioni, anche se non ho testato quale carattere funziona meglio sui principali browser e sistemi operativi.

Potresti anche aver notato che il bug di Chromium non si verifica più quando posizioni il marcatore all'interno della voce dell'elenco. Ciò significa che un indicatore personalizzato può servire come soluzione alternativa per questo bug. E questo mi porta al problema principale e al motivo per cui ho iniziato a fare ricerche su questo argomento. Se definisci un marcatore personalizzato e lo posizioni all'interno dell'elemento dell'elenco, non c'è spazio dopo il marcatore e non c'è modo di inserire uno spazio con mezzi standard.

1. Non esiste uno spazio minimo dopo i marcatori personalizzati.
2. ::marker non supporta padding or margin.
3. padding-left on <li> non aumenta il divario, poiché il marker è posizionato inside.

Sommario

Ecco un riepilogo di tutti i fatti chiave che ho menzionato nell'articolo:

1. I browser applicano un valore predefinito padding-inline-start of 40px a <ul> ed <ol> elementi.
2. C'è uno spazio minimo dopo i marcatori di elenco incorporati (disc, decimal, eccetera.). Non esiste uno spazio minimo dopo i marcatori personalizzati (stringa o URL).
3. La lunghezza dello spazio può essere aumentata aggiungendo a padding-left a <ul>, ma solo se l'indicatore è posizionato all'esterno dell'elemento dell'elenco (la modalità predefinita).
4. I marcatori stringa personalizzati hanno una dimensione predefinita più piccola rispetto ai marcatori incorporati. Cambiare il font-family on ::marker possono aumentare le loro dimensioni.

Conclusione

Guardando indietro all'esempio di codice dall'inizio dell'articolo, penso di aver capito ora perché c'è un carattere di spazio in content valore. Non c'è modo migliore per inserire uno spazio vuoto dopo il marcatore SVG. È una soluzione alternativa necessaria perché nessuna quantità di margin ed padding può creare uno spazio vuoto dopo un indicatore personalizzato posizionato all'interno dell'elemento dell'elenco. UN margin-right on ::marker potrebbe facilmente farlo, ma non è supportato.

Fino a ::marker aggiunge il supporto per più proprietà, gli sviluppatori Web spesso non avranno altra scelta che nascondere il marcatore ed emularlo con a ::before pseudo-elemento. Ho dovuto farlo da solo di recente perché non potevo cambiare il pennarello background-color. Se tutto va bene, non dovremo aspettare troppo a lungo per un più potente ::marker pseudo-elemento.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/