Alles, was Sie über den Abstand nach dem Listen Marker wissen müssen

Ich habe "Kreatives Listenstyling" auf dem web.dev-Blog von Google gelesen und etwas Merkwürdiges in einem der Codebeispiele im Abschnitt ::marker des Artikels bemerkt. Die eingebauten Listenmarker sind Aufzählungspunkte, Ordnungszahlen und Buchstaben. Das Pseudo-Element ::marker erlaubt es uns, diese Marker zu stylen oder sie durch ein benutzerdefiniertes Zeichen oder Bild zu ersetzen.

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

Das Beispiel, das meine Aufmerksamkeit erregte, verwendet ein SVG-Icon als benutzerdefinierten Marker für die Listenelemente. Aber es gibt auch ein einzelnes Leerzeichen (" ") im CSS-Wert neben der url()-Funktion. Der Zweck dieses Leerzeichens scheint darin zu bestehen, einen Abstand nach dem benutzerdefinierten Marker einzufügen.

Als ich diesen Code sah, fragte ich mich sofort, ob es einen besseren Weg gäbe, den Abstand zu erzeugen. Das Anhängen eines Leerzeichens an content fühlt sich eher wie eine Notlösung an als die optimale Lösung. CSS bietet margin und padding sowie andere Standardmethoden, um Elemente auf der Seite abzustimmen. Könnte keine dieser Eigenschaften in dieser Situation verwendet werden?

Zuerst versuchte ich, das Leerzeichen durch einen ordnungsgemäßen Rand zu ersetzen

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

Das hat nicht funktioniert. Wie sich herausstellt, unterstützt ::marker nur eine kleine Auswahl hauptsächlich textbezogener CSS-Eigenschaften. Sie können zum Beispiel die font-size und color des Markers ändern und einen benutzerdefinierten Marker definieren, indem Sie content auf einen String oder eine URL setzen, wie oben gezeigt. Aber die Eigenschaften margin und padding werden nicht unterstützt, daher haben sie keine Auswirkung. Was für eine Enttäuschung.

Kann es wirklich sein, dass ein Leerzeichen die einzige Möglichkeit ist, einen Abstand nach einem benutzerdefinierten Marker einzufügen? Ich musste es herausfinden. Bei meiner Recherche zu diesem Thema habe ich einige interessante Entdeckungen gemacht, die ich in diesem Artikel gerne teilen möchte.

Hinzufügen von Abständen und Rändern

Zuerst bestätigen wir, was margin und padding bei den Elementen <ul> und <li> bewirken. Zu diesem Zweck habe ich eine Testseite erstellt. Ziehen Sie die entsprechenden Schieberegler und beobachten Sie die Auswirkung auf den Abstand auf jeder Seite des Listenmarkers. Tipp: Benutzen Sie den Reset-Button großzügig, um alle Regler auf ihre Anfangswerte zurückzusetzen.

Hinweis: Browser wenden auf <ol> und <ul> Elemente ein Standard-padding-inline-left von 40px an. Die logische Eigenschaft padding-inline-start ist äquivalent zur physikalischen Eigenschaft padding-left in Schriftsystemen mit einer von links nach rechts gerichteten Inline-Richtung. In diesem Artikel verwende ich der Einfachheit halber physikalische Eigenschaften.

Wie Sie sehen können, vergrößert padding-left bei <li> den Abstand nach dem Listenmarker. Die anderen drei Eigenschaften steuern den Abstand links vom Marker, also den Einzug des Listenelements.

Beachten Sie, dass selbst wenn padding-left des Listenelements 0px beträgt, immer noch ein Mindestabstand nach dem Marker vorhanden ist. Dieser Abstand kann nicht durch margin oder padding verringert werden. Die genaue Länge des Mindestabstands hängt vom Browser ab.

Zusammenfassend lässt sich sagen, dass der Inhalt des Listenelements in einem browserspezifischen Mindestabstand zum Marker positioniert ist, und dieser Abstand kann durch Hinzufügen eines padding-left zu <li> weiter vergrößert werden.

Als Nächstes sehen wir uns an, was passiert, wenn wir den Marker *innerhalb* des Listenelements positionieren.

Verschieben des Markers innerhalb des Listenelements

Die Eigenschaft list-style-position akzeptiert zwei Schlüsselwörter: outside, was der Standard ist, und inside, was den Marker innerhalb des Listenelements verschiebt. Letzteres ist nützlich, um Designs mit Vollbild-Listenelementen zu erstellen.

