Share
I browser stanno diventando più veloci nell'adottare nuove funzionalità web standard, ma resta il fatto che spesso abbiamo poca scelta, ma di fornire un fallback funzionante per le vecchie versioni del browser. In poche parole, abbiamo bisogno di Modernizr.
Modernizr è una libreria JavaScript che rileva le funzionalità del browser, quindi rende disponibile per noi lo status di ciascuno come una classe associata a html elemento, o una proprietà all'interno del Modernizr Oggetto JavaScript.
Modernizr ha recentemente ricevuto alcuni aggiornamenti importanti, ovvero nuove funzionalità, modifiche e miglioramenti. In questo articolo, rivisiteremo Modernizr, dando un'occhiata a ciò che ha da offrire nella versione 3. Cominciamo!
Nelle versioni precedenti siamo stati in grado di scaricare la build di sviluppo (il unminified Modernizr) e un pacchetto personalizzato che include solo funzionalità e API selezionate, attraverso la pagina di Download. Nella versione 3, Modernizr ci consente di farlo attraverso la CLI ufficiale (Command Line Interface).
Per fare ciò, seleziona innanzitutto le funzionalità richieste da Modernizr. Ti verrà quindi data la possibilità di scaricare un file di configurazione JSON.
Il file contiene linee di configurazione che determinano l'output del file Modernizr:
"minify": true, "options": ["setClasses"], "feature-detect": ["test / css / flexbox", "test / css / flexwrap", "test / css / transizioni"]
Prendendo l'esempio sopra, le nostre specifiche per Modernizr sono minime. Il file risultante dovrebbe essere limitato e include solo tre test di funzionalità, vale a dire:
Accentsconagua
FlexBox,flexboxwrap (un nuovo test dalla versione 3),transizione. Questo file di configurazione deve essere utilizzato con l'interfaccia della riga di comando Modernizr. Installare la CLI con NPM con il seguente comando:
npm install -g modernizr
Ora hai accesso a Modernizr comando. Eseguire il comando puntando sulla directory in cui è stato scaricato il file di configurazione JSON. Ad esempio, supponendo che si trovi nella cartella "Download", devi inserire:
modernizr -c ~ / Downloads / modernizr-config.json
Il file ora dovrebbe essere stato generato ed è pronto per la distribuzione nel tuo sito web.
Un esempio di file generato da Modernizr tramite la CLIModernizr aggiunge una pila di classi al html elemento, in base a qualsiasi funzione per cui si sta verificando e verrà aggiunto js se JavaScript è abilitato, sostituendo il no-js classe se aggiunto inizialmente.
La seguente schermata mostra l'ultimo Chrome al momento della scrittura; le classi aggiunte al html dicci che Chrome supporta tutte e tre le funzionalità che abbiamo incluso nella nostra build.
In un browser che lo fa non supporta queste funzionalità, Modernizr aggiungerà a no- prefisso per ogni rispettiva classe. In IE9, in cui nessuna di queste tre funzionalità è supportata, verranno fornite le seguenti classi:
Laddove è supportato il flexbox, è possibile applicare gli stili in questo modo:
.flexbox .column display: flex;
Aggiungere un fallback in questo modo:
.no-flexbox .column display: block;
Nel caso in cui questi nomi di classe coincidano con uno o più nomi di classe, è sempre possibile suggerire un prefisso quando si scarica il file JSON prima di costruire.
In Modernizr 3, questa opzione è configurabile nel file JSON sotto il nome classPrefix proprietà. Per esempio:
"minify": true, "classPrefix": "is-", "options": ["setClasses"], "feature-detect": ["test / css / flexbox", "test / css / flexwrap", " test / css / transitions "]
Apri Terminale e ricostruisci il file. Ora dovresti vedere che le classi sono è- prefissata.
Per esempio, quando si rileva una funzionalità del browser con versioni precedenti di Modernizr FlexBox, noi di solito scriveremo:
if (! Modernizr.flexbox) elem.matchHeight ();
C'erano alcune eccezioni, in cui le proprietà includono trattini o spazi, come ad esempio display: tabella, display: run-in, exif-orientamento ecc. In questi casi, dovremmo scrivere il test in questo modo:
if (! Modernizr ["exif-orientation"]) fallbackFunctions ();
Nella versione 3, tutti i nomi delle proprietà di rilevamento delle funzioni sono a parole singole, senza spazi o trattini. Questo ci consente di essere più coerenti nel nostro codice. Prendendo l'esempio sopra, possiamo ora testare il exif-orientamento nello stesso modo in cui testiamo la funzione flexbox, in questo modo:
if (! Modernizr.exiforientation) fallbackFunctions ();
Questo cambiamento influisce anche sui nomi delle classi aggiunti a html. Se diamo un'occhiata al nostro DOM attraverso i DevTools, ora troveremo il file exif-orientamento il nome della classe non è sillabato. Se hai usato qualche convenzione sui nomi delle classi precedenti, non preoccuparti. Le classi che si presume siano più ampiamente utilizzate sono state fornite con un alias per compatibilità con le versioni precedenti. Vedrai il Display-table e oggetto-fit, per esempio, sono nominati sia con il trattino sia con il trattino.
Alcuni test di funzionalità vengono eseguiti in modo asincrono che può causare un problema di temporizzazione, impedendo risultati corretti. Pertanto, quando si esegue il test seguente per il nuovo formato di immagine WebP, ad esempio, Modernizr ritornerà non definito invece di vero o falso.
console.log (Modernizr.webp); // non definito
Essere in grado di ottenere risultati di test asincroni è stata una delle funzionalità più richieste, quindi (felicemente) la versione 3 ci offre ora Modernizr.on () metodo. Il seguente test dovrebbe ora tornare correttamente.
Modernizr.on ('webp', function (result) if (result) console.log (risultato); // true o false;); Tieni presente che il Modernizr.on () il metodo è generalmente applicabile a tutti i test delle funzionalità, ma è consigliabile utilizzarlo solo per le funzionalità asincrone, tra cui:
WebPAPNG (PNG animato)jpeg-xrdataworkersblobworkersexif-orientamentocsshyphensveloceDati-uriLo sviluppo di YepNope è stato interrotto a favore di migliori caricatori di script e gestori delle dipendenze come Require.js. In precedenza, in Modernizr 2, potresti aver eseguito il fileModernizr.load () metodo per caricare i file JavaScript in base al feedback del test delle funzionalità.
Modernizr.load (test: Modernizr.flexbox, no: 'matchHeight.js');
Tuttavia, poiché YepNope è stato deprecato, questo metodo è stato eliminato anche in Modernizr 3. The Modernizr.load () non è più applicabile. Quindi, valuta il tuo codice legacy per le istanze di questo metodo se prevedi di aggiornare alla versione 3.
Modernizr è stata a lungo una delle mie librerie obbligatorie per qualsiasi progetto, quindi sono entusiasta di vedere tutti questi aggiornamenti. Modernizr 3 è stato effettivamente ricostruito da zero, e con circa 99 nuovi test di funzionalità i cambiamenti sono piuttosto schiaccianti! Segui i passaggi di questa guida, personalizza la tua build, quindi consulta questi riferimenti per approfondire:
