CSS  »  Articoli  »  Effetti con CSS 

Esempio 4: una soluzione CSS

Nel terzo esempio abbiamo visto come sia possibile ovviare al flickering di IE6 con un piccolo script: ma c'è una questione... non tutti gli utenti hanno Javascript abilitato, anche se si stima che all'incirca il 95% lo abbia.

C'è un'altra alternativa, un po' più radicale forse, ma che non richiede Javascript nè modifiche e/o aggiunte nella sezione head della pagina. Ecco quindi il quarto esempio, in cui si esclude il rollover su IE fino alla versione 6 inclusa.

Si avrà quindi il rollover grafico su IE7, Opera, Firefox e Safari, mentre su IE6 e IE5.5 il passaggio :hover interverrà solo sul colore del testo. Ecco quindi le tre regole CSS dell'esempio:

Da notare quindi che la terza regola è rivolta solo ai browser capaci di interpretare il child selector (simbolo di maggiore) escludendo quindi IE fino alla versione 6.

Conclusioni

Abbiamo visto in questo appuntamento alcune soluzioni per ottenere un link grafico con rollover attraverso diversi esempi, trattando anche alcune strategie per risolvere il flickering di IE6. La compatibilità degli esempi è buona: sono stati testati con successo sulle versioni di IE dalla 5 alla 7, oltre che sulle ultime versioni di Firefox, Opera e Safari.

Da notare in conclusione che gli esempi usano quattro immagini diverse, lunghe abbastanza da contenere il testo al loro interno. Si potrebbe ottenere una soluzione più flessibile con l'aggiunta di uno span all'interno del link, come abbiamo fatto ad esempio nell'articolo menu con tab grafiche, a cui rimando la lettura per eventuali approfondimenti. Da notare infine che le tecniche qui viste possono essere applicate per creare bottoni grafici per i form, come abbiamo fatto ad esempio nell'articolo Form grafico con i CSS.

Codice e immagini sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter