Indicatori di percentuale fluidi con i CSS

La scorsa settimana è stato pubblicato su HTML.it Indicatori di percentuale con i CSS, un mini-tutorial per realizzare barre di indicazione per percentuali. Qui di seguito riporto lo screenshot di uno dei due esempi:

I due esempi dell'articolo sono il frutto di alcuni spunti presentati in Grafici a barre e creatività  qui sul blog un po' di tempo fa. La soluzione che ho presentato a parer mio è robusta, crossbrowser e abbastanza semplice.

Volendo fare un po' di analisi, ci sono alcune considerazioni che potrei fare:

• l'uso di uno span aggiuntivo: a livello semantico non ha significato, ma è anche vero che non
  aggiunge o toglie niente alla pagina;
• l'uso parziale di stili in linea, che in questo caso a parer mio è lecito e preferibile: con una soluzione simile se si volessero cambiare le percentuali della pagina basterà  intervenire nel codice HTML;
• lo stile in linea nel markup non darebbe problemi se si volesse scegliere di non mostrare più le percentuali in forma di indicatori, dato che definisce solo la background-position
• la tecnica presentata è poco flessibile, dato che presuppone indicatori di percentuale a larghezza fissa e stabilita;
• è anche vero che ottenere indicatori di percentuale fluidi, flessibili, e crossbrowser con un'unica immagine e al massimo un elemento aggiuntivo sembra molto difficile.

Nel realizzare l'articolo ho valutato diverse idee, e la più semplice a cui sono arrivato vorrei presentarla qui: eccola generated content
:before Ovviamente non funziona su IE (neanche IE7) semplice sperimentazione

Per comodità , riporto uno screenshot per chi sta navigando con IE:

Ci sono alcuni dettagli implementativi però molto interessanti, soprattutto se non siete
pratici di generated content. Partiamo dal markup dell'esempio


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


Ovviamente al posto dei div potremo usare anche altri elementi, a patto che siano naturalmente block-level (o lo vengano resi mediante CSS). Procediamo con il CSS. Per prima cosa il div con classe "progress" apparentemente line-height


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


Ora la parte centrale. Attraverso lo pseudo-elemento :before content display:block


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


A questo punto è necessaria una piccola annotazione teorica. Avendo reso block-level
il generated content, il testo all'interno del div verrà  reso in un box anonimo block-level id


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


Il nostro primo esempio