Modernizr - Modo corretto di caricamento polyfill/utilizzo di rilevamenti personalizzati

Question

Desidero utilizzare alcuni nuovi attributi di modulo HTML5 e tipi di input su una pagina Web. Alcuni browser li supportano già, altri no e mai lo faranno. Ecco perché voglio usare Modernizr - e questo è stato il mio problema inizia.

A mio parere, Modernizr non è un polyfill, ma uno script in grado di verificare se il browser è in grado di eseguire alcune nuove operazioni HTML5/CSS3. Se necessario, è possibile caricare un polyfill che "emula" queste funzionalità in modo che possano essere utilizzate nei browser non di supporto/precedenti. Questo è corretto, immagino?

Per quanto riguarda il test/caricamento: Qual è il modo corretto o migliore per caricare polifibre con Modernizr?
Nella documentazione ho trovato questo:

Modernizr.load({ 
    test: Modernizr.geolocation, 
    yep : 'geo.js', 
    nope: 'geo-polyfill.js' 
}); 

ma alcune pagine anche fare in questo modo:

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} else { 
    // bind to normal click, mousemove, etc 
} 

Inoltre, come faccio io in realtà a conoscere come queste caratteristica rileva sono chiamati? Qualcosa come Modernizr.geolocation esiste sicuramente per ogni funzione di rilevamento?

Nel repository GitHub di Modernizr, ci sono anche molte funzioni fornite dagli utenti. Come posso implementare questi nella mia versione di Modernizr? O è meglio usare semplicemente il loro costruttore?

In Safari, la convalida del modulo HTML5 funziona, ma non esiste un'interfaccia utente per la visualizzazione dei messaggi di errore. Fondamentalmente, la funzionalità è appena implementata. Ecco perché Modernizr dà un falso positivo in Safari, come già menzionato qui: https://github.com/Modernizr/Modernizr/issues/266 Apparentemente qualcuno ha risolto questo problema con un test personalizzato, ma ancora non capisco come usarlo.1

Answer 1

Le due tecniche che stai vedendo sono entrambe valide.

Nel caso della versione yep/nope, questo è il modo ideale di caricare un polyfill da includere in un file separato. Questo non deve essere Javascript - può anche essere un file CSS.

Nel caso del blocco standard JS if(), ciò sarebbe più utile se si avesse un codice dipendente dalla funzione di blocco nello stesso file JS che si desiderava attivare o disattivare a seconda che la funzione fosse disponibile.

Quindi entrambe le varianti hanno il loro posto.

Tuttavia, si può anche vedere l'opzione if() blocco viene utilizzato per includere file JS separati, perché la sintassi yep/nope non era disponibile in alcune versioni precedenti di Modernizr. Yepnope è in realtà una libreria completamente separata che è stata incorporata in Modernizr per rendere più leggibile la sintassi per il caricamento dei file polyfill.

Re la tua domanda su come sapere quali sono le funzionalità che Modernizr è in grado di rilevare, la risposta è, ovviamente, nella documentazione di Modernizr.

Cerca nella documentazione (http://modernizr.com/docs/) per la sezione "Funzionalità rilevate da Modernizr". Questo ha un elenco di tutte le funzionalità rilevate, insieme al nome che gli viene dato da Modernizr.

Re la funzione rotta rilevata che hai menzionato - il biglietto a cui sei collegato è stato contrassegnato come chiuso quasi un anno fa, e guarda dalle note sul biglietto come se il codice per il test migliorato sia stato aggiunto al principale Codice Modernizr. Assicurati di eseguire la versione più recente e controlla se questo funziona correttamente.

Answer 2

A partire da Modernizr v3, l'utilizzo di Yepnope tramite Modernizr.load() è stato deprecated. Una buona alternativa è usare jQuery:

if (Modernizr.geolocation){ 
    console.log('match'); 
} else { 
    // load polyfill 
    $.getScript('path/to/script.js') 
    .done(function() { 
    console.log('script loaded'); 
    }) 
    .fail(function() { 
    console.log('script failed to load'); 
    }); 
}