Descărcați Modernizr
Versiunile anterioare au fost disponibile în testul construiește (versiunea neminifitsirovannye) și cu lichioruri personalizate. A fost posibil să se selecteze caracteristicile individuale și API. Descărcați biblioteca este pe pagina de descărcare. Modernizr 3 are linia de comandă CLI, prin ea puteți face toate la fel ca și în versiunile anterioare. Mai întâi, selectați caracteristicile de care aveți nevoie. De asemenea, puteți descărca în mod opțional fișierul de configurare JSON.
Acest fișier descrie setările care determină Modernizr fișier de ieșire:
Următorul exemplu arată setul minim de biblioteci. Fișierul de ieșire va minifitsirovan și va conține doar trei proprietăți:
flexboxwrap (caracteristică nouă în versiunea 3)
Acest fișier va fi utilizat de către linia de comandă Modernizr. Utilizați următoarea comandă pentru a seta CLI și NPM:
Acum avem acces la echipa de bibliotecă. Pentru a executa comanda, du-te la folderul în care a fost încărcat fișierul de configurare JSON. De exemplu, introduceți calea completă către fișierul de configurare:
Fișierul trebuie să fie deja generat și gata de utilizare pe site-ul tau:
Un exemplu al fișierului generat prin CLI Modernizr
Noi înțelegem cu clasele
Proprietățile verificate este înregistrată ca un nume de clasă în tag-ul html. De asemenea, adăugat la clasa rădăcină de js. În cazul în care clasa de tag-ul HTML a fost nici-js, acesta este înlocuit. Următoarea captura de ecran a fost luată cu cea mai recentă versiune Chrome ca din acest scris; după cum se poate observa, HTML contine toate clasele testabile înseamnă browser-ul suporta toate proprietățile.
În cazul în care browser-ul dvs. nu acceptă proprietatea verificat, biblioteca va adăuga clasa cu no- prefixul. În IE9, care nu suportă nici una dintre proprietățile, vom observa următoarea imagine:
Dacă flexbox acceptat, puteți utiliza stiluri, cum ar fi:
Și folbek sub versiunea veche:
Prefixele în clase
Înainte de a descărca construi, puteți adăuga un prefix la toate clasele, în cazul în care aveți în stilurile sunt deja aceeași clasă.
Modernizr 3, această opțiune poate fi configurată printr-un fișier JSON în proprietatea classPrefix. De exemplu:
Executați linia de comandă și re-crea fișierul. Acum, toate clasele prefixat cu este-.
În versiunile anterioare ale Modernizr în determinarea proprietăților acceptate, de exemplu, flexbox am scris după cum urmează:
Era, desigur, câteva excepții legate de cratime și spații, ca în afișajul de proprietate: masă, afișare: run-in, exif-orientare, etc. În astfel de cazuri, testul a trebuit să scrie acest lucru:
În a treia versiune, toate proprietățile numelui făcut un cuvânt fără cratime și spații, ceea ce face codul mai consistent. Acum, dacă luăm exemplul de mai sus, putem testa proprietate-orientare exif la fel ca proprietate flexbox:
Această schimbare se reflectă în clase într-o etichetă HTML. Dacă deschideți Tabloul de bord pentru dezvoltatori, acum clasa exif-orientare în scris, fără o cratimă. Clasele care sunt declarate depășite în formă vor fi înregistrate în ambele cazuri. Captura de ecran de mai jos arată că clasele și display-tabelă de afișare-se potrivesc, există atât împreună, și cu o cratimă.
metode de testare noi
Testele unor proprietăți funcționează în modul asincron, ceea ce cauzează problema de întârziere. Prin urmare, atunci când testul este pornit pe un nou format de imagine WebP, de exemplu, Modernizr reveni nedefinit, dar nu este adevărat sau fals.
De la primirea rezultatelor testelor în modul asincron a devenit una dintre tehnicile preferate în versiunea 3 au decis să adăugați o nouă funcție Modernizr.on (). Acum, testul va returna valoarea corectă:
Rețineți că punct de vedere tehnic Modernizr.on () metoda funcționează cu toate proprietățile, dar este mai bine să-l folosească numai pentru proprietățile care sunt testate în modul asincron:
APNG (PNG animat)