Html5 e internet explorer 8 – come farlo funzionare in modo corretto

Oggi approfondiamo l’articolo aperto qualche settimana fa sul nuovo standard HTML e internet explorer. Come promesso oggi vi illustrero’ come poter usare i nuovi tag per costruire fin da subito, le vostre pagine con il nuovo, potente, standard.

Il problema essenziale (uno dei tanti)  di internet explorer 8 e’ che, costruendo una pagina html 5 di base non riconosce i nuovi tag e pertanto il motore non interpreta correttamente il codice. Come e’ possibile aggirare questo problema? A prima vista sembrerebbe impossibile ma, in realta’, il tutto si risolve con poche righe di codice javascript.

Vediamo come:

<script type="text/javascript">
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>

Come vedete ci viene in aiuto la funzione javascript “document.createElement” che, di fatto crea e associa i nuovi tag html5 e li rende disponibili all’interprete del browser. Ovviamente il codice sopra riportato va messo dentro l’head del vostro sito prima del tag di chiusura </head>.

In alternativa potete scaricare QUESTO FILE JAVASCRIPT e richiamarlo (sempre dentro l’head del vostro sito) con il metodo “classico”:

<script src="tuofilejs.js" type="text/javascript"></script>

Tuttavia vi consiglio di caricare il file con la selezione “eventuale” ovvero:

<!--compatibilita' ie-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

In questo modo, usando questo codice lo script verra’ caricato SOLO se viene individuato il browser internet explorer. Questo per rendere il sito piu’  leggero e con caricamenti piu’ rapidi. E’ possibile personalizzare anche il codice caricandolo solo se viene individuata una versione di IE inferiore alle nove (che e’ gia compatibile con il nuovo standard).

Ecco il possibile listato:

– SOLUZIONE 2: LO SCRIPT VIENE CARICATO SOLO CON IE<9

<!--[if lt IE 9]>       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Per quanto riguarda Internet explorer 9 , come promesso nel corso del precedente articolo, si e’ rivelato (anche dopo la “prova con mano”) davvero un buon browser, veloce e attinente ai nuovi standard (finalmente!).

Ie8 errore di layout anche dopo aver incluso lo script

Molte volte capita che con ie8 anche avendo incluso lo script, il layout venga messo sotto sopra, questo perchè è necessario includere questo documento CSS per resettare alcuni stili soprattutto per quanto concerne i tag article e section.

Se vuoi conoscere qualcosa di più sul nuovo standard ti invito a visitare LA GUIDA ALLE NOVITA’ PRINCIPALI HTML5