Mi modernizr és hogyan kell használni, blog web-fejlesztő
Azt szokták mondani, hogy ha a fejlődő szoftver csak egy állandó - a változás. Internetes fejlesztési környezet, van egy másik állandó - a böngésző ellentmondások. Az egyik legnagyobb probléma a webes alkalmazások állandó növekedése számos platformon, böngészők és eszközök.
Hogyan lehet egy web designer vagy fejlesztő, hogy tudja-e futtatni egy bizonyos funkciót a cél platformok és böngészők?
telepítése Modernizr
Az első lépések természetesen letölthető Modernizr. Két lehetőség áll rendelkezésre letölthető vagy teljes változatát Modernizr, vagy hozzon létre egy egyéni változatát, amely csak azokat a funkciókat, amit használni kíván. Mivel ez a könyvtár kell helyezni elején az oldalt, akkor jobb, hogy végezzen kézi beállítás, ha a letöltés. Ennek ellenére, most letölthető a teljes verzió, amely támogatja az összes funkciók:
Telepíteni Modernizr kell hozzá egy szkriptet minden oldalon, amely használni fogja. Itt van az alapvető HTML5 dokumentumot:
Ez a szkript kell, hogy töltse le a fejét a dokumentum, nem pedig a az oldal alján általában található szkriptek jobb teljesítményt. A megfelelő működéshez modernizr.js található fejrész.
Belépő osztályok HTML-Modernizr
Valószínűleg már észrevette, hogy a címke HTML-jelölést vyshe rendelt osztály „no-js”. Alatt Modernizr az oldalak betöltési helyére ez az osztály a „js”. Aztán együtt az osztály js könyvtárból hozzá egy osztályt minden tulajdonságával, hogy a böngésző támogatja és műveleti osztályok, hogy a böngésző nem támogatja.
Például itt van, hogyan néz ki html tag az aktuális verziója Chrome:
De úgy néz ki ezt a címkét Internet Explorer 7:
Használhatja ezen osztályok létrehozása CSS stílusokat egyes böngészők nem támogatják az új funkciók. Például, ha szeretné, hogy a stílus gomb részleges átláthatóság:
Ha a böngésző nem támogatja a CSS fényelnyelés ingatlan, megjelenik a gomb fekete háttér helyett szürke áttetsző.
Segítségével osztály adunk modernizr felülbírálhatja, ha az eredeti stílus:
Azt is megközelíteni a kérdést fordítva, azaz először is az a stílus régebbi böngészők, majd a böngészőt, amely támogatja opacity:
Ezután ellenőrizze lehet használni, hogy hozzon létre logikai ágak:
Ez a megközelítés azonban létrehoz egy meglehetősen dagadt kódot. A legjobb megoldás az, feltételes loading függő erőforrás Modernizr vizsgálati eredményeket.
rakodó Modernizr
A fenti példában, a boot betöltő határozza meg, hogy a böngésző támogatja LocalStorage. Ha igen, mi fog történni, aszinkron betöltése localStorage.js fájlt. Ha alátámasztást helyett az alt-storageSystem.js fájl betöltődik.
Alátétekkel és Polyfills
Használhatja Modernizr.load () a „patch” a böngésző segítségével alátéteket (darab kód, amelyek utánozzák a hiányzó böngésző funkciók) és a polyfills (alátétek bizonyos osztályok, amelyek a megismételni a hiányzó funkciók). Így, ha egy alátétet vagy Polyfill a funkció elérhető, akkor javítsa ki a hiányzó funkciók a felhasználó böngészőjének, ha például az ügyfél igényli, hogy a megjelenés és a funkcionalitás volt lehetséges az azonos minden böngészőben.
Jó példa erre egy címke HTML5 beviteli mező a dátumot. A támogatott böngészők álló megbízható datepicker:
De azt nem támasztja alá csak mintegy fele a böngészőt. Van egy jó back-up módszerrel programok közül jquery ui és Polyfill. A Modernizr bootloader tudjuk letölteni 4 szükséges fájlokat, hogy újra a kiválasztás időpontja támogatott böngészők:
Ha szüksége van egy Polyfill, azt használja a két erőforrás, ők HTML5Please és Webshims Lib. Mindkét oldalak széles körű megoldásokat, de azt javasoljuk, hogy megértsék, és fedezze fel az alátét vagy Polyfill, mielőtt ezeket a szolgáltatásokat, mint ebben az esetben, akkor készüljön fel az esetleges problémák merülhetnek fel.
A másik előnye, hogy Modernizr html5shim szerepel a könyvtárban. html5shim könyvtár lehetővé teszi, hogy megfelelően kezeli az új HTML5 címkék régi IE böngészők.
Modernizr munka Internet Explorer
Annak érdekében, hogy a bibilioteka html5shim dolgozni IE, Modernizr is biztosít egy sor hagyományos osztályok. Ezek az osztályok lehetővé teszik, hogy a CSS-szabályok célzó specifikus változatai IE. Hívni egy osztályt IE elég ahhoz, hogy ezt megelőzően html kód:
Például, ha a design széles körben használják BPX-árnyék tulajdonság, ami nem támogatja IE6-IE8, meghatározza a stílusát ezeket a böngészőket, akkor:
Ahhoz, hogy hozzon létre egy egyéni változatát Modernizr
Ha készen áll, hogy telepíteni a könyvtár webhelyére, ajánlott, hogy saját változatát Modernizr, amely tartalmazza majd csak azokat az elemeket, amelyek tényleg szükségem van. Ez segít, hogy csökkentse a fájl méretét 42 KB (tömörítetlen), hogy csak a 2 kb. Válassza ki a kívánt beállításokat használhatja Modernizr a letöltési oldal: