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
18 comments
fab
7 Giugno 2011 at 9:23
Con explorer 9 mi sa che non c’è problema….buon escamotage.
Paky Romita
7 Giugno 2011 at 10:10
Ottimo. Sicuramente un motivo in più per utilizzare html5!
Fabiana Testini
7 Giugno 2011 at 10:33
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
7 Giugno 2011 at 12:32
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
17 Luglio 2011 at 0:59
Potrebbe essere questo il tuo problema.
Paolo Senigallia
7 Giugno 2011 at 14:42
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
7 Giugno 2011 at 19:53
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
8 Giugno 2011 at 8:41
Paolo prova a mettere tutto in un document ready.
franceesco
8 Giugno 2011 at 17:56
Interessante grazie 😉
Webdev3
8 Giugno 2011 at 19:54
Grazie!!! Ovviamente non interpreta ma traduce?
Att. Ferrante
9 Giugno 2011 at 21:55
non interpreta, traduce soltanto.
come espediente è niente male però non è molto professionale affidarsi a javascript (non su tutti i computer sono attivi!)
Aurora Dellerba
9 Giugno 2011 at 22:18
Ne ero gia a conoscenza, davvero ottimo. Consiglio 😉
nicola
16 Giugno 2011 at 14:02
Usato. Va alla perfezione!
Pier C.
18 Giugno 2011 at 8:20
Salvato in corner 🙂
Grazie!
Trixie
22 Gennaio 2012 at 5:12
Good to see real expertise on display. Your ctonributoin is most welcome.
daniela
19 Giugno 2011 at 22:27
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
19 Giugno 2011 at 22:38
giusto daniela!
Mario Concina
17 Luglio 2011 at 0:57
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.