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.
