Alles, was Sie über die Lücke nach der Listenmarkierung wissen müssen

ich habe gelesen „Kreatives Listen-Styling“ im web.dev-Blog von Google und bemerkte etwas Seltsames in einem der Codebeispiele in der ::marker Abschnitt des Artikels. Die integrierten Listenmarkierungen sind Aufzählungszeichen, Ordnungszahlen und Buchstaben. Der ::marker Pseudo-Element ermöglicht es uns, diese Markierungen zu gestalten oder sie durch ein benutzerdefiniertes Zeichen oder Bild zu ersetzen.

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

Das Beispiel, das meine Aufmerksamkeit erregt hat, verwendet ein SVG-Symbol als benutzerdefinierte Markierung für die Listenelemente. Aber es gibt auch ein einzelnes Leerzeichen (" ") im CSS-Wert neben dem url() Funktion. Der Zweck dieses Leerzeichens scheint darin zu bestehen, eine Lücke nach der benutzerdefinierten Markierung einzufügen.

Als ich diesen Code sah, fragte ich mich sofort, ob es eine bessere Möglichkeit gäbe, die Lücke zu erstellen. Anhängen eines Leerzeichens an content fühlt sich eher wie eine Problemumgehung als die optimale Lösung an. CSS bietet margin und padding und andere Standardmethoden zum Verteilen von Elementen auf der Seite. Könnte keine dieser Eigenschaften in dieser Situation verwendet werden?

Zuerst habe ich versucht, das Leerzeichen durch einen angemessenen Rand zu ersetzen:

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

Das hat nicht funktioniert. Wie sich herausstellt, ::marker unterstützt nur a kleiner Satz hauptsächlich textbezogener CSS-Eigenschaften. Sie können zum Beispiel die ändern font-size und color des Markers und definieren Sie einen benutzerdefinierten Marker per Einstellung content zu einer Zeichenfolge oder URL, wie oben gezeigt. Aber die margin und padding Eigenschaften sind nicht unterstützt, daher hat das Festlegen keine Auswirkung. Was für eine Enttäuschung.

Könnte es wirklich sein, dass ein Leerzeichen die einzige Möglichkeit ist, eine Lücke nach einer benutzerdefinierten Markierung einzufügen? Ich musste es herausfinden. Bei der Recherche zu diesem Thema habe ich einige interessante Entdeckungen gemacht, die ich in diesem Artikel teilen möchte.

Füllen und Ränder hinzufügen

Lassen Sie uns zuerst bestätigen, was margin und padding tun auf der <ul> und <li> Elemente. Dazu habe ich eine Testseite erstellt. Ziehen Sie die relevanten Schieberegler und beobachten Sie die Auswirkung auf den Abstand auf jeder Seite der Listenmarkierung. Tipp: Verwenden Sie die Reset-Taste großzügig, um alle Steuerelemente auf ihre Anfangswerte zurückzusetzen.

Hinweis: Browser wenden einen Standard an padding-inline-left of 40px zu <ol> und <ul> Elemente. Das Logische padding-inline-left Eigentum ist dem Physischen äquivalent padding-left -Eigenschaft in Schreibsystemen mit einer Inline-Richtung von links nach rechts. In diesem Artikel werde ich der Einfachheit halber physikalische Eigenschaften verwenden.

Wie Sie sehen können, padding-left on <li> vergrößert den Abstand nach der Listenmarke. Die anderen drei Eigenschaften steuern den Abstand links vom Marker, also den Einzug des Listeneintrags.

Beachten Sie, dass auch wenn das Listenelement ist padding-left is 0px, gibt es nach der Markierung noch eine minimale Lücke. Diese Lücke kann nicht mit verkleinert werden margin or padding. Die genaue Länge der Mindestlücke hängt vom Browser ab.

Zusammenfassend wird der Inhalt des Listeneintrags in einem browserspezifischen Mindestabstand von der Markierung positioniert, und dieser Abstand kann durch Hinzufügen von a weiter vergrößert werden padding-left zu <li>.

Sehen wir uns als Nächstes an, was passiert, wenn wir die Markierung positionieren innerhalb das Listenelement.

Verschieben der Markierung innerhalb des Listenelements

Das list-style-position Die Eigenschaft akzeptiert zwei Schlüsselwörter: outside, was der Standardwert ist, und inside, wodurch die Markierung in das Listenelement verschoben wird. Letzteres ist nützlich, um Designs mit Listenelementen in voller Breite zu erstellen.

Wenn die Markierung jetzt ist innerhalb das Listenelement, bedeutet dies, dass padding-left on <li> vergrößert sich der Abstand nach der Markierung nicht mehr? Lass es uns herausfinden. Aktivieren Sie auf meiner Testseite list-style-position: inside über das Kontrollkästchen. Wie geht es den Vieren? padding und margin Eigenschaften, die von dieser Änderung betroffen sind?

Wie Sie sehen können, padding-left on <li> jetzt vergrößert sich der abstand zum links des Markers. Das bedeutet, dass wir die Möglichkeit verloren haben, den Abstand nach der Markierung zu vergrößern. In dieser Situation wäre es nützlich, hinzufügen zu können margin-right zu den ::marker selbst, aber das funktioniert nicht, wie wir oben festgestellt haben.

Außerdem gibt es eine Fehler in Chrom das verursacht die Lücke nach dem Marker dreifach nach dem Wechsel zu inside Positionierung. Standardmäßig beträgt die Länge der Lücke etwa ein Drittel der Textgröße. Also auf Vorgabe font-size of 16px, die Lücke ist ungefähr 5.5px. Nach dem Umschalten auf inside, wächst die Lücke in die Höhe 16px im Chrom. Dieser Fehler betrifft die disc, circle und square Markierungen, aber keine Ordnungszahlmarker.

Die folgende Abbildung zeigt das Standard-Rendering von außen und innen positionierten Listenmarkierungen in drei großen Browsern unter macOS. Der Einfachheit halber habe ich alle Listenelemente an ihren Markierungen horizontal ausgerichtet, um den Vergleich der Unterschiede in den Lückengrößen zu erleichtern.

Zusammenfassend: Umschalten auf list-style-position: inside führt zwei Probleme ein. Wir können den Abstand über nicht mehr vergrößern padding-left on <li>, und die Lückengröße ist zwischen den Browsern inkonsistent.

Lassen Sie uns abschließend sehen, was passiert, wenn wir die Standardlistenmarkierung durch eine benutzerdefinierte Markierung ersetzen.

Zu einem benutzerdefinierten Marker wechseln

Es gibt zwei Möglichkeiten, a zu definieren benutzerdefinierte Markierung:

• list-style-type und list-style-image immobilien
• content Eigentum auf dem ::marker Pseudoelement

Das content Eigentum ist mächtiger. Zum Beispiel erlaubt es uns, die zu verwenden counter() Funktion, um auf die Ordnungszahl des Listenelements zuzugreifen (die implizit list-item Zähler) und verzieren Sie es mit benutzerdefinierten Saiten.

Leider unterstützt Safari das nicht content Eigentum an ::marker noch (WebKit-Fehler). Aus diesem Grund werde ich die verwenden list-style-type -Eigenschaft zum Definieren der benutzerdefinierten Markierung. Sie können die weiterhin verwenden ::marker Selektor zum Stylen der benutzerdefinierten Markierung, die über deklariert wurde list-style-type. Dieser Aspekt von ::marker wird in Safari unterstützt.

Jedes Unicode-Zeichen kann möglicherweise als benutzerdefinierte Listenmarkierung dienen, aber nur eine kleine Gruppe von Zeichen hat tatsächlich „Aufzählungszeichen“ in ihrem offiziellen Namen, also dachte ich, ich würde sie hier als Referenz zusammenstellen.

Charakter	Name und Vorname	Codepunkt	CSS-Schlüsselwort
•	Kugel	U+2022	disc
‣	Dreieckige Kugel	U+2023
⁃	Bindestrich Aufzählungszeichen	U+2043
⁌	Schwarze Kugel nach links	U+204C
⁍	Schwarze Kugel nach rechts	U+204D
◘	Umgekehrte Kugel	U+25D8
◦	Weiße Kugel	U+25E6	circle
☙	Umgekehrte gedrehte Blumenherzkugel	U+2619
❥	Gedrehte schwere schwarze Herzkugel	U+2765
❧	Gedrehte Blumenherzkugel	U+2767
⦾	Eingekreiste weiße Kugel	U+29BE
⦿	Eingekreiste Kugel	U+29BF

Hinweis: Das CSS square Das Schlüsselwort hat in Unicode kein entsprechendes Aufzählungszeichen. Das Zeichen, das am nächsten kommt, ist das Emoji „Schwarzes kleines Quadrat“ ( ▪️ ) (U+25AA).

Sehen wir uns nun an, was passiert, wenn wir die Standardlistenmarkierung durch ersetzen list-style-type: "•" (U+2022 Patrone). Dies ist das gleiche Zeichen wie das Standard-Aufzählungszeichen, daher sollte es keine größeren Rendering-Unterschiede geben. Aktivieren Sie auf meiner Testseite die list-style-type Option und beobachten Sie alle Änderungen an der Markierung.

