Όλα όσα πρέπει να ξέρετε για το κενό μετά τον δείκτη λίστας

Διάβαζα “Δημιουργικό στυλ λίστας” στο ιστολόγιο web.dev της Google και παρατήρησε κάτι περίεργο σε ένα από τα παραδείγματα κώδικα στο ::marker ενότητα του άρθρου. Οι ενσωματωμένοι δείκτες λίστας είναι κουκκίδες, τακτικοί αριθμοί και γράμματα. ο ::marker Το ψευδοστοιχείο μας επιτρέπει να διαμορφώσουμε στυλ σε αυτούς τους δείκτες ή να τους αντικαταστήσουμε με έναν προσαρμοσμένο χαρακτήρα ή εικόνα.

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

Το παράδειγμα που τράβηξε την προσοχή μου χρησιμοποιεί ένα εικονίδιο SVG ως προσαρμοσμένο δείκτη για τα στοιχεία της λίστας. Αλλά υπάρχει επίσης ένας χαρακτήρας διαστήματος (" ") στην τιμή CSS δίπλα στο url() λειτουργία. Ο σκοπός αυτού του χώρου φαίνεται να είναι να εισαγάγει ένα κενό μετά τον προσαρμοσμένο δείκτη.

Όταν είδα αυτόν τον κωδικό, αναρωτήθηκα αμέσως αν υπήρχε καλύτερος τρόπος για να δημιουργήσω το κενό. Προσθήκη χώρου σε content μοιάζει περισσότερο ως λύση παρά ως βέλτιστη λύση. Το CSS παρέχει margin και padding και άλλους τυπικούς τρόπους για να διαχωρίσετε τα στοιχεία στη σελίδα. Δεν θα μπορούσε καμία από αυτές τις ιδιότητες να χρησιμοποιηθεί σε αυτήν την κατάσταση;

Αρχικά, προσπάθησα να αντικαταστήσω τον χαρακτήρα διαστήματος με ένα κατάλληλο περιθώριο:

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

Αυτό δεν λειτούργησε. Οπως φαίνεται, ::marker υποστηρίζει μόνο α μικρό σύνολο ιδιοτήτων CSS που σχετίζονται κυρίως με κείμενο. Για παράδειγμα, μπορείτε να αλλάξετε το font-size και color του δείκτη και ορίστε έναν προσαρμοσμένο δείκτη με τη ρύθμιση content σε μια συμβολοσειρά ή διεύθυνση URL, όπως φαίνεται παραπάνω. Αλλά το margin και padding ιδιότητες είναι Δεν υποστηρίζεται, επομένως η ρύθμιση τους δεν έχει κανένα αποτέλεσμα. Τι απογοήτευση.

Θα μπορούσε πραγματικά ο χαρακτήρας διαστήματος να είναι ο μόνος τρόπος για να εισαγάγετε ένα κενό μετά από έναν προσαρμοσμένο δείκτη; Έπρεπε να μάθω. Καθώς ερεύνησα αυτό το θέμα, έκανα μερικές ενδιαφέρουσες ανακαλύψεις που θα ήθελα να μοιραστώ σε αυτό το άρθρο.

Προσθήκη επένδυσης και περιθωρίων

Αρχικά, ας επιβεβαιώσουμε τι margin και padding κάνει στο <ul> και <li> στοιχεία. Έχω δημιουργήσει μια δοκιμαστική σελίδα για αυτό το σκοπό. Σύρετε τα σχετικά ρυθμιστικά και παρατηρήστε την επίδραση στο διάστημα σε κάθε πλευρά του δείκτη λίστας. Συμβουλή: Χρησιμοποιήστε ελεύθερα το κουμπί Επαναφορά για να επαναφέρετε όλα τα στοιχεία ελέγχου στις αρχικές τους τιμές.

Σημείωση: Τα προγράμματα περιήγησης εφαρμόζουν μια προεπιλογή padding-inline-left of 40px προς την <ol> και <ul> στοιχεία. Το λογικό padding-inline-left η ιδιότητα είναι ισοδύναμη με τη φυσική padding-left ιδιοκτησία σε συστήματα γραφής με κατεύθυνση από αριστερά προς τα δεξιά. Σε αυτό το άρθρο, πρόκειται να χρησιμοποιήσω φυσικές ιδιότητες για λόγους απλότητας.

Όπως βλέπεις, padding-left on <li> αυξάνει το κενό μετά τον δείκτη λίστας. Οι άλλες τρεις ιδιότητες ελέγχουν την απόσταση στα αριστερά του δείκτη, με άλλα λόγια, την εσοχή του στοιχείου της λίστας.