Wenn sich der Marker nun *innerhalb* des Listenelements befindet, bedeutet das, dass padding-left bei <li> den Abstand nach dem Marker nicht mehr vergrößert? Finden wir es heraus. Aktivieren Sie auf meiner Testseite list-style-position: inside über die Checkbox. Wie wirken sich die vier Eigenschaften padding und margin auf diese Änderung aus?

Wie Sie sehen können, vergrößert padding-left bei <li> den Abstand *links* vom Marker. Das bedeutet, wir haben die Möglichkeit verloren, den Abstand nach dem Marker zu vergrößern. In dieser Situation wäre es nützlich, dem ::marker selbst margin-right hinzufügen zu können, aber das funktioniert nicht, wie wir oben festgestellt haben.

Zusätzlich gibt es einen Bug in Chromium, der dazu führt, dass sich der Abstand nach dem Marker nach dem Umschalten auf inside-Positionierung verdreifacht. Standardmäßig beträgt die Länge des Abstands etwa ein Drittel der Textgröße. Bei einer Standard-font-size von 16px beträgt der Abstand etwa 5,5px. Nach dem Wechsel zu inside wächst der Abstand in Chrome auf volle 16px. Dieser Bug betrifft die Marker disc, circle und square, aber nicht die Ordnungszahlen-Marker.

Das folgende Bild zeigt das Standardrendering von außerhalb und innerhalb positionierten Listenmarkern in drei wichtigen Browsern unter macOS. Zu Ihrer Bequemlichkeit habe ich alle Listenelemente horizontal auf ihren Markern ausgerichtet, um die Unterschiede in den Abstandgrößen leichter vergleichen zu können.

Zusammenfassend lässt sich sagen, dass das Umschalten auf list-style-position: inside zwei Probleme mit sich bringt. Wir können den Abstand nicht mehr über padding-left bei <li> vergrößern, und die Abstandgröße ist zwischen den Browsern inkonsistent.

Schließlich sehen wir uns an, was passiert, wenn wir den Standardlistenmarker durch einen benutzerdefinierten Marker ersetzen.

Wechseln zu einem benutzerdefinierten Marker

Es gibt zwei Möglichkeiten, einen benutzerdefinierten Marker zu definieren

• list-style-type und list-style-image Eigenschaften
• content Eigenschaft am ::marker Pseudo-Element

Die content-Eigenschaft ist leistungsfähiger. Sie erlaubt uns beispielsweise, die counter()-Funktion zu verwenden, um auf die Ordnungszahl des Listenelements (den impliziten list-item Counter) zuzugreifen und diese mit benutzerdefinierten Zeichenketten zu dekorieren.

Leider unterstützt Safari die content-Eigenschaft für ::marker noch nicht (WebKit-Bug). Aus diesem Grund werde ich die list-style-type-Eigenschaft verwenden, um den benutzerdefinierten Marker zu definieren. Sie können weiterhin den ::marker-Selektor verwenden, um den über list-style-type deklarierten benutzerdefinierten Marker zu stylen. Dieser Aspekt von ::marker wird in Safari unterstützt.

Jedes Unicode-Zeichen kann potenziell als benutzerdefinierter Listenmarker dienen, aber nur ein kleiner Satz von Zeichen hat tatsächlich "Bullet" in seinem offiziellen Namen. Daher habe ich sie hier zur Referenz zusammengestellt.

Zeichen (Character)	Name	Codepunkt	CSS-Schlüsselwort
•	Aufzählungspunkt	U+2022	disc
‣	Dreieckiger Aufzählungspunkt	U+2023
⁃	Bindestrich-Aufzählungspunkt	U+2043
⁌	Schwarzer Links-Aufzählungspunkt	U+204C
⁍	Schwarzer Rechts-Aufzählungspunkt	U+204D
◘	Inverser Aufzählungspunkt	U+25D8
◦	Weißer Aufzählungspunkt	U+25E6	circle (Kreis)
☙	Umgedrehter drehender Blumenherz-Aufzählungspunkt	U+2619
❥	Drehender schwerer schwarzer Herz-Aufzählungspunkt	U+2765
❧	Drehender Blumenherz-Aufzählungspunkt	U+2767
⦾	Umrundeter weißer Aufzählungspunkt	U+29BE
⦿	Umrundeter Aufzählungspunkt	U+29BF

