Come visto anche nell'articolo precedente, la compatibilità Cross Browser ha un'importanza fondamentale nella realizzazione e nel successo di un sito web.
Visto e considerato che non tutti i browser interpretano correttamente ed allo stesso modo i tag HTML, e soprattutto se ne infischiano delle direttive del W3C (almeno nel passato), i Web Designer si ritrovano a dover risolvere problemi di compatibilità grafica tra i vari browser a dir poco ostici. Non solo abbiamo un elevato numero di browser, ma questi si moltiplicano ancora per le loro varie versioni, e riuscire a far vedere bene un sito con tutti, credetemi, è un'impresa faraonica se non impossibile. Comunque noi non ci scoraggiamo ed oggi cerchiamo di rendere la vita più facile agli sviluppatori web parlando di come risolvere (Fix) un bug dell'odiatissimo Internet Explorer 6 (ed anche IE5.5).
Il bug in questione riguarda la non corretta interpretazione della pseudo class hover in Internet Explore 6 e versioni precedenti.
In sostanza le pseudo classi vengono definite tra le regole CSS (Cascading Style Sheet) per ottenere un determinato effetto su un tag HTML quando questo si trova in un determinato stato. In particolar modo la pseudo class hover serve per definire il comportamento di un elemento quando su di esso vi passa sopra il mouse, ad es. la regola CSS:
a:hover{color:red;}
significa che i link (tag a) prenderanno il colore rosso non appena vi si passa sopra col mouse.
La proprietà hover è applicabile anche ad una classe di un attibuto, ad es. in questo modo:
a.navigation:hover{color:red;}
questa regola indica che saranno di colore rosso al passaggio del mouse solo quei link che definiscono la classe navigation. Insomma la proprietà hover è spesso usata per link e menù di vario genere.
Facciamo un'ulteriore esempio per entrare nel nocciolo della questione, supponiamo di avere un menù di navigazione creato con le unordered list, cioè dal tag ul con i suoi vari elementi li, in questo modo:
<ul id="navmenu">
...
<li>...</li>
...
</ul>
ed applichiamo una regola CSS nel nostro foglio di stile, così definita:
ul#navigation li:hover {... ;}
significa che ha tutti gli elementi li, figli di ul con id=navigation al passaggio del mouse vogliamo dare una certa formattazione; tale tecnica come detto precedentemente viene spesso usata per creare menù di navigazione, ed il fatto che Internet Explorer 6 ( e suoi predecessori ) non l'iterpreta correttamente crea un problema di visualizzazione del nostro sito da parte degli utenti che usano questo browser, spesso di fatto non permette la sua normale navigazione.
I Web Designer lo sanno bene, ed ovviare a questo problema non è banale, e di fatto rende odioso IE6. Tuttavia esistono delle soluzioni per fixare detto problema, alcune basate su JavaScript che però non sempre portano ai risultati sperati. Quella che esporremo invece fà uso di un file .htc, HTML Components sono file proprietari di Microsoft creati per IE, implementano comportamenti dinamici (DHTML) su Internet Explorer per l'appunto.
Quindi per fixare il bug, scarichiamo il file cssHoverFix.htc (2,56 kb), e salviamolo nella root del nostro sito, dopodichè definiamo nell'elemento body del nostro foglio di stile questa regola CSS:
body {behavior:url(cssHoverFix.htc);
e ualà, come per magia anche Internet Explorer 6 finalmente interpreterà correttamente la pseudo class hover. Ovviamente fate attenzione a dove posizionate il file .htc, se lo spostate dalla root del sito, ricordatevi anche di specificare il percorso giusto nella regola css per il body.
I file .htc vengono spesso usati anche per ovviare ad altri problemi d'Internet Explorer 6, come il noto bug in merito alle immagini png in trasparenza, ma questa è un'altra storia. Meno male comunque che giorno dopo giorno questa vetusta versione del browser di casa Microsoft viene sempre più accantonata per passare all'uso di versioni più recenti, ormai la percentuale di utenti che conivolge è veramente minima, si parla di circa il 2 o 3 per cento. Fatto stà che fino a quando non verrà completamente abbandonata, i poveri sviluppatori web dovranno sempre cercare di porre rimedio alle problematiche d'interpretazione html e css che essa suscita.