Primul pas
În primul rând aveți nevoie pentru a obține o versiune nouă a bibliotecii cu site-ul său oficial: Modernizr Descarcă Builder.
Bifați caseta de selectare a tehnologiilor care urmează să efectueze teste, apoi a crea propria versiune personală a «Generate» bibliotecă buton. Dacă ați pus jos toate casetele de selectare, codul rezultat va fi suficient pentru o pereche de ecrane notebook-uri mici - doar 15 KB.
Apoi, pur și simplu conectați la pagina dvs. și verificați-l. Dacă totul funcționează, de elementul HTML ar trebui să apară numeroase clase:
După cum puteți ghici cu ușurință ceea ce căpușele adăugat la bibliotecă, iar aceste teste vor fi efectuate prin conectarea Modernizr, și apoi adăugate la clase în funcție de browser. Dar nu uitați să dea elementul HTML clasa nu-js. să se bazeze pe el atunci când JS nu este activat pe client.
Deja în această etapă, este posibil să se creeze o foi de stil foarte eficiente, de exemplu:
Cred că fantezia unui codor experimentat va solicita mai multe exemple colorate și implementate.
Verificarea prezenței unei tehnologii în browser - testare.
La testele pe care le deține Modernizr, puteți agăța evenimente. Pass - Dap cârlig. eșuează - nope. Foarte drăguț.
Dap - conectați script care utilizează capacitățile de geolocalizare ale browser-ului.
nope - Eu încerc să fac fără ele în geo-polyfill.js.
Se spune că aici, de asemenea, astfel încât să puteți face:
Și de ce nu?
Aici este un exemplu de un pic mai complicat:
Nu este prea dificil, nu?
și nu găsesc vina cu cuvântul „poli-umplere“ - MicroSoft mare a fost transferat.
Una dintre cele mai tari caracteristici Modernizr.load - o oportunitate de a construi un plug-in toate scenariile. Pentru mulți poate de nimic de spus, dar utilizatorii HTML5 boilerplate sunt probabil familiarizați cu jQuery de rezervă de la Google CDN. Se pare ceva de genul:
Acesta funcționează în felul următor: în primul rând încearcă să se încarce jQuery în script-urile, și apoi - imediat după verificarea faptului că obiectul jQuery este disponibil. Dacă nu, atunci încearcă să descarce o copie locală a jQuery. Nu este ceva atât de ușor, și Modernizr.load la salvare. Urmați această logică aici, și el va lua în propriile mâini ordinea de scenarii de conectare:
Notă: Utilizați această metodă numai pentru comisioane ilegale, deoarece progresive script-uri de download în loc de paralele pot glisa la viteză.
extensibilitate
Dezvoltatorii foarte la îndemână Modernizr au făcut posibilă extinderea bibliotecii pe cont propriu, cu ajutorul Modernizr.addTest.
Cel mai simplu exemplu:
Documentația are «extensibilitate» secțiune pe extensibilitate, în cazul în care totul este descris în detaliu. Un proiect pe GitHub'e au un dosar în cazul în care pentru a pune toate extensiile personalizate se potrivesc: / caracteristica-detectează /.
Browser-ul Suport
IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Pe dispozitivele mobile - Mobile Safari pe iOS, Webkit pe Android, Opera Mobile, Firefox Mobile, și au mari speranțe pentru sprijinul Blackberry 6+.
concluzie
Mare ajutor pentru proiecte, plus sau minus un public mai larg, atunci când un sprijin bun este mai important decât timpul de încărcare și performanța paginii. Cu toate acestea, dacă știi când să se oprească - este posibil și simplu site-uri cu o singură pagină și să spanzure, doar pentru comoditate sau chiar pentru afaceri.
Modernizr este utilizat într-o destul de mari companii: Twitter, Google, Microsoft.