Παρατηρήστε ότι ακόμη και όταν το στοιχείο της λίστας είναι padding-left is 0px, υπάρχει ακόμα ένα ελάχιστο κενό μετά τον δείκτη. Αυτό το κενό δεν μπορεί να μειωθεί με margin or padding. Το ακριβές μήκος του ελάχιστου κενού εξαρτάται από το πρόγραμμα περιήγησης.

Συνοψίζοντας, το περιεχόμενο του στοιχείου της λίστας τοποθετείται σε μια ελάχιστη απόσταση από τη σήμανση συγκεκριμένη για το πρόγραμμα περιήγησης και αυτό το κενό μπορεί να αυξηθεί περαιτέρω προσθέτοντας ένα padding-left προς την <li>.

Στη συνέχεια, ας δούμε τι συμβαίνει όταν τοποθετούμε τον δείκτη μέσα το στοιχείο της λίστας.

Μετακίνηση του δείκτη μέσα στο στοιχείο της λίστας

Η list-style-position Η ιδιοκτησία δέχεται δύο λέξεις-κλειδιά: outside, που είναι η προεπιλογή και inside, το οποίο μετακινεί τον δείκτη μέσα στο στοιχείο της λίστας. Το τελευταίο είναι χρήσιμο για τη δημιουργία σχεδίων με στοιχεία λίστας πλήρους πλάτους.

Εάν ο δείκτης είναι τώρα μέσα το στοιχείο της λίστας, σημαίνει αυτό; padding-left on <li> δεν αυξάνει πλέον το κενό μετά τον δείκτη; Ας ανακαλύψουμε. Στη δοκιμαστική σελίδα μου, ενεργοποιήστε list-style-position: inside μέσω του πλαισίου ελέγχου. Πώς είναι οι τέσσερις padding και margin ιδιότητες που επηρεάζονται από αυτή την αλλαγή;

Όπως βλέπεις, padding-left on <li> τώρα αυξάνει το διάστημα στο αριστερά του δείκτη. Αυτό σημαίνει ότι έχουμε χάσει τη δυνατότητα να αυξήσουμε το κενό μετά τον δείκτη. Σε αυτήν την περίπτωση, θα ήταν χρήσιμο να μπορείτε να προσθέσετε margin-right στο ::marker η ίδια, αλλά αυτό δεν λειτουργεί, όπως διαπιστώσαμε παραπάνω.

Επιπλέον, υπάρχει ένα σφάλμα στο Chromium που προκαλεί το κενό μετά τον δείκτη να τριπλός μετά τη μετάβαση σε inside τοποθέτησης. Από προεπιλογή, το μήκος του κενού είναι περίπου το ένα τρίτο του μεγέθους του κειμένου. Άρα σε προεπιλογή font-size of 16px, το κενό είναι περίπου 5.5px. Μετά τη μετάβαση σε inside, το κενό μεγαλώνει στο έπακρο 16px στο Chrome. Αυτό το σφάλμα επηρεάζει το disc, circle, να square μαρκαδόροι, αλλά όχι δείκτες τακτικού αριθμού.

Η ακόλουθη εικόνα δείχνει την προεπιλεγμένη απόδοση δεικτών λίστας εξωτερικών και εσωτερικών σε τρία μεγάλα προγράμματα περιήγησης στο macOS. Για τη δική σας διευκόλυνση, έχω ευθυγραμμίσει οριζόντια όλα τα στοιχεία της λίστας στους δείκτες τους για να διευκολύνω τη σύγκριση των διαφορών στα μεγέθη των κενών.

Συνοψίζοντας, μετάβαση σε list-style-position: inside εισάγει δύο προβλήματα. Δεν μπορούμε πλέον να αυξήσουμε το χάσμα μέσω padding-left on <li>, και το μέγεθος του κενού είναι ασυνεπές μεταξύ των προγραμμάτων περιήγησης.

Τέλος, ας δούμε τι συμβαίνει όταν αντικαθιστούμε τον προεπιλεγμένο δείκτη λίστας με έναν προσαρμοσμένο δείκτη.

Μετάβαση σε προσαρμοσμένο δείκτη

Υπάρχουν δύο τρόποι για να ορίσετε το α προσαρμοσμένος δείκτης:

• list-style-type και list-style-image ιδιότητες
• content ιδιοκτησία στο ::marker ψευδοστοιχείο

