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. Vi invito a consultare l'HTML e il CSS incorporato: non ho usato markup aggiuntivo, né stili in linea, né immagini di sfondo ma solo il generated content grazie allo pseudo-elemento
:before per avere indicatori percentuale fluidi. Ovviamente non funziona su IE (neanche IE7), ma va bene su Opera e Firefox e credo anche su Safari. àˆ quindi da intendersi come una 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": viene specificata la larghezza percentuale, un bordo, l'allineamento del testo, l'altezza di linea e un margine inferiore in modo da distanziare i div successivi. Tutte dichiarazioni semplici e decorative. C'è però una dichiarazione apparentemente inutile e ininfluente, ovvero quella sul line-height, fissato a 1.3em. Ecco la regola per intero:


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 e la proprietà  content è possibile inserire un elemento testuale all'interno del div. In questo caso ci basta uno spazio vuoto che renderemo però in un contenitore block-level grazie alla dichiarazione display:block. Fisseremo poi l'altezza a 1.3em, ovvero proprio l'altezza di linea precedentemente dichiarata, e un margine inferiore negativo pari a tale valore. Si assegna infine un colore di sfondo verde acceso:


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 e subirà  quindi il margine negativo dell'elemento che lo precede, ovvero proprio il generated content. Il risultato è che quindi il testo che indica la percentuale va a disporsi esattamente sopra la "banda" verde. Il passo finale è attribuire una larghezza percentuale al generated content in modo da riflettere la percentuale indicata, ed è qui che vengono utili gli id del markup:


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


Il nostro primo esempio è così ultimato. àˆ un peccato non poter utilizzare un'idea così semplice in pratica per via della compatibilità  di IE. Con un po' di lavoro comunque è possibile estendere la compatibilità  degli indicatori percentuali fluidi ed ottenere la compatibilità  anche su Explorer. Lo vedremo domani.