Indicatori di percentuali fluidi con i CSS - II
Venerdì 3 Novembre 2006 - 12:30
di Alessandro Fulciniti
Nel post di ieri abbiamo visto come sia possibile ottenere indicatori di percentuale fluidi senza markup aggiuntivo e grazie al generated content. L’esempio però purtroppo non funziona su IE dato il mancato supporto dello pseudo-elemento :before e della proprietà content.
L’idea di base si può però elaborare: ecco quindi l’esempio 2 che incorpora uno <span> vuoto per fare il lavoro del generated content e in via teorica in grado di estendere la compatibilità anche su IE.
Ecco il markup:
<div class="progress" id="pe1"><span></span>100%</div>
<div class="progress" id="pe2"><span></span>50%</div>
<div class="progress" id="pe3"><span></span>20%</div>
Ed ecco il CSS, in cui il principio di base è l’uso del margine negativo inferiore sullo span per sovrapporre il testo alla banda verde:
div.progress{width: 60%;border:1px solid #666;text-align: center;
line-height: 1.3em;margin-bottom: 1em}
div.progress span{display: block;height: 1.3em;
margin-bottom: -1.3em;background: #3f3}
div#pe1 span{width:100%}
div#pe2 span{width:50%}
div#pe3 span{width:20%}
Su IE (dalla versione 5 alla 7) c’è però qualche problema: il text-align:center centra erroneamente anche elementi block-level. Ecco infatti come rende:
Sugli altri browser, ovviamente, l’esempio è perfetto. Il passo successivo quindi è eliminare il problema dell’allineamento del testo e dello span. Nell’esempio 3 le cose funzionano anche su IE, se ci accontentiamo
di avere testo che indica la percentuale non centrato.
Altrimenti è necessario un altro compromesso nel markup…ecco quindi l’ultimo esempio, che oltre allo <span> usa un <b> per racchiudere il testo della percentuale: finalmente è compatibile con IE5, IE5.5, IE6, IE7, Opera, Firefox e Safari.
Il risultato finale ha richiesto un po’ di lavoro, è robusto e flessibile e non usa immagini. Certo che rispetto al primo esempio si presenta molto meno elegante e leggero, ma per estendere la compatibilità su Internet Explorer si è dovuto accettare qualche compromesso. Se però si ha la necessità di indicatori di percentuali fluidi credo sia una buona soluzione. Alla prossima.
Commenti
1
Il risultato finale ha richiesto un po’ di lavoro…
Certo, non è così semplice, ma funzionante…
Spesso mi è stato chiesto di visualizzare dati dinamici, relazionati con dei grafici, e questo mi sembra ottimo…
Complimenti# - postato da Demetrio Polimeno - 03 Novembre 2006 - 13:13
2
Molto bello ;-) potrebbe essermi utile:
Grazie 1000
3
Una soluzione è quella di usare gli hack per aumentare la compatibilità, o usare i behavior htc che trovi sul sito di Dean Edwards.
# - postato da Gabriele Romanato - 04 Novembre 2006 - 09:45
4
Gabriele, la versione finale con lo span e il b non ha problemi di compatibilità, neache con IE5.x, e non usa hack. Il compromesso a cui mi riferivo è nel markup, che però non sacrifica il contenuto.
Usare javascript in questo caso forse è esagerato, peserebbe sicuramente più di qualche byte degli elementi aggiuntivi nel markup… e aggiunge una dipendenza in più alla soluzione, imho.
# - postato da Alessandro Fulciniti - 05 Novembre 2006 - 22:43
5
Gli hack non sono da evitare, specie se hai layout complessi. ho testato diversi hack sul validator ed hanno sempre passato la validazione, come il backslash hack. la soluzione di dean edwards è ottimale, se pensi al passo in avanti che fa fare ad IE. cmq, se rimani al livello di demo isolati, la tua soluzione va bene, anche se lo span messo li non facilita la lettura da parte degli screen reader, perchè aggiunge un elemento in più da analizzare. i behavior htc sono usati anche da holly & john per un loro menu. inoltre per gli hack ci sono innumerevoli articoli che dimostrano che, se usati con i commenti condizionali, non danno assolutamente problemi. in mea humile opinione. :)
# - postato da Gabriele Romanato - 06 Novembre 2006 - 07:41
6
Grabiele, a parer mio meglio un paio di elementi aggiuntivi nel markup (che tra l’altro non compromettono l’accessibilità nè la fruibilità sugli screen reader) piuttosto che gli hack.
Inoltre non c’è nessun hack in grado di provvedere elementi aggiuntivi nell’albero DOM della pagina: “IE7″ di Dean Edwards a cui fai riferimento è una soluzione javascript.
In quanto agli hack in generale, il mio punto di vista dovrebbe essere chiaro… meno si usano, meglio è.
# - postato da Alessandro Fulciniti - 06 Novembre 2006 - 20:42