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 per sovrapporre il testo alla banda verde:


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 problema: il text-align:center centra erroneamente anche elementi block-level. Ecco infatti come rende:

Sugli altri browser, ovviamente, l’esempio è perfetto. Il passo successivo quindi è eliminare il problema dell’allineamento del testo e dello span. Nell’esempio 3 le cose funzionano anche su IE, se ci accontentiamo
di avere testo che indica la percentuale non centrato.

Altrimenti è necessario un altro compromesso nel markup…ecco quindi l’ultimo esempio, che oltre allo <span> usa un <b> per racchiudere il testo della percentuale: finalmente è compatibile con IE5, IE5.5, IE6, IE7, Opera, Firefox e Safari.

Il risultato finale ha richiesto un po’ di lavoro, è robusto e flessibile e non usa immagini. Certo che rispetto al primo esempio si presenta molto meno elegante e leggero, ma per estendere la compatibilità  su Internet Explorer si è dovuto accettare qualche compromesso. Se però si ha la necessità  di indicatori di percentuali fluidi credo sia una buona soluzione. Alla prossima.