IMPORTANTE - Questa pagina è scaduta 2779 giorni fa (il 10 Febbraio 2014). Puoi trovare una versione aggiornata dell'articolo Modernizr: HTML5 e CSS3 nei vecchi browser sul nuovo sito web Netdesign.

Sei comunque libero di consultare questa pagina, abbiamo deciso di lasciarla online per trasparenza e per rispetto nei confronti del nostro passato e del nostro lavoro. Questo sito web è stato pubblicato ad Ottobre 2011 ed è scaduto a Febbraio 2014.

ATTENZIONE! Le informazioni riportate in questa pagina non sono più valide o aggiornate e non rappresentano in alcun modo il sito web ufficiale di Netdesign a partire dal 10 Febbraio 2014.

NOTA: Questa pagina potrebbe contenere link rotti e quindi non più funzionanti.

Developers Network

Risorse ed articoli su Javascript, PHP, Python e CSS per Web designer e sviluppatori Web. Consigli utili per un corretto sviluppo di pagine ed applicazioni web.

Modernizr: HTML5 e CSS3 nei vecchi browser

Grazie a Modernizr è possibile testare il supporto nativo alle nuove features offerte da HTML5 e CSS3 permettendo allo sviluppatore di eseguire del codice di Fallback.

Articolo pubblicato il 06/02/2012

HTML5 è l'ultima versione dello standard HTML inizialmente proposto da Opera Software ed ancora in fase di sviluppo. È proprio il suo stato di under development che porta l'HTML5 (ed il CSS3) ad essere da un lato venerato dagli sviluppatori e dall'altro non ancora totalmente supportato da chi sviluppa e rilascia i browser (Microsoft in primis).

L'HTML5 offre effettivamente parecchie tecnologie che semplificano e rendono l'intera procedura di progettazione e sviluppo web molto più flessibile e potente. Funzionalità quali localStorage o canvas permettono infatti allo sviluppatore web di utilizzare il browser come se fosse un desktop; l'HTML5 può insomma rivoluzionare il mondo del Web offrendo agli sviluppatori una serie di API di ultima generazione che permettono di fare cose all'interno di un browser che, fino ad oggi, non potevano nemmeno essere immaginate.

Il supporto nativo all'HTML5

Come abbiamo già detto l'HTML5 - come standard - è ancora in fase di sviluppo e contiene un incredibile numero di nuove funzionalità non ancora ben definite o non ancora standardizzate dal consorzio W3C.

Per farvi un'idea della complessità dell'HTML5, consultate l'immagine seguente che si spiega da sola.

L'HTML5 prevede decine di nuove API sia funzionali che grafiche (CSS3) ed anche se la scelta migliore sarebbe stata quella di definire lo standard prima di implementarlo nei vari browser, gli interessi commerciali - predominanti - l'hanno voluto pubblicizzare il più velocemente possibile così da soddisfare le esigenze delle grandi corporation del Web, contentissime di poter potenziare le loro applicazioni web.

Ad oggi però nessuno dei browser in circolazione supporta il 100% delle nuove API e mentre Mozilla Firefox e Google Chrome sono in testa con circa il 90% delle API supportate, Microsoft Internet Explorer ne supporta soltanto il 52%. È quindi delicato decidere di implementare HTML5 nello sviluppo di nuovi progetti web, o nell'upgrade di progetti già esistenti.

L'aiuto offerto da Modernizr

Modernizr è una libreria javascript relativamente recente, il suo sviluppo è iniziato alla fine del 2009 e permette di testare il browser in cui viene eseguito stabilendo quali API sono disponibili in maniera nativa. Questo permette di stabilire delle funzioni di Fallback caricando all'interno del browser degli script aggiuntivi che offrono allo sviluppatore le stesse API previste dalla funzione HTML5 testata.

Le librerie di Fallback sono generalmente chiamate Polyfill e fortunatamente sono disponibili dei Polyfill - quasi - per tutte le funzionalità dell'HTML5.

Tuttavia non è sempre consigliabile l'utilizzo di Polyfills che, aggiungendo un supporto non ufficiale alle API avanzate di HTML5 e CSS3, appesantiscono sicuramente il rendering dell'intera pagina ed indirettamente il browser dell'utente. È quindi fondamentale durante la progettazione di un sito o di un'applicazione web, stabilire quali funzioni siano veramente necessarie scegliendo di volta in volta come far agire il browser nel caso quella funzionalità non sia nativamente supportata.

Modernizr in pratica

Modernizr permette quindi di testare il supporto nativo sia alle nuove API offerte dall'HTML5 che ai nuovi effetti grafici del CSS3. Il suo utilizzo è semplicissimo e, per scoprire il supporto nativo ad una funzionalità di ultima generazione, basta testare l'output dell'oggetto Modernizr.prop dove prop, che è un metodo dell'oggetto Modernizr, è il nome della proprietà da testare. Vediamo come testare ad esempio il supporto a localStorage.

if(Modernizr.localstorage){ // true, il browser supporta localStorage } else { // false, il browser non supporta localStorage }

Se invece foste interessati ad utilizzare Modernizr per il download automatico di Polyfills, è consigliabile utilizzare il metodo Modernizr.load che accetta come argomento un oggetto contenente il test da eseguire, il path dello script da caricare se il test viene eseguito con successo ed il path dello script da caricare in caso di fallimento del test.

Modernizr.load({ test: Modernizr.geolocation, // Test da eseguire yep : 'geo.js', // Script da scaricare in caso di test positivo nope: 'geo-polyfill.js' // Script da scaricare in caso di test negativo });

0 Risposte a Modernizr: HTML5 e CSS3 nei vecchi browser


Lascia un Commento

La tua email non verrà pubblicata ma sarà utile per notificarti le risposte al tuo commento. I commenti considerati spam non verranno pubblicati. Puoi utilizzare i seguenti tag html nel commento: <p>,<b>,<strong>,<code> e <em>.

Il tuo Nome:



Il tuo indirizzo email:



Il tuo Commento:

Invia Commento

Twitter Stream

Contatta Netdesign

Hai bisogno di consulenza sul mondo dello sviluppo web e dell'ottimizzazione della tua infrastruttura informatica? Contattaci subito, ti aiuteremo a trovare le migliori soluzioni alle tue esigenze di Information Techonology.

Contattaci




Questa pagina è scaduta 2779 giorni fa (il 10 Febbraio 2014). Puoi trovare una versione aggiornata di questo/i articolo/i sul nuovo sito web Netdesign alla sezione Guide

Sei comunque libero di consultare questa pagina, abbiamo deciso di lasciarla online per trasparenza e per rispetto nei confronti del nostro passato e del nostro lavoro. Questo sito web è stato pubblicato ad Ottobre 2011 ed è scaduto a Febbraio 2014.

ATTENZIONE! Le informazioni riportate in questa pagina non sono più valide o aggiornate e non rappresentano in alcun modo il sito web ufficiale di Netdesign a partire dal 10 Febbraio 2014.

NOTA: Questa pagina potrebbe contenere link rotti e quindi non più funzionanti.