Forzare Internet Explorer a rispettare HTML5
Ti è capitato per caso di preparare un bel sito nuovo HTML5, stilizzato con CSS3, pensato con responsive design, 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.
Però a noi, che facciamo siti web nuovi, tutta questa storia non importa molto, giusto? Il nostro obiettivo è mostrare il 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, quindi forzate la visione a come sarebbe stata anni fa. Insomma, un obbrobrio.
Articoli correlati
Questo articolo ha 0 commenti