Η content η ιδιοκτησία είναι πιο ισχυρή. Για παράδειγμα, μας επιτρέπει να χρησιμοποιήσουμε το counter() λειτουργία για πρόσβαση στον τακτικό αριθμό του στοιχείου της λίστας (το σιωπηρά list-item αντιμετώπιση) και διακοσμήστε το με κορδόνια.

Δυστυχώς, το Safari δεν υποστηρίζει το content ιδιοκτησία σε ::marker Ακόμη (Σφάλμα WebKit). Για το λόγο αυτό, θα χρησιμοποιήσω το list-style-type ιδιότητα για τον ορισμό του προσαρμοσμένου δείκτη. Μπορείτε ακόμα να χρησιμοποιήσετε το ::marker επιλογέα για το στυλ του προσαρμοσμένου δείκτη που δηλώνεται μέσω list-style-type. Αυτή η πτυχή του ::marker υποστηρίζεται στο Safari.

Οποιοσδήποτε χαρακτήρας Unicode μπορεί ενδεχομένως να χρησιμεύσει ως δείκτης προσαρμοσμένης λίστας, αλλά μόνο ένα μικρό σύνολο χαρακτήρων έχει στην πραγματικότητα το "Bullet" στο επίσημο όνομά τους, γι' αυτό σκέφτηκα να τους μεταγλωττίσω εδώ για αναφορά.

Χαρακτήρας	Όνομα	Σημείο κώδικα	Λέξη-κλειδί CSS
•	Σφαίρα	U+2022	disc
‣	Τριγωνική σφαίρα	U+2023
⁃	Σφαίρα παύλα	U+2043
⁌	Μαύρη αριστερή σφαίρα	U+204C
⁍	Μαύρη σφαίρα δεξιά	U+204D
◘	Αντίστροφη σφαίρα	U+25D8
◦	Λευκή σφαίρα	U+25E6	circle
☙	Αντίστροφη περιστρεφόμενη φλοράλ καρδιά	U+2619
❥	Περιστρεφόμενη σφαίρα βαριάς μαύρης καρδιάς	U+2765
❧	Περιστρεφόμενο Floral Heart Bullet	U+2767
⦾	Κυκλική λευκή σφαίρα	U+29BE
⦿	Κυκλωμένη σφαίρα	U+29BF

Σημείωση: Το CSS square Η λέξη-κλειδί δεν έχει αντίστοιχο χαρακτήρα "Bullet" στο Unicode. Ο χαρακτήρας που πλησιάζει περισσότερο είναι το Black Small Square (▪️) emoji (U+25AA).

Τώρα ας δούμε τι συμβαίνει όταν αντικαθιστούμε τον προεπιλεγμένο δείκτη λίστας με list-style-type: "•" (U+2022 Σφαίρα). Αυτός είναι ο ίδιος χαρακτήρας με την προεπιλεγμένη κουκκίδα, επομένως δεν θα πρέπει να υπάρχουν σημαντικές διαφορές απόδοσης. Στη δοκιμαστική σελίδα μου, ενεργοποιήστε το list-style-type επιλογή και παρατηρήστε τυχόν αλλαγές στον δείκτη.

Όπως μπορείτε να δείτε, υπάρχουν δύο σημαντικές αλλαγές:

1. Δεν υπάρχει πλέον ελάχιστο κενό μετά τον δείκτη.
2. Η σφαίρα έχει γίνει μικρότερη, σαν να αποδόθηκε σε μικρότερη font-size.

Σύμφωνα με Στυλ μετρητή CSS Επίπεδο 3, ο προεπιλεγμένος δείκτης λίστας (disc) θα πρέπει να είναι "παρόμοιο με το • U+2022 ΣΦΑΙΡΑ". Φαίνεται ότι τα προγράμματα περιήγησης αυξάνουν το μέγεθος της προεπιλεγμένης κουκκίδας για να την κάνουν πιο ευανάγνωστη. Ο Firefox χρησιμοποιεί ακόμη και μια ειδική γραμματοσειρά, -moz-bullet-font, για το μαρκαδόρο.

Μπορεί το πρόβλημα μικρού μεγέθους να διορθωθεί με CSS; Στη δοκιμαστική μου σελίδα, ενεργοποιήστε το στυλ δείκτη και παρατηρήστε τι συμβαίνει όταν αλλάζετε το font-size, line-height, να font-family του δείκτη.

Όπως μπορείτε να δείτε, η αύξηση του font-size προκαλεί την κατακόρυφη εσφαλμένη ευθυγράμμιση του προσαρμοσμένου δείκτη και αυτό δεν μπορεί να διορθωθεί μειώνοντας το line-height. ο vertical-align Η ιδιότητα, η οποία θα μπορούσε εύκολα να επιλύσει αυτό το πρόβλημα, δεν υποστηρίζεται ::marker.

