Ho tratto spunto per questo articolo dopo aver letto un interessante post su italianwebdesign sull’uso e non uso di explorer 6 seguito, e anche partecipato, alla discussione che ne è seguita, come sempre quando si parla di explorer si trovano pareri contrastanti.
Molti dicono che noi webdesigner dobbiamo ignorare IE6, perchè e passato di moda, perche neanche Microsoft lo supporta più, pechè non rispetta gli standard etc.etc.
La mia opinione è che questo discorso, in parte, potrebbe valere per il nostro sito o blog personale, ma non certo quando si parla di clienti, basta dare un occhiata alle statistiche sull’uso dei browser a gennaio di questo anno

statistiche sull'uso dei browser a gennaio 2009
per renderci conto che realizzare un sito non compatibile con explorer 6 equivale a perdere il 18% dell’utenza oggi di internet, davvero possiamo pensare che a un cliente che ci commissiona il lavoro, e quindi ci paga, possa importare qualcosa di questa famosa guerra dei browser( che IMHO ha portato solo più disagi che vantaggi,specie a noi webdesigners)?.
Con questo articolo cercherò di illustrare alcune tecniche, che, personalmente, uso per aggirare il problema, le tecniche ci sono e spesso non abbiamo bisogno nemmeno di hack.
1 – realizzare un foglio di stile solo per explorer 6 con le dovute correzioni e caricarlo a parte.
Questo si puo realizzare tramite i commenti condizionali.
<!–[if IE 6]>
carica il foglio di stile per ie6
<![endif]–>
Oppure si puo usare, come spiegato nel mio precedente articolo, tramite un semplice javascript che riconosce il browser dell’utente e carica il foglio di stile corrispondente.
2- Usare e dichiarare sempre il doctype, meglio se strict.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3- Usare display:inline, al posto di float, anche questo riduce di molto gli errori su explorer 6.
#div{display:inline;}
4 – Usare il position relative.
Questo risolve gia di per se tanti problemi di posizionamento del layout e ci permette sempre di avere il controllo su qualsiasi div, senza impazzire con margin e padding.
5 – Usare il min-height accompagnato dal !important per nascondere il valore reale a IE6.
#div{min-height:200px; height:auto !important}
Tenete presente che !importa e un hack e come tale invalida il codice css, usarlo solo in cas i”estremi”.
6 – Evitare gli hover nei css.
explorer li ignora completamente, si puo risolvere il tutto facilmente grazie a javascript e o framework come jquery.
7 – Evitare di usare valori in percentuali per le dimensioni dei div, quando possibile usiamo misure in px.
Questa e una opinione personale, so che in molti preferiscono i layout liquidi, personalmente preferisco layout a dimensione fissa.
8 – Quando usiamo il float, ricordiamoci del bug dei 3px di IE.
Per risolverlo ci sono varie tecniche, personalmente preferisco la piu semplice, cioè dare un margin negativo di -3px all’elemento(anche questo puo essere “accompagnato” da !Important).
9 – Usiamo codice pulito e immagini ad altezza fissa per i background.
#div{background: url(img.jpg) repeat-x bottom left} meglio cosi
#div{ background-image:url(img.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}
In questo caso abbiamo due soluzioni : usare il pnghack, e la proprieta beahavior, che invalida il codice, a meno che non siamo piu furbi e mettiamo il tutto in un javascript, con un semplice document.write, oppure usare gif specifiche per IE.
In questo caso se l’immagine e alta 10px eil nostro elemento 30px, e l’immagine la ripetiamo in basso a sinistra, probabilmente con IE6 si vedra ugualmente male, per risolvere il problema bisogna usare un altra immagine della stessa altezza dell’elemento(in questo caso 30px) a cui applichiamo l’immagine di sfondo ripetuta.
10 – Cerchiamo di non usare padding quando possibile
sappiamo tutti la differenza nel box model come lo interpreta Microsoft e come fa invece il resto del mondo.

differenze tra il box model interpretato ma Microsoft e il resto dei browser
Bene queste sono alcune delle tecniche, ho volutamente tralasciato selettori particolari, i vari hack(a parte !important che resta sempre e cmq un hack) e i workaround, purtroppo dobbiamo ficcarci in testa che è quasi impossibile realizzare un layout standard per tutti i browser, ma nello stesso tempo bisogna tenere in considerazione questo 18% di persone che usano IE.
Io sono un felicissimo Mac user, “odio” Microsoft e considero safari, specie la versione 4, il miglior browser al mondo. Ma nello stesso tempo sono un professionista pagato(non sempre bene, ma questo e un altro discorso
), e come tale devo pensare al cliente e non a come vedo io il web, e ,credetemi, tra la visione di un webdesigner e quella di un cliente c’è sempre un abisso incredibile( ho avuto clienti che usavano ancora Ie 5.5!!)!
Per me la migliore soluzione rimane quella di adottare un foglio di stile specifico, in fin dei conti se si realizza con standard le correzioni da fare non sono poi cosi tante, ma le tecniche sopra elencate direi che sono una ottima alternativa a chi proprio non vuol saperne di considerare internet explorer 6 come un browser.
Inoltre aggiungo come considerazione personale, restante il fatto che odio IE, che sta benedetta guerra dei browser ha proprio rotto, e che forse sarebbe ora che il w3c invece di standardizzare sempre i linguaggi, come sta facendo con html5, provasse a convincere le varie case produttrici a adottare uno standard unico per tutti i browser, ma questo credo sia qualcosa di impossibile.
Spero che questo articolo possa essere utile, mi piacerebbe sapere anche le vostre opinioni e le tecniche che adottate voi per rendere “standard” il browser meno “standard” del mondo!
[ratings]
Hasta luego!