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
