Share
Navigatorii devin din ce în ce mai rapizi la adoptarea de noi caracteristici web standard, dar rămâne faptul că de multe ori avem puține opțiuni decât să oferim o schimbare de funcționare pentru vechile versiuni de browser. Pe scurt, avem nevoie de Modernizr.
Modernizr este o bibliotecă JavaScript care detectează caracteristicile browserului, apoi face ca fiecare dintre ele să fie disponibil pentru noi ca o clasă atașată la html element sau o proprietate în interiorul Modernizr Obiect JavaScript.
Modernizr a primit recent câteva actualizări majore, ceea ce înseamnă noi caracteristici, schimbări și îmbunătățiri. În acest articol, vom revizui Modernizr, aruncând o privire asupra a ceea ce are de oferit în versiunea 3. Să începem!
În versiunile anterioare am putut descărca build-ul de dezvoltare ( unminified Modernizr), precum și un pachet personalizat, care include numai funcțiile și API-urile selectate, prin intermediul paginii Descărcare. În versiunea 3, Modernizr ne permite să facem acest lucru prin intermediul serviciului CLI (Command Line Interface).
Pentru a face acest lucru, selectați mai întâi caracteristicile de care aveți nevoie de la Modernizr. Veți primi apoi opțiunea de a descărca un fișier de configurare JSON.
Fișierul conține linii de configurare care determină ieșirea fișierului Modernizr:
"minify": true, "opțiuni": ["setClasses"], "feature-detects": test / css / flexwrap, test / css /
Luat exemplul de mai sus, specificația noastră pentru Modernizr este minimă. Dosarul rezultat ar trebui miniaturat și include doar trei teste caracteristice, și anume:
Accentsconagua
flexbox,flexboxwrap (un nou test de la versiunea 3),tranziție. Acest fișier de configurare va fi utilizat cu interfața liniei de comandă Modernizr. Instalați CLI cu NPM cu următoarea comandă:
npm install -g modernizator
Acum, aveți acces la modernizr comanda. Rulați comanda indicând spre directorul unde ați descărcat fișierul de configurare JSON. De exemplu, presupunând că este în dosarul "Descărcați", introduceți:
modernizr -c ~ / Descărcări / modernizr-config.json
Fișierul ar trebui să fi fost acum generat și este gata pentru implementare pe site-ul dvs. Web.
Un exemplu de fișier Modernizr generat prin CLIModernizr adaugă o grămadă de clase la html element, pe baza oricăror caracteristici pe care le testați și pe care le veți adăuga js dacă JavaScript este activat, înlocuirea no-js dacă este adăugat inițial.
Următoarea captura de ecran afișează cel mai recent Chrome în momentul redactării; clasele adăugate la html spuneți-ne că Chrome acceptă toate cele trei caracteristici pe care le-am inclus în construirea noastră proprie.
Într-un browser care are nu susține aceste caracteristici, Modernizr va adăuga o Nu- prefix pentru fiecare clasă respectivă. În IE9, unde niciuna dintre aceste trei caracteristici nu este susținută, ni se vor da următoarele clase:
În cazul în care este acceptată flexbox, este posibil să aplicați stiluri cum ar fi:
.coloana flexbox. display: flex;
Adăugarea unei rezervări ca aceasta:
.coloana no-flexbox. display: block;
În cazul în care aceste nume de clasă se întâmplă să se ciocnească cu unul sau mai multe dintre propriile nume de clasă, puteți sugera întotdeauna un prefix atunci când descărcați fișierul JSON înainte de a construi.
În Modernizr 3, această opțiune este configurabilă în fișierul JSON sub numele classPrefix proprietate. De exemplu:
"minify": true, "classPrefix": "este-", "opțiuni": ["setClasses"], "feature-detects" test / css / tranziții "]
Deschideți terminalul și reconstruiți fișierul. Ar trebui să vedeți acum că sunt clasele este- prefixat.
Când detectați o caracteristică a browserului cu versiunile anterioare ale Modernizr, spuneți flexbox, noi scriem de obicei:
dacă (! Modernizr.flexbox) elem.matchHeight ();
Au existat câteva excepții, în care proprietățile includ cratime sau spații, cum ar fi afișare: tabel, afișare: run-in, exif-orientare etc. În aceste cazuri, ar trebui să scriem testul în felul următor:
dacă (! Modernizr ["exif-orientare"]) fallbackFunctions ();
În versiunea 3, toate denumirile proprietăților de detectare a caracteristicilor sunt unice, fără spații sau cu cratime. Acest lucru ne permite să fim mai coerenți în codul nostru. Luând exemplul de mai sus, putem testa acum exif-orientare în același mod în care testăm caracteristica flexbox, cum ar fi:
dacă (! Modernizr.exiforientation) fallbackFunctions ();
Această modificare afectează și numele claselor adăugate la html. Dacă ne uităm la DOM prin intermediul DevTools, vom găsi acum exif-orientare numele clasei nu este decupat. Dacă ați folosit o convenție veche de nume de clasă, nu vă faceți griji. Clasele care se presupune că sunt mai utilizate pe scară largă au fost prevăzute cu un pseudonim pentru compatibilitate înapoi. Veți vedea afișare-tabel și obiect-fit, de exemplu, sunt numite atât cu cratimă, cât și cu liniuță.
Sunt efectuate câteva teste de caracteristică asincronă care poate cauza o problemă de sincronizare, împiedicând obținerea unor rezultate corecte. Prin urmare, când executați următorul test pentru un nou format de imagine WebP, de exemplu, Modernizr se va întoarce nedefinit in loc de Adevărat sau fals.
console.log (Modernizr.webp); // nedefinit
A fi capabil să obțină rezultate de testare asincronă a fost una dintre cele mai solicitate trăsături, așa că (în fericire) versiunea 3 ne oferă acum Modernizr.on () metodă. Următorul test ar trebui să revină acum corect.
Modernizr.on ('webp', funcție (rezultat) if (rezultat) console.log (rezultat); // true sau false;); Rețineți că Modernizr.on () metoda este, în general, aplicabilă tuturor testelor caracteristice, dar este recomandabil să o utilizați numai pentru caracteristici asincrone, inclusiv:
WebPAPNG (PNG animat)jpeg-xrdataworkersblobworkersexif-orientarecsshyphensblițdate-uriDezvoltarea YepNope a fost întreruptă în favoarea încărcăturilor de script mai bune și a managerilor de dependență, cum ar fi Require.js. Anterior, în Modernizr 2, ați putea fi rulatModernizr.load () metoda de încărcare a fișierelor JavaScript pe baza feedback-ului testului de caracteristici.
Modernizr.load (test: Modernizr.flexbox, nope: 'matchHeight.js');
Cu toate acestea, din moment ce YepNope a fost depreciat, această metodă a fost de asemenea abandonată în Modernizr 3. The Modernizr.load () nu mai este aplicabil. Deci, evaluați codul vechi pentru instanțele acestei metode dacă intenționați să actualizați versiunea 3.
Modernizr a fost de mult timp una dintre bibliotecile necesare pentru orice proiect, așa că sunt încântat să văd toate aceste actualizări. Modernizr 3 a fost reconstruit efectiv de la bază și, cu aproximativ 99 de teste noi, schimbările sunt destul de copleșitoare! Urmați pașii din acest ghid, personalizați propria dvs. construcție, apoi verificați aceste referințe pentru a detalia mai departe:
