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!