Αλλά προσέξατε ότι η αλλαγή του font-family μπορεί να γίνει μεγαλύτερος ο δείκτης; Δοκιμάστε να το ρυθμίσετε σε Tahoma. Αυτό θα μπορούσε ενδεχομένως να είναι μια αρκετά καλή λύση για το πρόβλημα του μικρού μεγέθους, αν και δεν έχω δοκιμάσει ποια γραμματοσειρά λειτουργεί καλύτερα στα μεγάλα προγράμματα περιήγησης και λειτουργικά συστήματα.

Μπορεί επίσης να έχετε παρατηρήσει ότι το σφάλμα Chromium δεν εμφανίζεται πλέον όταν τοποθετείτε τον δείκτη μέσα στο στοιχείο της λίστας. Αυτό σημαίνει ότι ένας προσαρμοσμένος δείκτης μπορεί να χρησιμεύσει ως λύση για αυτό το σφάλμα. Και αυτό με οδηγεί στο κύριο πρόβλημα, και στον λόγο για τον οποίο άρχισα να ερευνώ αυτό το θέμα. Εάν ορίσετε έναν προσαρμοσμένο δείκτη και τον τοποθετήσετε μέσα στο στοιχείο της λίστας, δεν υπάρχει κενό μετά τον δείκτη και δεν υπάρχει τρόπος να εισαγάγετε ένα κενό με τυπικά μέσα.

1. Δεν υπάρχει ελάχιστο κενό μετά τους προσαρμοσμένους δείκτες.
2. ::marker δεν υποστηρίζει padding or margin.
3. padding-left on <li> δεν αυξάνει το κενό, αφού ο δείκτης είναι τοποθετημένος inside.

Χαρακτηριστικά

Ακολουθεί μια περίληψη όλων των βασικών γεγονότων που έχω αναφέρει στο άρθρο:

1. Τα προγράμματα περιήγησης εφαρμόζουν μια προεπιλογή padding-inline-start of 40px προς την <ul> και <ol> στοιχεία.
2. Υπάρχει ένα ελάχιστο κενό μετά τους ενσωματωμένους δείκτες λίστας (disc, decimal, και τα λοιπά.). Δεν υπάρχει ελάχιστο κενό μετά τους προσαρμοσμένους δείκτες (συμβολοσειρά ή URL).
3. Το μήκος του κενού μπορεί να αυξηθεί προσθέτοντας a padding-left προς την <ul>, αλλά μόνο εάν ο δείκτης βρίσκεται εκτός του στοιχείου της λίστας (η προεπιλεγμένη λειτουργία).
4. Οι προσαρμοσμένοι δείκτες συμβολοσειράς έχουν μικρότερο προεπιλεγμένο μέγεθος από τους ενσωματωμένους δείκτες. Αλλαγή του font-family on ::marker μπορούν να αυξήσουν το μέγεθός τους.

Συμπέρασμα

Κοιτάζοντας πίσω στο παράδειγμα κώδικα από την αρχή του άρθρου, νομίζω ότι καταλαβαίνω τώρα γιατί υπάρχει ένας χαρακτήρας διαστήματος στο content αξία. Δεν υπάρχει καλύτερος τρόπος να εισαγάγετε ένα κενό μετά τον δείκτη SVG. Είναι μια λύση που χρειάζεται γιατί δεν υπάρχει ποσότητα margin και padding μπορεί να δημιουργήσει ένα κενό μετά από έναν προσαρμοσμένο δείκτη που είναι τοποθετημένος μέσα στο στοιχείο της λίστας. ΕΝΑ margin-right on ::marker θα μπορούσε εύκολα να το κάνει, αλλά αυτό δεν υποστηρίζεται.

Μέχρι ::marker προσθέτει υποστήριξη για περισσότερες ιδιότητες, οι προγραμματιστές ιστού συχνά δεν έχουν άλλη επιλογή από το να κρύψουν τον δείκτη και να τον μιμηθούν με ::before ψευδοστοιχείο. Έπρεπε να το κάνω μόνος μου πρόσφατα γιατί δεν μπορούσα να αλλάξω τον μαρκαδόρο background-color. Ας ελπίσουμε ότι δεν θα χρειαστεί να περιμένουμε πολύ για ένα πιο ισχυρό ::marker ψευδο-στοιχείο.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/