Estendiamo il grafico – parte 1: elementi storici

Pensiamo di riportare anche un grafico storico (per esempio il picco delle visite storiche) integrato nello stesso grafico.
Questo fa sempre parte della sezione di ciascuna barra, quindi basta modificare la section in questo modo:

<span class=”label”> Firefox:</span>
    <div class=”section”>
        <span class=”chart” style=”width:28%;”>
            <span class=”info” >28%</span>
        </span>
        <span class=”chart2″ style=”width:18%;”>
            <span class=”info” >18%</span>
        </span>
</div>

Notate la presenza di un nuovo elemento span nell’HTML con classe chart2.
Le regole di stile applicate a questo elemento saranno le seguenti:

.chart2{
    display: block;
    background-color: #c0c0c0;
    margin-top: 10px;
    border: 1px solid #909090;
    float: left;
    height: 2em;
}

Insomma: identiche alle regole della classe chart, ma cambiando il colore!
Guardiamo il risultato… stupendo!!!
Ma non mi sento ancora realizzato…sono una persona incontentabile io!

Estendiamo il grafico – parte 2: l’informazione al passaggio del mouse

Per rendere maggiormente “cool” come direbbe un mio amico l’effetto di questo grafico, adesso faremo in modo che (sfruttando la potenza di CSS) le informazioni sulle percentuali saranno visualizzate solo al passaggio col mouse sulla relativa barra del grafico.
Bene allora dobbiamo metter mano solo al CSS ed aggiungere una serie di regole.

span.chart .info, span.chart2 .info{
    font-size: 1em;
    position: absolute;
    background-color: #fffff0;
    border: 1px solid #c00000;
    margin-top: 15px;
    margin-left: 30px;
    padding-top:1px;
    padding-left: 1px;
    height: 1.5em;
    display: none;
}

questo fa in modo che l’informazione risulti sfalsata di poco rispetto alla barra alla quale appartiene. Ma l’ultima regola ( display: none; ) ci dice che non verrà renderizzata dal browser. Quindi se provassimo ad eseguire ora il codice, ci accorgeremo che il grafico sarà identico a prima… ma senza etichette!
Quindi gestiamo la pseudo-classe :hover che ci consente di monitorare quando il mouse è su un elemento della pagina.

span.chart:hover .info, span.chart2:hover .info{
    display: block;
}

Abbiamo fatto… Ma… Ops… su Internet Explorer le etichette informative non funzionano affatto come ci aspettavamo. Che facciamo cancelliamo quello che abbiamo fatto? No! Sfruttiamo quando possibile la potenzialità dei CSS e per Internet Explorer usiamo i commenti condizionali, ai quali siamo tanto

purtroppo abituati.

<!–[if IE]>
    <style>
        span.chart .info, span.chart2 .info{
            margin-top: 5px;
            margin-left: 2%;
            display: block !important;
        }
    </style>
<![endif]–>

In alternativa potremmo modificare il codice così da sfruttare quanto già descritto in uno dei precedenti articoli: Tooltips senza Javascript.
Adesso su Internet Explorer funziona in modo leggermente differente: abbiamo le etichette leggermente sfalsate, e non scompaiono mai.

Dopo aver fatto tutto ciò diamo uno sguardo all’accessibilità: provate a disabilitare i CSS così come farebbe uno screen reader…
Cosa leggete?
Perfetto! Il nostro scopo è raggiunto!
Eccovi l’esempio completo.