Indicatori di percentuale fluidi con i CSS
Giovedì 2 Novembre 2006 - 09:45
di Alessandro Fulciniti
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.
Commenti
1
bello! peccato per IE (come al solito :) ), probabilmente come da te annunciato ci sarà bisogno dei soliti hack per una cosa così semplice.
Ma mi chiedo, c’è un motivo preciso per cui IE non ha ancora implementato :before e simili?
# - postato da Psicomante - 02 Novembre 2006 - 16:12
2
Anche io ho avuto la necessità di aggiungere una “progress bar” al mio blog.
Mi serviva per indicare la percentuale di avanzamento riguardo allo sviluppo del nuovo tema x il css reboot (che è online, ma non è ancora completamente apposto :D)Cmq, avevo fatto in questo modo…
http://lab.epper.org/css/progr.....gress.html
Facendo così non ho il vincolo della larghezza fissa…Ho avuto modo di testarlo con successo su IE 7, IE 6, IE 5.5, Opera 8, Opera 9, Firefox 2, Firefox 1.5.
Certo, il markup non è proprio logico… Però…