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