CSS: Das ::marker-Pseudoelement

In CSS gibt es immer wieder kleine Neuerungen; eine davon, das Pseudoelement ::marker und Alternativen dazu, sehen wir uns in diesem Beitrag an.

Hierbei geht es um unabhängiges Styling der Listenaufzählungspunkte. Mussten diese bisher für individuelles Styling noch mittels eines anderen Pseudoelementes, ::before, erstellt werden, geht das jetzt mit ::marker.

Wie bei vielen Neuerungen im Bereich CSS stellt sich hier natürlich sofort einmal die Frage nach dem Browser-Support, der im Falle von ::marker schon erstaunlich gut ist; alle großen Browser mit Ausnahme von Internet Explorer unterstützen dieses Pseudoelement bereits.

Den aktuellen Browsersupport für ::marker findet man auf caniuse.com.

Für IE muss man sich leider weiterhin mit den bisherigen Lösungen behelfen, und auch, was Styling und Positionierung betrifft, gibt es für ::marker noch etwas Verbesserungsbedarf.

Netterweise funktioniert ::marker nicht nur für Listeneinträge, sondern kann auch vor andere Elemente, beispielsweise eine Überschrift gesetzt werden.

Sehen wir uns einmal an, was schon funktioniert:

 

Indem wir einfach ::marker ansprechen, können wir beispielsweise die Farbe oder font-size unabhängig vom Inhalt des Listeneintrages verändern:

Dabei sprechen wir natürlich das list-item, nicht die Liste selbst an. Das Ergebnis:

Über das content-Attribut lassen sich so leicht auch HTML-Symbole anstelle der Punkte einfügen:

Dabei können wir HTML-Code verwenden oder ganz einfach das gewünschte Symbol mittels Copy&Paste einsetzen. Auch die (meisten) Symbole lassen sich über die color-Property beeinflussen. Ergebnis:

Das Sorgenkind ist natürlich Internet Explorer. Hier funktioniert ::marker nicht. Wir könnten mittels @supports abfragen, ob dieses Feature bereits implementiert ist, das ist allerdings nicht unbedingt notwendig. Wenn ein Browser ::marker (noch) nicht kennt, ist der Fallback automatisch der Standard; im Falle unserer ungeordneten Liste würden also einfach wieder die normalen Punkte angezeigt werden.

Alternativ gibt es auch noch das noch weniger unterstützte @counter-style (derzeit kann das erst Firefox).

Für einfache Fälle, eben nur die Farbe zu ändern oder ein einfaches HTML-Symbol statt der Punkte zu verwenden, ist ::marker bereits jetzt geeignet, wenn man nicht unbedingt auch das exakt gleiche Erscheinungsbild auch in IE haben möchte.

Ansonsten sind wir wieder beim guten alten ::before. Die althergebrachte Methode, die Aufzählungspunkte bei der Liste zu entfernen und im Pseudoelement ::before das gewünschte Symbol einzufügen, funktioniert natürlich immer noch:

Und diese Variante versteht sogar IE. Zu beachten hier allerdings: Wir sind hier innerhalb des li-Elements, nicht (wie ::marker) innerhalb des Paddings der Liste. Entsprechend weiter eingerückt erscheint diese Version. Mehr Abstand zum Listeneintrag können wir, wie im Beispiel oben, etwa mit einem Padding erreichen. Ergebnis:


Die Beispiele von oben könnt Ihr auch hier auf jsfiddle ansehen. 


Solche Themen und mehr gibt es auch in unseren Kursen zum Thema HTML, CSS und JS!

Viel Spaß beim Ausprobieren!



Kommentare sind geschlossen