Cele mai multe ghiduri acoperă exemple de bază ale utilizării Modernizr. pur și simplu, care arată sintaxa și fără a explica de ce și de ce ar trebui făcut. Și toate din faptul că mulți dezvoltatori web utilizează această bibliotecă nu este pe deplin operațional, și nu este conștient de numeroasele sale add-on-uri care sunt disponibile în mod implicit.
Modernizr are următoarele caracteristici principale care sunt de interes pentru dezvoltatori:
Detectarea de posibilități cu CSS
După încărcare, Modernizr testează compatibilitatea browser-ul client cu HTML5 și CSS3 și adaugă element HTML utilizează aceste proprietăți clasele corespunzătoare. Acest lucru vă permite să utilizați stiluri diferite pentru elemente, în funcție de suportul unuia sau o altă posibilitate.
De exemplu, dacă deschideți pagina folosind Modernizr într-una dintre cele mai recente versiuni ale Chrome, element HTML va arata ceva de genul:
Utilizarea claselor încorporate
Deci, noi știm ce sunt acceptate caracteristici, dar ce faci cu aceste informații?
Putem aplica un alt CSS în funcție de clasa de încorporat într-un element HTML:
Aceasta este o tehnică de mare și poate fi folosit pentru a rezolva problemele în proiectarea, care sunt garantate să aibă loc în browsere mai vechi. Cu toate acestea, nu este necesar să-l folosească drept primar „un mod de a face cu browsere mai vechi.“
Problemă: obține murdar
Dacă fiecare CSS regulă va fi scris pentru o anumită oportunitate, care pot sau sprijinite sau nu, codul devine destul de confuz:
Pentru un singur element poate fi utilizat o serie întreagă de stiluri, care nu este foarte convenabil.
«.no feature» sau «.feature» ??
În opinia mea, cea mai bună utilizare a selectorii pentru funcționalitatea lipsă (de exemplu, fără opacitate), în loc să adăugați funcționalitatea existentă (de exemplu, opacitate). În așa că, dacă pentru orice motiv, Modernizr nu pornește, browsere bun și modern este nimic în neregulă cu site-ul dvs. nu se va întâmpla.
În exemplul de mai sus, în cazul în care Modernizr nu boot, atunci boxshadow clasa nu va fi adăugat și imitația acesteia va fi, în toate browserele - atât noi, cât și vechi.
Și dacă folosiți acest cod, dacă Modernizr nu boot, apoi vizitatorii cu browsere moderne (și cele mai multe dintre ele) vor vedea un boxshadow reală. În același timp, neînțelegând browsere boxshadow îl va ignora.
Utilizați opțiunile de rezervă
În cele mai multe cazuri, puteți utiliza CSS3 ca o „rezervă“, deoarece browserele mai vechi îl va ignora pur și simplu, și să aleagă modernă ultimele proprietăți definiție. În acest fel puteți elimina nevoia de a utiliza clasele introduse Modernizr.
Mulți utilizatori, mai multe browsere
În cele mai multe cazuri, vizitatorii văd site-ul dvs. într-un browser, așa că ar trebui să arate bine în orice browser și nu neapărat exact același lucru. Dacă oricare dintre proprietățile CSS nu funcționează în browserele mai vechi - trebuie doar să-l accepte.
De exemplu, în cazul în care IE6-8 nu prezintă granițe rotunjite ale meniului de navigare, atunci acest lucru poate trăi în pace și să nu gard ororile pentru a simula aceste colțuri aceeași rundă.
Când se utilizează clase
Există câteva cazuri în care ar trebui să utilizați clase de a fi introduse Modernizr:
1. În cazul în care opțiunea de rezervă nu funcționează
De exemplu, dacă doriți să utilizați fundal: # 000; opacitate: 0,25; browser-ul nu are suport pentru transparență va afișa un fundal negru, în timp ce ar trebui să fie gri (#ccc). Acest lucru poate fi evitat, după cum urmează:
2. În cazul în care modificări minore sau specifice
De exemplu, dacă doriți să eliminați săgeata drop-down meniul de navigare pentru dispozitivele cu ecran tactil:
capabilități de detectare: Cu JS
Acestea pot fi utilizate direct în codul:
Acesta poate fi, de asemenea, utile, cum ar fi, de la proiectarea pentru dispozitive cu ecrane tactile.
Este evident că, pentru dispozitivele de atingere complet inutil planare efectele și acestea ar trebui să vină cu altceva. De exemplu, în general, înlătură acest efect, și pentru a afișa versiunea completă.
Utilizatorii vor vedea desktop cu mouse-ul efecte atunci când treceți peste elementele.
Pentru dispozitivele cu ecran tactil:
Acești utilizatori vor vedea imediat versiunea completă.
În funcție de disponibilitatea unei anumite funcții, cum ar fi, localStorage. poate fi necesar să oferi un complet diferite soluții. În acest caz, de exemplu, ar fi convenabil pentru a încărca bibliotecile JS suplimentare necesare în absența sprijinului pentru localStorage. Acest lucru este usor de facut cu ajutorul Modernizr.load ().
Modernizr.load (), de asemenea cunoscut sub numele de yepnope.js
În cazul în care «încercare» returnează true (adică, browser-ul acceptă localStorage), localstorage.js atunci va fi încărcat, în caz contrar acesta va fi încărcat localStorage-alternative.js. «Da» și «Nope» sunt opționale, astfel încât să puteți utiliza doar una dintre ele:
Modernizr.load / Yepnope.js este un downloader rapid și ușor script-ul, care este disponibil imediat după conectarea Modernizr.