Modernizr e Polyfill: HTML5 e CSS3 compatibile con i vecchi browser

Pubblicato il

Realizzare siti web con le nuove tecnologie HTML5 e CSS3 permette di ottenere dei risultati decisamente migliori rispetto alle possibilità che c’erano in passato. Si possono creare interfacce utente più ricche, animazioni integrate nelle pagine senza dover usare applet Java o Flash piuttosto che applicare effetti grafici come ombre o gradienti senza appesantire le pagine con immagini. Tutte queste funzionalità, e moltissime altre, funzionano nei browser più recenti, mentre non sono supportate nelle versioni più datate.

Javascript Modernizr e Polyfill per HTML5 e CSS3
Modernizr e Polyfill per lo sviluppo di siti web compatibili

Che cos’è Modernizr?

Modernizr è un sistema che aiuta gli sviluppatori web ad aumentare la compatibilità dei siti web sviluppati in HTML5 e CSS3 anche con versioni non aggiornatissime dei browser.

Come funziona Modernizr?

Modernizr è una libreria JavaScript che rileva le funzionalità HTML5 e CSS3 supportate dal browser in uso e quindi permette allo sviluppatore web di implementare delle alternative funzionanti.

Più precisamente Modernizr identifica il software utilizzato per navigare ed aggiunge delle classi CSS all’elemento html. Tali classi potranno quindi essere riutilizzate nel foglio di stile per creare delle eccezioni.

Il nome Modernizr potrebbe trarre in inganno e far pensare che automaticamente usando questa libreria si possano usare al 100% tutte le caratteristiche CSS3 e HTML5, non è così: Modernizr serve per identificare la compatibilità ed offre dei suggerimenti. Sarà compito dello sviluppatore programmare adeguatamente il sito web per garantire le funzionalità nei vari browser.

Polyfill: emulare le funzionalità HTML5 nei vecchi browser

Ma se Modernizr non aggiunge le funzionalità del linguaggio HTML5 non supportate dai vecchi browser, in particolar modo Internet Explorer, come si possono usare le nuove caratteristiche di HTML5?

Entrano quindi in gioco degli script particolari chiamati Polyfill.

Si tratta di JavaScript realizzati appositamente per emulare le funzionalità HTML5 non supportate. Si possono quindi accoppiare Modernizr e gli script di tipo polyfill per migliorare il funzionamento dei siti web anche nel caso si usino browser obsoleti.

Conviene usare Modernizr e script polyfill?

La risposta è: «dipende». Mentre Modernizr non influisce in maniera significativa nei tempi di caricamento delle pagine, un eccessivo uso di script polyfill potrebbe avere un impatto negativo nella navigazione. Sarà compito dello sviluppatore stabilire se e quando adottare queste tecniche per bilanciare le prestazioni del sito web. Si deve tener conto della percentuale di utenti che effettivamente potrebbero utilizzare sistemi non compatibili con le tecnologie più recenti.

Creare un sito web cross-browser non deve compromettere caratteristiche importanti come la velocità di caricamento delle pagine e la qualità generale del sito.