Liste numerate stilizzate e sematicamente corrette in xhtml con css

Lavorando al nuovo restyling del sito Gr.U.S.P. è sorta la necessità di stilizzare i numeri delle liste numerate in xhtml, il tag <ol> <li> per intenderci.

Subito ho trovato una soluzione piuttosto veloce, ovvero inserire un tag <span> all’interno del tag <li>. Ma semanticamente non è corretto, anzi si tratta proprio del lato oscuro della forza:

<ol>
<li><span>element</span></li>
<ol>

Quindi, percorrendo la via Jedi, ho fatto appello alla forza del pseudo elemento before definito nello standard di CSS2.

Mi sono letto la documentazione ufficiale, ed ho scoperto che tra le proprietà del pseudo elemento è possibile definire un un contatore.

<div class="entry">
<ol>
<li><span>element</span></li>
<ol>
<div>
<style>
.entry ol {
counter-reset: itemlist;
list-style-type: none;
margin-left: 0pt;
padding: 1em;
background: yellow;
}
.entry ol li:before {
color:#76B;
content:counter(itemlist, decimal) " ";
counter-increment:itemlist;
font-family:Georgia,serif;
font-style:italic;
font-weight:bold;
}
.entry ol li {
list-style-type:none;
}
</style>

Ovviamente Internet Explorer, che non è per nulla attinente agli standard, non gradisce queste finezze di linguaggio perché non è in grado di interpretare gli pseudo elementi.

Quindi subito dopo aver definito le regole CSS per le liste numerate le stesse devono essere azzerare nel codice xhtml, sfruttando i commenti condizionali di IE, in modo che tutti gli altri browser non siano intaccati.

In alternativa credo che sia possibile riprodurre l’effetto con javascript, ma è difficile che ne valga davvero la pena inserirlo.

Tags: