Modernizr, hogy ez a használat modernizr 3
Töltse le a Modernizr
A korábbi verziók már kapható teszt épít (neminifitsirovannye verzió) és egyéni likőrök. Lehetséges volt, hogy kiválassza az egyes funkciók és API-t. Download könyvtár a letöltési oldalon. A Modernizr 3-nak a CLI parancssor, rajta keresztül meg tudod csinálni minden ugyanaz, mint az előző verziókban. Először válassza ki a funkciókat, amire szüksége van. Is, akkor adott le a JSON konfigurációs fájlt.
Ez a fájl írja a beállításokat, amelyek meghatározzák a kimeneti fájl Modernizr:
A következő példa azt mutatja, a minimális készletét a könyvtárak. A kimeneti fájl minifitsirovan és tartalmazzák csak három tulajdonság:
flexboxwrap (új funkció a 3-as verzió)
Ezt a fájlt fogja használni a parancssor Modernizr. Használja a következő parancsot a CLI és NPM:
Most van, hogy a könyvtár csapat. A parancs futtatásához, keresse meg a mappát, ahol a JSON konfigurációs fájl betöltése. Például írja be a teljes elérési utat a konfigurációs fájl:
A fájl kell már létre, és használatra kész a webhelyen:
Egy példa a generált fájl a CLI Modernizr
Tisztában vagyunk azzal, osztályok
Ellenőrzött van rögzítve, mint egy osztály nevét a tag html. Szintén hozzá a gyökér osztály js. Ha az osztály a html tag nem volt-js, akkor cserélni. Az alábbi képen vették a Chrome legújabb verzióját, mint az írás; Amint az látható, html minden tesztelhető osztály azt jelenti, a böngésző támogatja mindazokat a tulajdonságokat.
Ha a böngésző nem támogatja a tulajdonság be van jelölve, a könyvtár lesz hozzá az osztály előtaggal no. Az IE9, amely nem támogatja a tulajdonságok, akkor tartsa be az alábbi képet:
Ha flexbox támogatott, akkor stílusok, mint például:
És folbek a régi verzió:
Prefixek osztályok
Mielőtt letöltené a fordítás, akkor adjunk hozzá egy előtagot minden osztály az esetben, ha van a stílus már ugyanabba az osztályba.
A Modernizr 3, ez az opció be lehet állítani egy JSON fájlt classPrefix tulajdon. Például:
Futtatja a parancssort, és újra létre a fájlt. Most minden osztály előtagja is-.
A korábbi verzióiban Modernizr meghatározásában támogatott tulajdonságokat, például flexbox írtunk az alábbiak szerint:
Ez, persze, néhány kivételtől eltekintve kapcsolatos kötőjelet és terek, mint a tulajdon display: table, kijelző: bejáratni, exif-orientáció, stb Ezekben az esetekben a vizsgálat kellett írni ezt:
A harmadik verzió, az összes tulajdonságait a név tett egy szó nélkül kötőjelek és szóközök, ami a kód következetesebb. Most, ha vesszük a fenti példában tudjuk tesztelni exif-orientáció ingatlan ahogy flexbox tulajdonság:
Ez a változás tükröződik az osztályok egy tag html. Ha megnyitja a Fejlesztői Portál, most exif-orientáció osztály nélkül írta kötőjellel. Osztályok deklarált elavult formájában kerül rögzítésre mindkét esetben. Az alábbi képernyőkép azt mutatja, hogy az osztályok és a kijelző-asztal kijelző-fit egyaránt vannak együtt, és kötőjellel.
Új vizsgálati módszerek
Vizsgálatok egyes tulajdonságok működik aszinkron módban, ami a késleltetés probléma. Ezért, amikor a teszt kezdetekor az új WebP képformátum, például Modernizr visszaút meghatározatlan, de nem igaz, vagy hamis.
Mivel megkapta a vizsgálati eredmények az aszinkron mód lett az egyik kedvenc technikák változata 3. úgy döntöttek, hogy egy új Modernizr.on () függvényt. Most a teszt visszatér a helyes érték:
Tartsuk szem előtt, hogy technikailag Modernizr.on () metódus működik az összes tulajdonságait, de jobb, ha azt csak tulajdonságokat vizsgálják aszinkron mód:
APNG (animált PNG)