In questo articolo vedremo come un markup semplice e una piccola immagine di sfondo siano in grado di rendere visivamente degli indicatori di percentuali che potranno essere utilizzati per mostrare progress bar, percentuali di utilizzo, risultati sondaggi e quant'altro.
Vediamo subito l'esempio di
base che accompagna l'articolo.
Il markup
Il markup dell'esempio è piuttosto semplice. Ciascuna barra è infatti identificata e individuata da un div class="progress" con al suo interno uno span:
<div class="progress">
<span style="background-position:-10px 0">90%</span>
</div>
La particolarità è che nel markup viene usato per comodità uno stile CSS inline, che ha lo scopo di dare la misura all'indicatore; torneremo sul dettaglio in seguito. Basti sapere per ora che nel modificare le percentuali nell'HTML sarà necessario modificare anche lo stile inline.
Prima di procedere con il CSS, vediamo l'unica immagine utilizzata nell'esempio. È una semplice PNG larga 200px e alta 30px, in cui la metà è la parte "piena" e l'altra metà è grigia, ad indicare la parte mancante:
Da notare che i nostri indicatori, usando un'immagine simile, dovranno essere esattamente larghi 100 pixel, ovvero la met‡ dell'immagine.
Il CSS
Ora passiamo al CSS dell'esempio. Per prima cosa gli stili sul div:
div.progress{width: 100px !important; width /**/: 104px;
margin: 0.5em 0;border: 1px solid #CCC;padding: 1px;
font: 12px Arial,sans-serif;text-align: center}
Usando il Box model hack semplificato, abbiamo specificato una larghezza utile ai
contenuti di 100px, un bordo grigio e un padding di un pixel. Viene poi definito il
font e un'allineamento centrato. A questo punto gli stili sullo span:
div.progress span{display: block; width: 100px;
background: #ECECEC url(progressBk.png) no-repeat 0 0;
color: #002F7E}
Per far sì che assuma tutta la larghezza del div che lo contiene, per prima
cosa lo span viene reso block; viene poi specificata l'immagine di sfondo (che è
larga esattamente 200 pixel, di cui una metà risulta piena) e il colore del testo blu scuro.
A questo punto sarà necessario un piccolo conto per sistemare l'immagine di sfondo:
attraverso uno stile inline la si traslerà verso sinistra di un valore pari a 100-X pixel,
dove X Ë il valore dell'indicatore.
Per esempio, se la barra indica 80%, il background-position sarà sistemato a -(100-80) pixels,
ovvero -20px, come nel caso dell'esempio:
<div class="progress">
<span style="background-position:-20px 0">80%</span>
</div>
Da tener presente che lo zero indicato nel background-position si riferisce
alla coordinata verticale, e andrà sempre specificato, indipendentemente
dalla percentuale che si vuole mostrare.
L'esempio è così ultimato: oltre al CSS incorporato
con le due regole per le barre, è importante notare che per ciascuno span c'è
il corrispondente stile inline.
Esempio pratico
Dopo aver presentato il semplice procedimento per realizzare degli indicatori percentuali
grafici mediante i CSS, eccoci quindi al secondo esempio,
basato sulla stessa tecnica ma che potrebbe rappresentare un esempio reale, ovvero delle
statistiche di utilizzo dei browser. Lascio al lettore il suo studio per esercizio:
la tecnica utilizzata è del tutto simile a quella del primo esempio. In questo caso si sono
però usate le liste di definizione per la marcatura e i float opposti per sistemare coppie
dt-dd.
La compatibilità dei due esempi è piuttosto buona: sono stati testati con successo sulle
versioni di Internet Explorer dalla 5.0 alla 7, Opera, Firefox e Safari. Gli esempi sono
disponibili per il download. Alla prossima.
