Modernizr gyakorlati alkalmazása - a kézműves wordpress

Az első lépés

Először meg kell, hogy egy friss változata a könyvtár hivatalos honlapon: Modernizr letöltése Builder.
Jelölje be a négyzetet a technológiák folynak vizsgálatok elvégzésére, majd a saját személyes változata «generálása» gomb könyvtárban. Ha letette az összes jelölőnégyzetet, a kapott kódot elég lesz egy pár képernyők kis notebook - mindössze 15 KB.
Ezután egyszerűen csatlakoztassa az oldalt, és ellenőrizze. Ha minden jól működik, a HTML elem jelenjen meg számos osztálya:

Mivel könnyen kitalálni, mi a kullancsok a könyvtárba, és ezeket a teszteket kell elvégezni összekapcsolásával Modernizr, majd hozzáadjuk osztályok böngészőtől függően. De ne felejtsük el, hogy a HTML elem az osztály nélküli js. támaszkodni rá, ha JS nincs engedélyezve az ügyfélen.
Már ebben a szakaszban lehet létrehozni egy nagyon hatékony stíluslapok, például:

Azt hiszem, a fantázia egy tapasztalt coder kérni fogja színesebbé példák és telepítették.

Ellenőrzése jelenlétében technológia a böngésző - teszt.
A tesztek tart Modernizr, akkor ragaszkodnak eseményeket. Pass - horog igen. sikertelen - dehogy. Nagyon aranyos.

Ja - csatlakoztassa script, amely a földrajzi helyét a böngésző képességeiről.
dehogy - Próbálom ezt tenni anélkül, hogy azokat a geo-polyfill.js.

Azt mondják, hogy itt is, így a következőket teheti:

És miért nem?

Íme egy példa egy kicsit bonyolultabb:

Nem túl nehéz, nem igaz?
és nem talált hibát a „poli-töltőanyag” - Microsoft nagy helyezték át.

Az egyik legmenőbb funkciók Modernizr.load - a lehetőséget, hogy építsenek egy plug-in minden forgatókönyv. Sok ez lehet mit mondani, de a HTML5 Boilerplate felhasználók valószínűleg ismeri a tartalék jQuery Google CDN. Ez valahogy így néz ki:

Úgy működik, mint ez: először megpróbálja betölteni jQuery a szkriptek, majd - az ellenőrzést követően azonnal, hogy a jQuery objektum áll rendelkezésre. Ha nem, akkor megpróbálja letölteni helyi példányát jQuery. Ez nem olyasmi, ami egyszerű, és Modernizr.load a mentő. Kövesse ezt a logikát, és ő veszi saját kezébe rendelést kapcsolat módja:

Megjegyzés: Ezzel a módszerrel csak a csúszópénz, mert a progresszív letöltés scriptek helyett párhuzamos lehet ellop sebességgel.

nyújthatóság

Nagyon praktikus Modernizr fejlesztők lehetővé tették, hogy bővítse a könyvtár saját segítségével Modernizr.addTest.
A legegyszerűbb példa:

A dokumentációnak «Extensibility» szakaszt bővíthetőség, ahol mindent részletesen. A projekt GitHub'e van egy mappa, ahol az, hogy minden alkalmas egyéni bővítményeket: / funkciókban érzékeli /.

böngésző támogatása

IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2, Chrome. A mobil eszközök - mobil Safari iOS és Webkit az Android, az Opera Mobile, Firefox Mobile, és nagy reményeket fűz a támogatást a Blackberry 6+.

következtetés

Nagy segítség a projektek, plusz vagy mínusz a szélesebb közönség, amikor a jó támogatás sokkal fontosabb, mint a terhelési idő és az a teljesítmény. Azonban, ha tudjuk, hogy mikor hagyja abba - ez lehetséges, és egyszerű egyoldalas honlapok akasztani, csak az egyszerűség kedvéért, vagy akár üzleti.
Modernizr használnak egy meglehetősen nagy cégek: Twitter, a Google, a Microsoft.

Kapcsolódó cikkek