CSS compatibili con Internet Explorer
Vi sarà sicuramente capitato di incappare nei rebus del “funziona su tutti i browser tranne che su Internet Explorer”!
Internet Explorer è infatti croce e delizia (più croce che delizia) dei web designer, infatti sono parecchie le sfumature compatibili con tutti i browser eccetto IE.
Vediamo in questo post come ovviare il problema.
Attraverso i commenti nei fogli di stile CSS possiamo imporre di vedere il sito con un CSS personalizzato quando l’utente che apre il sito lo fa attraverso ie, possiamo anche indicare un foglio di stile per ogni versione di explorer. Dobbiamo ammetter che da IE 9 in poi molti problemi son stati risolti però la maggior parte dei siti responsive danno problemi di compatibilità con le versione explorer 8 e antecedenti.
COME ASSOCIARE UN CSS PERSONALIZZATO SOLO PER CHI USA EXPLORER
Nell’HEAD del nostro sito dobbiamo inserire i seguenti commenti:
- <!–[if IE]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni di Internet Explorer
- <!–[if IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – versione 6 di Internet Explorer
- <!–[if !IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni tranne la 6 di Internet Explorer
- <!–[if gt IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni superiori alla 6 (esclusa) di Internet Explorer
- <!–[if gte IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni superiori alla 6 (compresa) di Internet Explorer
- <!–[if lt IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–>– tutte le versioni inferiori alla 6 (esclusa) di Internet Explorer
- <!–[if lte IE 6]>CODICE DA INSERIRE O RICHIAMO A UN FOGLIO CSS PER IE<![endif]–> – tutte le versioni inferiori alla 6 (compresa) di Internet Explorer
Possiamo selezionare la versione di explorer semplicemente cambiando il numero 6 con il numero della versione ci interessa.
I COMANDI CSS CHE EXPLORER NON LEGGE DALLA VERSIONE 5 ALLA VERSIONE 8:
- l’evento
:focus
; - gli eventi
:before
e:after
; - il contenuto generato;
-
border-spacing
per le tabelle; -
empty-cells
per le tabelle; caption-side
per le tabelle;-
clip
; - l
outline
; - il valore
inline-block
per la proprietàdisplay
; - i valori legati alle tabelle per la proprietà
display
; - la definizione dei tipi di media con la direttiva
@-import
. - position: fixed.
Per avere l’elenco completo potete usufruire del documento Microsoft presente in questo link.
Commenti