Hinweis: Das CSS-Schlüsselwort square hat kein entsprechendes "Bullet"-Zeichen in Unicode. Das am nächsten kommende Zeichen ist das schwarze kleine Quadrat (▪️) Emoji (U+25AA).

Sehen wir uns nun an, was passiert, wenn wir den Standardlistenmarker durch list-style-type: "•" (U+2022 Bullet) ersetzen. Dies ist dasselbe Zeichen wie der Standard-Aufzählungspunkt, daher sollte es keine größeren Render-Unterschiede geben. Aktivieren Sie auf meiner Testseite die Option list-style-type und beobachten Sie alle Änderungen am Marker.

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

1. Es gibt keinen Mindestabstand mehr nach dem Marker.
2. Der Aufzählungspunkt ist kleiner geworden, als ob er mit einer kleineren font-size gerendert würde.

Gemäß CSS Counter Styles Level 3 sollte der Standardlistenmarker (disc) "ähnlich wie • U+2022 BULLET" sein. Es scheint, dass Browser die Größe des Standard-Aufzählungspunkts erhöhen, um ihn besser lesbar zu machen. Firefox verwendet sogar eine spezielle Schriftart, -moz-bullet-font, für den Marker.

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

Wie Sie sehen können, führt die Vergrößerung der font-size zu einer vertikalen Fehlausrichtung des benutzerdefinierten Markers, und dies kann durch Verringerung der line-height nicht korrigiert werden. Die Eigenschaft vertical-align, die dieses Problem leicht beheben könnte, wird für ::marker nicht unterstützt.

Aber haben Sie bemerkt, dass das Ändern der font-family dazu führen kann, dass der Marker größer wird? Versuchen Sie, sie auf Tahoma zu setzen. Dies könnte potenziell eine ausreichend gute Workaround für das Problem der geringen Größe sein, obwohl ich nicht getestet habe, welche Schriftart über die wichtigsten Browser und Betriebssysteme hinweg am besten funktioniert.

Sie haben vielleicht auch bemerkt, dass der Chromium-Bug nicht mehr auftritt, wenn Sie den Marker innerhalb des Listenelements positionieren. Das bedeutet, dass ein benutzerdefinierter Marker als Workaround für diesen Bug dienen kann. Und das führt mich zum Hauptproblem und dem Grund, warum ich mit der Recherche dieses Themas begonnen habe. Wenn Sie einen benutzerdefinierten Marker definieren und ihn innerhalb des Listenelements positionieren, gibt es keinen Abstand nach dem Marker und keine Möglichkeit, diesen mit Standardmitteln einzufügen.

1. Es gibt keinen Mindestabstand nach benutzerdefinierten Markern.
2. ::marker unterstützt weder padding noch margin.
3. padding-left bei <li> vergrößert den Abstand nicht, da der Marker inside positioniert ist.

Zusammenfassung

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

1. Browser wenden auf <ul> und <ol> Elemente ein Standard-padding-inline-start von 40px an.
2. Es gibt einen Mindestabstand nach eingebauten Listenmarkern (disc, decimal usw.). Es gibt keinen Mindestabstand nach benutzerdefinierten Markern (Zeichenkette oder URL).
3. Die Länge des Abstands kann durch Hinzufügen eines padding-left zu <ul> vergrößert werden, aber nur, wenn der Marker außerhalb des Listenelements positioniert ist (Standardmodus).
4. Benutzerdefinierte Zeichenkettenmarker sind kleiner als eingebaute Marker. Das Ändern der font-family auf ::marker kann ihre Größe erhöhen.

Fazit

Rückblickend auf das Codebeispiel vom Anfang des Artikels glaube ich nun zu verstehen, warum sich ein Leerzeichen im content-Wert befindet. Es gibt einfach keinen besseren Weg, einen Abstand nach dem SVG-Marker einzufügen. Es ist eine Workaround, die notwendig ist, weil kein margin und padding einen Abstand nach einem benutzerdefinierten Marker erzeugen kann, der innerhalb des Listenelements positioniert ist. Ein margin-right für ::marker könnte dies leicht ermöglichen, aber das wird nicht unterstützt.

Bis ::marker die Unterstützung für weitere Eigenschaften hinzufügt, werden Webentwickler oft keine andere Wahl haben, als den Marker zu verbergen und ihn mit einem ::before Pseudo-Element zu emulieren. Ich musste das kürzlich selbst tun, weil ich die background-color des Markers nicht ändern konnte. Hoffentlich müssen wir nicht lange auf ein leistungsfähigeres ::marker Pseudo-Element warten.