Html5 shim

Html5 shim

3006
19
CONDIVIDI

Abbiamo spesso parlato di HTML5, delle sue innovazioni e della sua semantica. Tutto bello e perfetto! Ma quanti designer, quanti sviluppatori hanno tirato il freno a mano in fase di realizzazione e hanno optato per il suo più “stabile” parente di precedente versione? E’ noto, infatti, che browser come “la saga degli explorer” non supportano affatto i tag base del nuovo linguaggio di markup.

Per questo motivo è stata inventata una libreria javascript chiamata “html5shim“. Essa interpreta e decodifica la struttura di una pagina web sostituendo in maniera logica i tag e i nuovi elementi con i più classici div e contenitori supportati da browser moderni e non.

Download

Qui puoi scaricare il file javascript ed includerlo nella pagina web, segue l’utilizzo.

Utilizzo

L’installazione è semplice, basta inserire nella sezione head della pagina web l’inclusione del file appena scaricato:

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

Per alleggerire il caricamento della pagina per tutti i browser non microsoft possiamo avvalerci dei commenti condizionali

1
2
3
<!-- [if lt IE 9]>
<script type="text/javascript" src="html5.js"></script>
<![endif]-->

Migliorare il codice

Il javascript che installerete non fa altro che effettuare un replace logico dei tag html5 con dei semplici div, può succedere, infatti, che su impaginazioni più complesse, installando “shim” la struttura della pagina web non si adeguerà o si adeguerà in parte al modello previsto in html5; questo perché effettuando un replace logico e non fisico i tag “header, section, article, ecc…” non riescono ad essere interpretati dal browser e di conseguenza vengono classificati come elementi “ibridi”. In pratica è come se costruissimo un sito web basandoci sui tag span anziché div.

Di conseguenza possiamo utilizzare 2 modi per risolvere la questione elegantemente, la prima, più semplice via CSS e la seconda via jQuery (da inglobare all’interno della libreria):

section, article, nav, header, footer{ display: block; }
jQuery(function(){
   jQuery('section, article, nav, header, footer').css('display', 'block');
});

Approfondimenti

Html5shim è un motivo in più per utilizzare html5

  • fab

    Con explorer 9 mi sa che non c’è problema….buon escamotage.

  • Paky Romita

    Ottimo. Sicuramente un motivo in più per utilizzare html5!

  • gia testato su alcuni prog. Efficace anche su firefox 3 o altri browser precedenti. Mi ha salvato in diverse occasioni dove avevo scelto html5 un po affrettatamente :-)

  • drago

    Cercavo qualcosa da tempo solo che ho seguito le istruzioni ma con ie non funziona nulla…tutto come prima. Chi mi aiuta? Avete riscontrato anche voi questa anomalia?

    • Mario Concina

      Potrebbe essere questo il tuo problema.

  • Paolo Senigallia

    Tutto perfetto. Un inghippo soltanto: il mio sito è molto pesante e al caricamento della pagina si vede per qualche secondo la versione non ottimizzata mentre poi piano piano il javascript fa effetto ottimizzando tutto. Si può migliorare?

  • Fabio Conchiglia

    Ottima dritta 😉

    @drago
    utilizzi qualche altra libreria tipo scriptaculous, prototype, jquery? Fai un pò di prove perchè potrebbe essere una questione di conflitto js.

  • Fabiana Testini

    Paolo prova a mettere tutto in un document ready.

  • franceesco

    Interessante grazie 😉

  • Webdev3

    Grazie!!! Ovviamente non interpreta ma traduce?

  • forte questo html shim ne avevo sentito parlare. secondo voi è ancora un pò presto passare ad html5?

  • Att. Ferrante

    non interpreta, traduce soltanto.
    come espediente è niente male però non è molto professionale affidarsi a javascript (non su tutti i computer sono attivi!)

  • Aurora Dellerba

    Ne ero gia a conoscenza, davvero ottimo. Consiglio 😉

  • nicola

    Usato. Va alla perfezione!

  • Pier C.

    Salvato in corner :)
    Grazie!

    • Good to see real expertise on display. Your ctonributoin is most welcome.

  • daniela

    oscurare i browser obsoleti no eh? fino a quando saranno create queste patch si darà addito all’utente medio di utilizzare vecchie versioni di browser per navigare su internet.

  • Nunzio Sabatini

    giusto daniela!

  • Mario Concina

    Ho scovato un bug non indifferente all’interno di questo script, ho aggiornato l’articolo aggiungendo la voce “Migliorare il codice“; in questa maniera è perfetto per qualsiasi tipo di impaginazione, mentre, se installato da solo può creare problemi su design più complessi, dategli uno sguardo e adeguatevi a migliorare il codice se non lo avete già fatto.