Metodi tradizionali

Gli antichi metodi di rilevamento delle funzionalità prevedevano il cosiddetto "UA sniffing", ovvero basavano i loro test sullo User Agent del browser.

Col proliferare dei browser e dei dispositivi mantenere aggiornato il database di questi controlli e` diventato pressoché impossibile.

Diversamente, Modernizr testa la funzionalità.

Front end development done right

...Ogni cosa nasce da un problema

IL PROBLEMA

HTML5 e CSS3 sono parzialmente supportati nel panorama dei browser e dei dispositivi

Non abbiamo uno strumento che durante lo sviluppo ci permetta di prevedere fallback e workaround

"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser"

MODERNIZR

E` una libreria javascript che permette di testare le funzionalita` del browser

LA SOLUZIONE

...Per fortuna abbiamo

METODI TRADIZIONALI

MODERNIZR: COSA FA

Aggiunge classi al tag html per indicare le funzionalita` supportate dall'utente visitatore
Ti permette di eseguire test javascript sulle funzionalita` supportate per caricare o eseguire polyfills (fallback)
Inietta html5shim nel documento per permettere ai vecchi browsers di capire gli elementi html5

Principalmente 3 cose:

INSTALLAZIONE

<script src="modernizr.min.js" type="text/javascript"></script>

Includere la libreria prima degli altri script

Modernizr non ha nessuna dipendenza.

Su sito e` disponibile un configuratore di bundle.

RILEVAMENTO DELLE FUNZIONALITA`

Automaticamente Modernizr aggiungera` qualche classe al tag HTML, tipo:

/* Modernizr's Feature Detection on Chrome 38 */
<html class="js flexbox flexboxlegacy canvas canvastext draganddrop rgba hsla multiplebgs 
backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns 
cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface 
generatedcontent video audio">

/* Modernizer's Feature Dection in IE 9 */
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage 
no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla 
multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity 
no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms 
no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage 
sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

feature

no-feature

.glossy {
    background-image: linear-gradient(top, #555, #333);
}
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

Esempio di fallback CSS

CARICAMENTO DELLE RISORSE

CONDIZIONALE

Modernizr.load({
   test: /* Condizione da testare, ritorna un boolean (true / false) */,
   yep: /* Cosa fare se la condizione e` true */,
   nope: /* Cosa fare se la condizione e` false */,
   both: /* Cosa fare in ogni caso */,
   callback:/* Quando lo script e` caricato */,
   complete: /* Quando tutto e` stato eseguito */,
});

Modernizr.load({
    test: Modernizr.inputtypes.color, // false per Safari
    nope: 'color.js', 
    callback : function(url, result) { // Quando lo script della fallback e` caricato
        // url : 'color.js'
        // result : false
        new jscolor.init()
    },
    complete : function() {
        // Quando tutti gli script sono caricati, a prescindere dal risultato
        console.log("Fine del test")
    },
});

ALTRO ESEMPIO

Avvertenze

Ci sono cose che Modernizr non puo testare:

https://github.com/Modernizr/Modernizr/wiki/Undetectables

Altri link utili...

http://html5please.com/

http://caniuse.com/

E naturalmente....

http://modernizr.com/

Oppure...

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // Scripts che aspetteranno che jQuery sia caricato
    // prima di essere eseguiti.
    load: 'needs-jQuery.js'
  }
]);