Realizzare layout compatibili con internet explorer 6

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

picture 1 299x51 Realizzare layout compatibili con internet explorer 6

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.

picture 2 246x300 Realizzare layout compatibili con internet explorer 6

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 icon smile Realizzare layout compatibili con internet explorer 6 ), 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!

17 pensieri su “Realizzare layout compatibili con internet explorer 6”

  1. Pingback: diggita.it
  2. Concordo con quanto hai detto a proposito di:
    “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”
    e senza voler citare nessuno, ma anzi sì, il blog edit di html.it in perfetta contraddizione con quanto da te esposto e da me pensato.
    In un loro post avevo detto esattamente le stesse cose cheh ai detto su e sono stato praticamente linciato.
    Io credo, anzi ne sono sicuro, dato un presunto Guru i fedeli accoliti lo sosterranno a spada tratta fino alla negazione di se stessi.
    Da domani ricomincio a fare i siti per NN4, ok scherzo però è davvero buffo come il Web non sia altro che l’espressione della vita reale.

    M.

    PS ciao Lauryn, mi fa piacere trovarti anche qui, lo ammetto non vengo più sul tuo forum, più che altro per noia di tutti i forum.

  3. @Marco, molti ragionano sul discorso io sono il webdesigner e faccio quello che voglio… ok.. potrebbe passare ma se lavori per una webagency? se crei un sito di eshop? il progetto a cui lavoro ora e un sito di migliaia di visita al giorno, quasi il 20% usa explorer 6, hce facevo lo ignoravo? probabilmente ora non lavorerei piu a quel progetto.

    Il blog di hml lo leggevo anche io, poi ho scoperto, specie da quando sono all’estero, come sia bello e facile trovare tutte le risorse che vuoi usando google.com invece che google.it
    :)
    un altro problema sono quelli convinti che la loro parola sia “divina”.. io resto dell’idea di considerarlo, poi ognuno fa come vuole…..
    non mela sento di dire a un cliente, anceh nei miei lavoretti extra, cambia browser, fai questo fai quello, lui mi paga e io gli faccio il lavoro, scrivere 5k di codice css in piu no fa male..
    l’etica la lascio agli altri, io prima penso al mio lavoro e a farlo bene.
    :)
    P.S. anceh io non seguo piu i forum, nemmeno io mio!!!
    credo che questo sia un altro argomento di discussione social network, la morte dei forum?
    e grazie per il link del pollo al curry!

  4. Non ho capito se non mi hai capito :-D
    Guarda che ti do ragione da vendere sul discorso che hai portato.
    Il fatto è che ciò che esprimi qui lo hai già espresso in parte nell’altro post sui corsi.
    Io seguo sempre l’etica, non guardo solo al guadagno e forse è per questo che non ho la casa a Venezia come la Postai (lo so mi ammazza se lo legge ma sono invidioso di casa sua :-) ) ma a parte gli scherzi, proprio perché seguo un’etica, non posso dimenticare che accessibilità significa anche non scordarti che esistono altri browser oltre che Firefox.
    Sui forum guarda mi hanno rotto proprio perché li trovo assurdi, capisco che i nickname nascano, crescano e poi muoiano proprio come nella vita reale, ma sono arcistufo di leggere sempre le stesse domande dal 1999, anno in cui ho iniziato ad avvicinarmi seriamente al Web, e soprattutto vedo che ci sono sempre i soliti guru che tutto sanno e che tutti devono osannare senza mai contraddire, ma come dici tu questo è un altro bell’argomento.
    Detto ciò aggiungo solo che per la ricetta ho googolato, spero solo che sia buona.

  5. MArco ho capito benissimo il tuo discorso, e lo condivido in pieno.
    :)
    mi riferivo ai famosi “guru” che dicono : io sono il migliore e lavoro a modo mio.

    per l’etica questo discorso del brwoser molti la mettono sul piano dell’etica, io dico che in questo caso non c’entra tanto l’etica ma il cliente, quindi personalmente lo considero sempre explorer 6, almeno per altri due anni credo.

    Sui forum concordo, pure io sono stufo del mio nick name, preferisco esser “piu me stesso” e meno kaisersose.
    :)
    FOrse mi sono espresso male, ma ultimamente il mio italiano arranca un po… tra spagnolo, catalano e inglese sul lavoro, qua comincio a rimbambirmi.
    :)

  6. A così sei kaiserose? Ho hai letto il mio post di apertura sui forum di Giorgio Tave?
    Credo di aver sconvolto qualcuno dicendo che il mio nick name è nome e cognome, come qui del resto.

    comunque sia, io vado a vedermi Numb3rs in TV.

  7. Io vado sempre a vedere su http://gs.statcounter.com/#browser_version-IT-daily-20090101-20090512

    in italia e scopro ogni volta che un buon 17% delle persone usa IE6 anche se la maggior parte è passata a Ie7 37%.
    Il resto sono Firefox (29%), e altri molto minori tipo safari e chrome (=< 6%)

    Quindi, secondo me… c’è da riflettere… il massimo che possiamo fare è mettere banner nei siti in cui si consiglia di utilizzare firefox o IE l’ultima versione. Ma significherebbe costringere le persone, almeno a mio parere…
    Ciao!!

  8. Si puo consigliare di passare al 7 , ma non tutti lo fanno, anche per via delle copie pirata, parliamoci chiaro ….. ora é uscito anche l’ 8 che renderizza in maniera differente dal 7!!

    Insomma con 3 explorer hai 3 render diversi del sito …… pero fin quando é usato bisogna considerarlo, c’é poco da fare.

  9. Ciao, ho appena risposto a quei lunghi commenti sul sito da te indicato con la mia “visione” sul discorso IE6 si/no.

    Comunque, ho fatto una lettura veloce dei tuoi punti cardine e ti volevo segnalare due cose.

    La prima è che al punto 6, credo ci siano un errore nella frase, perché così sembra che IE6 non gestisca l’:hover, mentre lo fa, ma solo per i tag (non per i div, span, etc..)

    Per quanto riguarda l’important invece, io lo uso largamente ise non devo fare siti istituzionali che hanno bisogno, per legge, della totale compatibilità w3c. Questo perché sfrutto il fatto che IE6 non lo riconosce per riuscire a creare dei CSS unici per tutti i browser, che portano agli stessi risultati. (con qualche eccezione ovviamente)

  10. CIao simplemal, grazie per le segnalazioni. :)
    Si forse mi sono espresso male, ma se hai letto anche gli altri commenti vedrai che l’articolo è scritto in un italiano molto,”frettoloso”, cmq io questo problema lo risolvo a monte con jquery, cosi non devo preoccuparmi.
    Per important il discorso è diverso, io non ho sconsigliato di usarlo, al contrario tra i vari “hacks” è l’unico che ho segnalato, perche cmq resta un hack, e anche io è capitato di usarlo, ho visto tanti css pieni zeppi di important a destra e manca, e in quei casi ho preferito il doppio css, che poi alla fine spesso nemmeno serviva o cmq con pochissime righe di codice modificato.

    Di buono c’è che ormai manca poco per la definitiva “morte” di IE6, quindi diciamo che questo articolo direi già tra un 5-6 mesi non sarà più “utile”, almeno si spera.

    nel frattempo vi segnalo un ottimo articolo, che parla delle differenze, in css, dei 3 browser IE, 6 7 e 8.
    http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
    Vene suggerisco la lettura, ottimo articolo veramente.
    :)
    Ciao!

I commenti sono chiusi.