Powered by Google
Hack CSS
Gestione Crossbrowser delle Immagini Linkate
Diversi comportamenti dei browser
Quello che vogliamo ottenere in questo tutorial è questo effetto.
Le varianti sono due, la prima è forse un po' più "sporca", ma funziona anche per altre cose (è quindi utile capirla); la seconda funziona solo in questo caso.
Con Mozilla e Opera basterebbe scrivere:
a img{
border-width: 1px;
}
a{
color: red;
}
a:hover{
color: blue;
}
Ignorato da Internet Explorer. (Il border width non è necessario, l'ho messo per evidenziare che con un browser standard è il bordo dell'immagine a cambiare colore e non il bordo del link).
Con Internet Explorer bisognerebbe invece scrivere:
a{
border: 1px solid red;
}
a:hover{
border: 1px solid blue;
}
Ma ecco cosa otterremmo con un browser standard:
Il bordo, infatti, prende l'altezza del paragrafo.
Due CSS in uno
CSS per Internet Explorer
Quello che dobbiamo riuscire a fare è far interpretare ad Internet Explorer il suo codice errato e farlo ignorare agli altri browser. Vediamo come:
a{
border: 0 !important;
border: 1px solid red;
}
a:hover{
border: 1px solid blue;
}
Scrivendo border: 0 !important diciamo ai browser che supportano questa proprietà che, qualsiasi informazione contraddittoria trovino, questa è quella che vale!
Quindi, anche se di seguito nel CSS c'è scritto che il border è di 1px, questa sarà ignorata. Fortunatamente !important non è supportata da IE, quindi per lui vale l'ultima proprietà che trova, cioè 1px :)
CSS per browser standard
Vediamo ora come ottenere il rollover anche con Mozilla ed Opera senza che questo crei problemi anche con Internet Explorer.
img{
border: 1px solid red !important;
border: 0;
}
Prima cosa diamo il bordo all'immagine. Il discorso è lo stesso di prima: la prima definizione del border è quella che prevale per i browser che supportano !important (Opera e Mozilla, ad esempio) la seconda deifinizione, invece, sovra scrive la prima per Internet Explorer.
La prima parte è fatta. Ora ci resta solo da far cambiare colore all'immagine al passaggio del mouse anche con i browser standard; per fare ciò possiamo usare la pseudo classe :hover applicata alla classe img (operazione non supportata da IE):
img:hover{
border: 1px solid blue !important;
}
Il codice completo, quindi, è:
a{
border: 0 !important;
border: 1px solid red;
}
a:hover{
border: 1px solid blue;
}
img{
border: 1px solid red !important;
border: 0;
}
img:hover{
border: 1px solid blue !important;
}
Varianti
Ho usato questo metodo per introdurre la possibilità di utilizzare :hover anche applicato a classi diverse che "a", ma avremmo potuto ottenere lo stesso risultato anche con un metodo più semplice (anche se per certe cose è indispensabile utilizzare img:hover), ecco un esempio:
img{
border-width: 1px !important;
border-width: 0;
}
a{
border: 0 !important;
border: 1px solid red;
color: red;
}
a:hover{
border: 1px solid blue;
color: blue;
}
Dovreste aver già acquisito le conoscenze necessarie per capirlo anche senza spiegazioni ;)
Considerazione importante
Con IE ho riscontrato che aggiungendo il doctype, se l'immagine supera una certa dimensione in altezza, il bordo superiore non viene visualizzato. Per risolvere basta dare all'immagine un margine superiore pari al bordo del link. Quindi, in questo caso:
img{
border-width: 1px !important;
border-width: 0;
margin-top: 1px;
}
