Telefono: +39 392 33 73 731
Email: info@zod.it
Ti è capitato per caso di preparare un bel sito nuovo HTML5, stilizzato con CSS3, pensato responsive design, pieno di media queries, tutto funzionante in Firefox, Chrome, Safari, IOS e Android, che sia adatta nei desktop, tablet, e mobile... ma incredibilmente lo vedi tutto scassato in Internet Explorer? Bene, sei nel posto giusto!
C'è una cattiva notizia: Internet Explorer non ci ha ancora liberato della sua presenza, e nemmeno delle sue sgradevoli idee contro gli standard. Ma c'è anche una buona notizia: è possibile costringerlo a comportarsi bene.
La versione 10 certamente supporta HTML5 e CSS3 in modo ottimale, e possiamo dire che anche la 8 può funzionare se aggiungiamo qualche fix al codice. Però i geni del browser hanno voluto lasciare in queste versioni (dalla 8 alla 10) una funzione automatica molto imbarazzante: la Visualizzazione Compatibilità (Compatibility Mode).
Si tratta di un bottoncino nella barra dell'indirizzo, con l'icona di un foglietto strappato in orizzontale. Se l'icona è accesa, assume un colore azzurrino e significa che la compatibilità è attiva (cioè male), invece se l'icona è grigia significa che è spenta (cioè bene).
L'utente ovviamente può controllare quel bottone, e salvare i siti che vede nella modalità giusta. Però mica tutti gli utenti sono così "smart", il più delle volte (senza offesa per il pubblico IE), quando un sito appare schifoso pensano immediatamente che sia rotto, non vanno certamente a immaginare che sia colpa di quel bottone anonimo (e brutto).
Però a noi, che facciamo siti web nuovi, tutta questa storia non importa molto, giusto? Il nostro obiettivo è mostrare il nostro sito nel modo corretto!! Dobbiamo forzare Internet Explorer a non usare la visualizzazione compatibilità!
Per fortuna il fix è facile: basta inserire in alto nella pagina un tag <meta>:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Lo possiamo mettere subito dopo l'apertura di <head>. In pratica stiamo dicendo a Internet Explorer di mostrare la pagina nel modo più recente possibile.
Il tag ha molte altre opzioni oltre a questa:
content="IE=5"
content="IE=7"
content="IE=EmulateIE7"
content="IE=8"
content="IE=EmulateIE8"
content="IE=9"
content="IE=EmulateIE9"
content="IE=edge"
Le differenze nelle opzioni:
Le opzioni senza "Emulate" ignorano le direttive <!DOCTYPE> della pagina, e usano invece ciò che impostiamo come valore, ad esempio se abbiamo IE=8 alcune pseudo classi e la proprietà table border spacing verranno supportate meglio rispetto ad IE=7.
Mentre con "Emulate", IE segue la direttiva <!DOCTYPE> della pagina, ma nel modo che farebbe la versione di IE indicata, quirks mode in IE=5.
Probabilmente queste opzioni servono quando avete per le mani un sito di concezione vecchia e non potete rifarlo, ma IE 10 da problemi di visualizzazione e gli utenti lo stanno usando. Certo che questo fall back mi sembra un approccio cervellotico.
Nel 2018 ho scelto Serverplan, leggi l'articolo "La mia esperienza con gli hosting" per conoscere la mia opinione sui servizi e le prestazioni di alcuni famosi provider italiani.
Commento di GIUSEPPE
Domenica 26 Gennaio 2014Mi piace!
Sto creando un nuovo negozio con Prestashop dopo giorni di lavoro mi sono accorto che IE mi ingarbuglia il sito in locale mentre con Mozzilla,Crome,Safari è tutto ok.
Ho abilitato dal BO Utilizza CCC per i fogli di stile CSS ho solo risolto parzialmente..Vorrei proprio evitare di fare tutto a capo.
La tua spiegazione è ottima ma non ho capito dove inserire il tag per IE.
Potresti essere cosi gentile da spiegarmi meglio tutti i passaggi dove inserirli e cosa inserire.
Grazie
Risposta di Marco
I problemi che stai sperimentando dipendono da un sacco di varianti:
Poi considera che puoi aiutare IE coi fix fino a ver. 8. Per IE7 e inferiori non c'è molto da fare, non supportano troppe cose, Bootstrap 3 ha dichiarato esplicitamente di non supportare più niente. Quindi IE 7 vedrà il sito come un mobile (o quasi).
Quindi senza analizzare a fondo la situazione mi è impossibile darti reali soluzioni. Per quanto riguarda il codice del tema in questa pagina, devi copiare quel meta che indico, e metterlo in template "header" del tema di Prestashop. Mettilo davanti a tutti, subito dopo l'apertura di <head>.
Commento di Giuseppe
Mercoledì 29 Gennaio 2014Grazie!!
Problema risolto,solo che il campo nuovo si è sposato leggermente sulle foto prodotto.
Ma del resto è andato tutto a meraviglia
Risposta di Marco
Ottimo, allora era solo un problema con la (maligna) compatibilità di IE :)
Commento di Fra
Venerdì 08 Agosto 2014Nel doc type HTML5 (che è quello al quale puntiamo), il valore "X-UA-Compatible" viene considerato BAD VALUE da qualsiasi validatore HTML5.
Per ottenere un sito valido ai fini dei nuovi standard, dunque, si dovrà ricorrere a sistemi meno "semplicistici" di quello che hai appena indicato.
Risposta di Marco
Usare HTML5 e CSS3 è scontato, anche fare siti responsive (per me lo è già da un anno e mezzo circa). E' vero che il meta "X-UA-Compatibile" risulta "bad value", è normale perché non è un tag approvato come standard HTML, i validatori lo danno sempre così perché filano dritti seguendo le regole.
Questo però non significa che dobbiamo ignorare la sua esistenza, e che non dobbiamo usarlo, ho sempre rifiutato di adottare un approccio dogmatico nella mia vita. Nel web poi, non sarebbe la prima volta che si adottano soluzioni poco ortodosse per far funzionare IE, oppure altre cose... ricordate l'abominevole Flash al tempo che si usava SWFObject.js per evitare di inserire i tag Embed e Object?
Quindi sostengo che questo meta sia da usare (almeno per ora), limitatamente ad Internet Explorer quando è possibile (approfondisco in seguito), perché altre soluzioni non ce ne sono, o ci limitiamo a fare siti con standard vecchi, rinunciando ad HTML5 e tutto quel che comporta (soluzione inaccettabile), oppure facciamo tutto nuovo ma accettando che gli Internet Eplorer vecchi abbiano problemi di visualizzazione (accettabile, ma se sappiamo come risolvere è meglio). Io scelgo la due.
Ecco quindi cosa faccio io: guardo gli standard e fisso i punti chiave, poi osservo la situazione nel mondo reale, come si muove la gente, come funzionano i browser e quanto sono usati (le statistiche dei browser variano in base alle varie zone del mondo, e per tipo di pubblico). Quindi anche per le media query, e per le varie features di CSS3 (smussi, ombre, gradienti ecc...) ho sempre testato empiricamente, e consultato i siti che ne parlano.
In queste valutazioni serve senso pratico, esperienza, e uno spirito "rinascimentale", ormai perso ai nostri giorni. Andando al sodo, se una cosa è abbastanza superflua (tipo l'ombretta sul testo) e da problemi, la evito oppure trovo un fix per IE.
Se funziona per i browser standard e non ci sono grosse disfunzioni in IE, la uso. Se è una cosa molto importante (tipo l'uso di media queries), cerco il miglior compromesso affinché IE non sia del tutto scassato.
Ma sto divagando :) ... dunque, quel meta io lo metto solo per Internet Explorer, intercettando il browser con script lato server (faccio siti dinamici con Contao quindi uso una sua classe per individuare il browser, per chi è interessato rimando al capitolo "controllo user agent" in questo mio articolo). Quindi se fate siti dinamici provvedete con soluzione simile, così il meta tag non viene scritto per tutti i browser standard (Chrome, Firefox ecc...) ma solo per IE.
Ora, rimane il guaio con IE, ma quantifichiamolo, e poi giudichiamolo.
1) Chrome ha la maggioranza 45% di market share, Firefox 15-20%, Internet Explorer è in caduta, può avere 20% compreso IE10 e IE11. Statistiche: mi sembrano realistiche qui, anche se qui lo danno a 8% ma è abbastanza esagerato, W3schools è frequentato da sviluppatori web. Poi cmq le statistiche migliori sono quelle del sito su cui si lavora.
2) Non tutta la parte di Internet Explorer è rotta, quella grave è con IE8, e un po' IE9, ma sono ormai a percentuali molto basse, rispettivamente 5% e 3%, stanno andando al cimitero degli elefanti. Quindi parlando di IE dobbiamo anche saper distinguere le versioni, e ponderarle singolarmente quando guardiamo le statistiche. Molti fix per IE inferiore a 9 possono essere messi con controlli lato server oppure commenti condizionali.
3) Il target di riferimento, l'utente che si vuole raggiungere è quello normale, con Chrome e Firefox, oppure è quello obsoleto? Io non mi turbo troppo per soddisfare quel 5% tecnofobo e squattrinato. Ok, ci sono anche grandi aziende con computer vecchi, ma io ribatto allora: che aziende sono se non investono negli aggiornamenti IT? I veri manager vogliono il meglio, almeno per se stessi :D
Ce ne sarebbero ancora di cose da dire, ma sto diventando lungo. Concludo con una massima popolare: impara l'arte e mettila da parte.
Aggiungi un commento