Ein Ersatz für list-style-image: farbige Listenpunkte für <ul> und <ol> mit CSS und JavaScript

Die standardmäßigen Formatierungen für Listen sind nicht sehr hübsch. Man hätte gern einfach mehr Farbe und Audrucksmöglichkeiten (obwohl man ja nun auch Sachen wie lower-greek und upper-roman verwenden kann). Als beste Lösung wird meist angegeben, ein Hintergrundbild zu verwenden. Das zu positionieren ist aber nicht immer einfach – schon gar nicht, wenn der Text skalierbar sein soll. (Und hey – der Text soll skalierbar sein!)

Ich verwende seit Jahren eine einfache Lösung mit jQuery, die ich sonst noch nie erwähnt gefunden habe.

Wie kann man den Listenpunkt greifen?

Gar nicht. Zumindest von Haus aus. Man kann aber

  1. das <li> greifen und
  2. (per JavaScript) den gesamten Inhalt des <li>.
  3. [Das war auch schon die Demo.]
  4. [Die Aufzählungspunkte wiederholen die Farben der Navigation.]
  5. [Cool, oder?]
  6. [Naja, manche Farben sind zu hell.]

Der Knackpunkt ist, dass diese beiden Dinge nicht identisch sind. Man muss nur einen <span> um den Inhalt des <li> legen, und schon hat man Möglichkeiten, von denen man immer träumte:

<ul>
  <li><span>Das ist der erste Punkt!</span></li>
  <li><span>Das ist der zweite Punkt!</span></li>
</ul

Das Ganze automatisieren wir mit JavaScript (hier jQuery), damit niemand im HTML rumpfuschen muss:

jQuery( document ).ready(function( $ ) {

// bunte Listenpunkte
$('frame-default ul, .frame-default ol').each(function(el){
  $(this).find('li').addClass('js-li').wrapInner('<span></span>');
});

});

Das CSS für die Listenpunkte

Das <li> kriegt zusätzlich noch eine neue Klasse, damit es in der Standardformatierung unauffällig ist und nur bunt, wenn jQuery auch läuft.

.js-li{color:#644C82;font-weight:bold}
li, .js-li span{color:#111;font-weight:normal}

Zusätzlich kann man natürlich noch mit font-size und font-family experimentieren, was aber nur bei <ol>s wirklich was bringt. Text-shadow greift nicht.

Tja, das war's auch schon. Ich finde, es ist in den meisten Fällen eine durchaus akzeptable Alternative zum list-image.gif, weil es so schön sauber ist.

Die Abwechslung ist natürlich mit CSS-Pseudoklassen gemacht.