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:
Per alleggerire il caricamento della pagina per tutti i browser non microsoft possiamo avvalerci dei commenti condizionali
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
Con explorer 9 mi sa che non c’è problema….buon escamotage.
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 🙂
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?
Potrebbe essere questo il tuo problema.
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?
Ottima dritta 😉
@drago
utilizzi qualche altra libreria tipo scriptaculous, prototype, jquery? Fai un pò di prove perchè potrebbe essere una questione di conflitto js.
Paolo prova a mettere tutto in un document ready.
Interessante grazie 😉
Grazie!!! Ovviamente non interpreta ma traduce?
non interpreta, traduce soltanto.
come espediente è niente male però non è molto professionale affidarsi a javascript (non su tutti i computer sono attivi!)
Ne ero gia a conoscenza, davvero ottimo. Consiglio 😉
Usato. Va alla perfezione!
Salvato in corner 🙂
Grazie!
Good to see real expertise on display. Your ctonributoin is most welcome.
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.
giusto daniela!
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.