Wie Sie sehen können, gibt es zwei wesentliche Änderungen:

1. Nach der Markierung gibt es keine Mindestlücke mehr.
2. Die Kugel ist kleiner geworden, als wäre sie kleiner gerendert worden font-size.

Laut CSS-Zählerstile Stufe 3, die standardmäßige Listenmarkierung (disc) sollte „ähnlich wie • U+2022 PATRONE". Es scheint, dass Browser die Größe des Standard-Aufzählungszeichens vergrößern, um es besser lesbar zu machen. Firefox verwendet sogar eine spezielle Schriftart, -moz-bullet-font, für die Markierung.

Kann das kleine Größenproblem mit CSS behoben werden? Aktivieren Sie auf meiner Testseite das Marker-Styling und beobachten Sie, was passiert, wenn Sie das ändern font-size, line-height und font-family des Markers.

Wie Sie sehen können, erhöht sich die font-size führt dazu, dass die benutzerdefinierte Markierung vertikal falsch ausgerichtet wird, und dies kann nicht durch Verringern des korrigiert werden line-heightdem „Vermischten Geschmack“. Seine vertical-align -Eigenschaft, die dieses Problem leicht beheben könnte, wird nicht unterstützt ::marker.

Aber hast du bemerkt, dass sich das ändert font-family kann der Marker größer werden? Versuchen Sie es auf einzustellen Tahoma. Dies könnte möglicherweise eine ausreichend gute Problemumgehung für das Problem der kleinen Größe sein, obwohl ich nicht getestet habe, welche Schriftart in den wichtigsten Browsern und Betriebssystemen am besten funktioniert.

Vielleicht ist Ihnen auch aufgefallen, dass der Chromium-Bug nicht mehr auftritt, wenn Sie die Markierung innerhalb des Listeneintrags positionieren. Dies bedeutet, dass eine benutzerdefinierte Markierung als Problemumgehung für diesen Fehler dienen kann. Und das führt mich zum Hauptproblem und dem Grund, warum ich begonnen habe, dieses Thema zu erforschen. Wenn Sie eine benutzerdefinierte Markierung definieren und innerhalb des Listenelements positionieren, gibt es keine Lücke nach der Markierung und keine Möglichkeit, eine Lücke mit Standardmitteln einzufügen.

1. Es gibt keine Mindestlücke nach benutzerdefinierten Markierungen.
2. ::marker unterstützt nicht padding or margin.
3. padding-left on <li> vergrößert den Abstand nicht, da die Markierung positioniert ist inside.

Zusammenfassung

Hier ist eine Zusammenfassung aller wichtigen Fakten, die ich im Artikel erwähnt habe:

1. Browser wenden einen Standard an padding-inline-start of 40px zu <ul> und <ol> Elemente.
2. Es gibt eine minimale Lücke nach eingebauten Listenmarkierungen (disc, decimal, usw.). Es gibt keine Mindestlücke nach benutzerdefinierten Markierungen (String oder URL).
3. Die Länge der Lücke kann durch Hinzufügen von a vergrößert werden padding-left zu <ul>, aber nur, wenn die Markierung außerhalb des Listenelements positioniert ist (Standardmodus).
4. Benutzerdefinierte Zeichenfolgenmarkierungen haben eine kleinere Standardgröße als integrierte Markierungen. Wechseln font-family on ::marker können ihre Größe vergrößern.

Zusammenfassung

Wenn ich auf das Codebeispiel vom Anfang des Artikels zurückblicke, denke ich, dass ich jetzt verstehe, warum ein Leerzeichen in der ist content Wert. Es gibt einfach keinen besseren Weg, um eine Lücke nach dem SVG-Marker einzufügen. Es ist eine Problemumgehung, die benötigt wird, da keine Menge von margin und padding kann nach einer benutzerdefinierten Markierung, die innerhalb des Listenelements positioniert ist, eine Lücke erstellen. A margin-right on ::marker könnte es leicht tun, aber das wird nicht unterstützt.

Bis ::marker Fügt Unterstützung für mehr Eigenschaften hinzu, haben Webentwickler oft keine andere Wahl, als den Marker auszublenden und ihn mit a zu emulieren ::before Pseudo-Element. Ich musste das kürzlich selbst machen, weil ich die Markierungen nicht ändern konnte background-color. Hoffentlich müssen wir nicht zu lange auf eine stärkere warten ::marker Pseudoelement.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/