Indicatori di percentuali fluidi con i CSS - II

Nel post di ieri abbiamo visto come sia possibile ottenere indicatori di percentuale fluidi senza markup aggiuntivo e grazie al generated content. L'esempio però purtroppo non funziona su IE dato il mancato supporto dello pseudo-elemento :before e della proprietà  content.

L'idea di base si può però elaborare: ecco quindi l'esempio 2 che incorpora uno <span> vuoto per fare il lavoro del generated content e in via teorica in grado di estendere la compatibilità  anche su IE.

Ecco il markup:


<div class="progress" id="pe1"><span></span>100%</div>
<div class="progress" id="pe2"><span></span>50%</div>
<div class="progress" id="pe3"><span></span>20%</div>


Ed ecco il CSS, in cui il principio di base è l'uso del margine negativo inferiore sullo span


div.progress{width: 60%;border:1px solid #666;text-align: center;
    line-height: 1.3em;margin-bottom: 1em}

div.progress span{display: block;height: 1.3em;
    margin-bottom: -1.3em;background: #3f3}

div#pe1 span{width:100%}
div#pe2 span{width:50%}
div#pe3 span{width:20%}


Su IE (dalla versione 5 alla 7) c'è però qualche text-align:center

Sugli altri browser, ovviamente, l'esempio è perfetto. Il passo successivo quindi è eliminare il problema dell'allineamento del testo e dello span. Nell'esempio 3
di avere testo che indica la percentuale non centrato.

Altrimenti è necessario un altro compromesso nel markup...ecco quindi l'ultimo esempio <span> <b>

Il risultato finale primo esempio