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

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

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

  1. Ciao! Ottimo articolo! C’è una cosa che mi sento di consigliati, da blogger: quello che manca sono le “demo”, cioè le pagine in cui metti in pratica i tuoi tutorial. Ciao!

  2. Si hai ragione per alcuni articoli recenti ho gia implementato la cosa, di sicuro nella sezione lab di prossima apertura troverai anche la demo x ogni articolo ;). Grazie del tuo commento 😉

    Anche se ovviamente aggiorno il blog quando ce la faccio dato che il lavoro di web designer occupa gran parte della giornata xD

  3. Il file reset è un foglio di stile classico, mettilo dentro l’head del sito, proprio sotto il foglio di stile che usi già.

    La dichiarazione shiv html5 va messa sempre all’interno dell’head ti consiglio di metterla subito sotto il tag del titolo della pagina ciao!

  4. Ciao 🙂 Volevo chiederti , ma questo script js , permette di utilizzare tutti i nuovi tag e attributi di HTML5 , o solo alcuni ?

  5. Ciao Riccardo ti volevo chiedere se questa soluzione va bene per i browser IE 6 e 7 anche.
    Scusandomi ancora ho visto solo la tua spiegazione più comprensione e per questo mi scuso se ti scrivo e do fastidio.
    Buonaserata.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

4 bellissimi set di pennelli d'impatto per Photoshop

4 bellissimi set di pennelli d'impatto per Photoshop