List Markers und String Styles

Listen – wir haben alle in irgendeiner Form mit ihnen gearbeitet. Ich spreche von HTMLs <ol> und <ul>. Oft schalten wir die Listenmarkierungen komplett aus, um Styling-Kontrolle zu erhalten, mit list-style-type: none, und beginnen von dort aus mit dem Styling. Andere Male wählen wir aus einer sehr begrenzten Auswahl an Aufzählungszeichen, wie z.B. disc, circle oder square; oder einer (viel) größeren Bandbreite an nummerierten Listenmarkierungen. Wir liefern vielleicht sogar von Zeit zu Zeit die URL eines Bildes, das verwendet werden soll.

Aber was, wenn wir die Markierungen anders gestalten wollen als den Inhalt der Listenelemente? Das war schon immer schwierig, bestenfalls. Jetzt, dank des ::marker Pseudo-Elements, ist es viel einfacher. Sie erhalten nicht die volle Bandbreite an CSS, um die Markierungen anzuwenden, aber es gibt immer noch viel, was getan werden kann.

::marker ist in Firefox und dank der Arbeit von Igalia auch in Chrome verfügbar.

Betrachten Sie diese Liste

Standardmäßig ergibt dies eine nummerierte Liste von 1 bis 5 mit arabischen Ziffern (1, 2, 3 usw.), gefolgt von einem Punkt, die alle mit dem Textinhalt in Schriftart, Größe, Stil, Farbe usw. übereinstimmen.

Wenn Sie eine Designrichtung hätten, die verlangt, dass die Zahlen kleiner oder eine andere Farbe haben, müssten Sie diesen Effekt manuell erzeugen, indem Sie die Markierungen unterdrücken und das ::before Pseudo-Element und CSS-Zähler und negative Text-Einzüge und… nun ja, es würde einen Wissenschaftler brauchen, um alles zu erklären.

Hier kommt ::marker. Fügen Sie diese Stile zur obigen Liste hinzu, und Sie erhalten das nachfolgende Ergebnis.

Das ist alles, was Sie brauchen!

Bevor Sie sich daran machen, Ihr gesamtes CSS neu zu schreiben, seien Sie gewarnt: Die Eigenschaften, die Sie über ::marker anwenden können, sind derzeit ziemlich begrenzt. Ab Februar 2021 sind die Eigenschaften, die Markierungen erkennen sollten:

• Alle Schriftarteigenschaften (font-face, font-size usw.)
• Die Eigenschaft white-space
• Die Eigenschaft color
• Die Internationalisierungseigenschaften text-combine-upright, unicode-bidi und direction
• Die Eigenschaft content
• Alle Animations- und Übergangseigenschaften

Es gibt einige Ergänzungen in einigen Browsern, aber fast alle Ergänzungen beziehen sich auf Textgestaltung, nicht auf das Box-Modell. Wenn Sie also dachten, Sie könnten all Ihre Listen-Nummern in Kreise mit schattierten Hintergründen setzen, ::marker wird Sie nicht dorthin bringen – Sie müssen zum Hackfest des ::before generierten Inhalts zurückkehren. Vorerst jedenfalls: Die Spezifikation besagt ausdrücklich, dass in Zukunft weitere Eigenschaften für ::marker zugelassen werden könnten.

Es gibt auch eine Einschränkung bei white-space, die Rendering-Fehler in verschiedenen Browsern aufweist. Chrome behandelt beispielsweise alle Leerzeichen in Markierungen als white-space: pre, wie es die Spezifikation vorsieht, lässt es Sie aber nicht ändern. Dies sollte behoben werden, wenn Chromes LayoutNG (Next Generation) veröffentlicht wird, aber nicht vorher. Firefox hingegen ignoriert jegliche white-space-Werte und behandelt Leerzeichen standardmäßig wie Text im normalen Fluss.

Mit diesen Einschränkungen im Hinterkopf können Sie Ihre Markierungen immer noch mit der content-Eigenschaft aufpeppen. Anstelle von Zahlen, gefolgt von einem Punkt, können Sie jede Zahl in Klammern mit einer Kombination aus Zählern und Zeichenfolgen setzen.

Beachten Sie das Leerzeichen nach der schließenden Klammer im content-Wert. Dies ist enthalten, um einen kleinen Abstand zwischen der Markierung und dem Listeninhalt zu schaffen. Normalerweise würden Sie vielleicht versuchen, einen Rand oder Abstand zu verwenden, aber wie wir bereits gesehen haben, können diese Eigenschaften nicht mit ::marker angewendet werden. Was frustrierend ist! Beachten Sie auch den CSS-Zähler list-item. Dieser wurde nirgendwo anders in CSS definiert – es ist ein integrierter Zähler, den alle Browser (die CSS-Zähler verstehen) zum Zählen von Listenelementen verwenden, wie z. B. in nummerierten Listen. Sie können ihn auch in Ihrem CSS verwenden!

Wenn Sie nur den Textinhalt einer Listenmarkierung ändern möchten und sich nicht um die Änderung von Stilen kümmern, können Sie dies mit ::marker tun, oder Sie können es mit der neuen Cross-Browser-Unterstützung für String-Werte für die list-style-type-Eigenschaft tun.

li.warning {
  list-style-type:"⚠";
}

Das ist also das Neue in der Welt der Listenmarkierungen. Vielleicht müssen Sie es nicht oft tun, aber wenn Sie es jemals tun, ist es gut zu wissen, dass die Möglichkeiten in diesem Bereich zugenommen haben und in Zukunft noch besser werden dürften. Lassen Sie uns wissen, wenn Sie sich einige clevere Markierungen einfallen lassen!