Se spune adesea că, atunci când în curs de dezvoltare software-ul există doar o singură constantă - schimbare. Într-un mediu de dezvoltare web, există o altă constantă - inconsecvențele browser. Una dintre cele mai mari probleme în aplicațiile web este o creștere constantă a numărului de platforme, browsere și dispozitive.
Cum poate un designer web sau dezvoltator pentru a ști dacă pentru a rula o anumită funcție pe platformele țintă și browsere?
instalarea Modernizr
Primii pași este, desigur, descărcați Modernizr. Două opțiuni sunt disponibile pentru download sau versiunea completă a Modernizr, sau de a crea o versiune personalizată, care va include numai acele caracteristici pe care doriți să le utilizați. Din moment ce această bibliotecă ar trebui să fie plasat la începutul paginii, este mai bine să se efectueze reglarea manuală atunci când descărcarea. Cu toate acestea, suntem acum a descărca versiunea completă, care acceptă toate caracteristicile:
Pentru a instala Modernizr nevoie pentru a adăuga un script pentru fiecare pagină, pe care îl va folosi. Aici sunt documentul HTML5 de bază:
Acest script va trebui să-l descărcați la capul documentului, mai degrabă decât în partea de jos a paginii sunt situate de obicei, script-uri pentru o performanță mai bună. Pentru modernizr.js corespunzătoare în funcțiune amplasate în secțiunea cap.
Introducerea clase în HTML folosind Modernizr
Probabil ați observat deja că eticheta HTML marcare vyshe atribuit clasei „nu-js“. În timpul de încărcare a paginii Modernizr înlocui această clasă pe „js“. Apoi, împreună cu biblioteca clasei js pentru a adăuga o clasă la toate caracteristicile pe care browser-ul acceptă și clase de funcții pe care browserul nu acceptă.
De exemplu, aici este modul în care arată tag-ul HTML pentru versiunea curentă a browserului Chrome:
Dar se pare că această etichetă pentru Internet Explorer 7:
Puteți utiliza aceste clase pentru a crea stiluri CSS pentru browsere specifice nu acceptă noi caracteristici. De exemplu, doriți să dea buton stil cu transparență parțială:
În cazul în care browser-ul dvs. nu acceptă proprietatea CSS opacitate, butonul apare cu un fundal negru în loc de translucid gri.
Folosind clasa modernizr adăugat, puteți suprascrie stilul inițial:
Vă puteți, de asemenea, la această întrebare în sens invers, adică în primul rând pentru a seta stilul de browsere mai vechi, iar apoi pentru un browser care acceptă opacitate:
Următoarea verificare a poate fi folosit pentru a crea ramuri logice:
Cu toate acestea, această abordare creează un cod destul de umflat. Cea mai bună opțiune este condiționată de încărcare de resurse dependente rezultatele testelor Modernizr.
încărcător Modernizr
În exemplul de mai sus, bootloader determină dacă browser-ul acceptă LocalStorage. Dacă da, ce se va întâmpla asincronă de încărcare fișier localStorage.js. În cazul în care suportul este găsit, în locul fișierului Alt-storageSystem.js va fi încărcat.
Utilizarea lamelelor și Polyfills
Puteți utiliza Modernizr.load () pentru „patch“, browser-ul, cu ajutorul lamelelor (bucăți de cod este faptul că imita lipsa de funcționalitate browser-ului) și polyfills (sunt anumite clase de adaosuri de fixare, care sunt utilizate pentru a reproduce funcționalitatea lipsă). Astfel, în cazul în care o pană de fixare sau polyfill pentru funcția sunt disponibile, puteți corecta orice caracteristici care lipsesc în browserul utilizatorului în cazul în care, de exemplu, clientul va solicita ca aspectul și funcționalitatea a fost posibilă la fel în toate browserele.
Un bun exemplu este un câmp de intrare HTML5 tag-ul pentru data. Pentru browserele acceptate disponibile DatePicker fiabile:
Dar este susținută de doar aproximativ jumătate din browser. Există o bună metodă de back-up cu programe incluse și polyfill jQuery UI. Cu Modernizr bootloader putem descărca 4 fișierele necesare pentru a recrea data de selecție pentru browsere neacceptate:
Dacă aveți nevoie de un polyfill, eu folosesc două resurse, acestea sunt HTML5Please și Webshims Lib. Ambele aceste site-uri oferă o gamă largă de soluții, dar eu recomand să înțeleagă și să exploreze distanțierul sau polyfill, înainte de a utiliza aceste servicii, la fel ca în acest caz, va fi pregătit pentru orice probleme potențiale care pot apărea.
Un alt avantaj Modernizr care html5shim inclus în bibliotecă. Biblioteca html5shim permite să se ocupe în mod corect noile etichete HTML5 vechi browsere IE.
Modernizr de lucru cu Internet Explorer
Pentru a ajuta la bibilioteka html5shim pentru a lucra cu IE, Modernizr oferă, de asemenea un set de clase convenționale. Aceste clase vă permit să se stabilească regulile CSS care vizează versiuni specifice ale IE. Pentru a apela o clasă pentru IE este suficient pentru a plasa înainte de acest cod HTML:
De exemplu, în cazul în care design-ul este utilizat pe scară largă de proprietate BPX-umbra, care nu este susținută de IE6-IE8, definesc un stil pentru aceste browsere, puteți:
Pentru a crea o versiune personalizată a Modernizr
Când sunteți pregătit să implementați biblioteca pe site-ul dvs., este recomandat pentru a crea propria lor versiune a Modernizr, care va conține doar acele elemente care într-adevăr nevoie de tine. Acest lucru va ajuta pentru a reduce dimensiunea fișierului de 42 KB (necomprimat), la numai 2 kb. Pentru a selecta opțiunile dorite pot utiliza Modernizr pe pagina de descărcare: