Html5 shim

Html5 shim

6229
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:

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

19 COMMENTI

  1. 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?

  2. 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?

  3. Ottima dritta 😉

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

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

  5. 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.

  6. 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.

LASCIA UN COMMENTO