Modernizr - alapelvek, példákkal illusztrálva a cikkek és a levont létre egy weboldal wordpress

A legtöbb útmutatók kiterjed az alapvető példák segítségével Modernizr. egyszerűen bemutatja a szintaxis és a nélkül, hogy miért, és miért kell tenni. És az a tény, hogy sok webfejlesztő használ ez a könyvtár nem működőképes, és nem ismeri a sok bővítmények alapértelmezés szerint elérhetők.

Modernizr a következő főbb jellemzői, amelyek érdekesek a fejlesztők:

Kimutatása lehetőségek CSS

A betöltés után Modernizr teszteli a kliens böngésző kompatibilitás HTML5 és a CSS3 és hozzáteszi HTML elemet használja ezeket a tulajdonságokat a megfelelő osztályokat. Ez lehetővé teszi, hogy különböző stílusok elemeit, attól függően, hogy a támogatás az egyik vagy másik lehetőséget.

Például, ha megnyitja az oldalt használó Modernizr egyik legújabb verzióit Chrome, akkor a HTML elem a következőképpen néz ki:

A beágyazott osztályok

Tehát tudjuk, hogy milyen funkciók támogatottak, de mit csinálsz ezzel az információval?

Mi lehet alkalmazni más CSS osztályától függően a beágyazott HTML-elem:

Ez egy nagyszerű technika és fel lehet használni, hogy megoldja a problémákat, a design, amely garantáltan előfordulnak a régebbi böngészők. Mindazonáltal nem szükséges használni, mint az elsődleges „módon kell kezelni a régebbi böngészők.”

Probléma: kap rendetlen

Ha minden CSS-szabály lesz írva egy adott lehetőséget, hogy lehet vagy támogatott-e vagy sem, a kód lesz elég zavaros:

Az egyik elem egy sor stílusok lehet használni, ami nem túl kényelmes.

«.no-funkció» vagy «.feature» ??

Véleményem szerint a legjobb felhasználása a szelektor a hiányzó funkciókat (például nem-fedőképesség), ahelyett, hogy a meglévő funkciók (például fedőképesség). Az így ha bármilyen okból Modernizr nem indul el, a jó és a modern böngészők semmi baj a webhely nem fog megtörténni.

A fenti példában, ha Modernizr nem indul, akkor boxshadow osztály nem lesz hozzá, és utánzás minden böngészőben - mind az új és a régi.

És ha ezt a kódot használja, ha Modernizr nem indul, majd a vendégek a modern böngészők (és a legtöbb közülük is) látni fogja a valódi boxshadow. Ugyanakkor, nem értve boxshadow böngészők figyelmen kívül hagyja azt.

Használjon biztonsági lehetőségeket

A legtöbb esetben, akkor CSS3, mint egy „tartalék”, mert a régebbi böngészők egyszerűen figyelmen kívül hagyja azt, és modern válasszon az utóbbi definíció tulajdonságait. Így akkor megszünteti annak szükségességét, hogy az osztályok vezetnek be Modernizr.

Sok felhasználó, sok böngésző

A legtöbb esetben a látogató látja webhelyét egy böngészőben, ezért kell jól néz ki minden böngésző és nem feltétlenül pontosan ugyanaz. Ha bármely CSS tulajdonságok nem működnek a régebbi böngészők - csak elfogadni.

Például, ha nem mutat IE6-8 lekerekített határok a navigációs menü, akkor ez lehet békében és ne kerítés a borzalmakat, hogy szimulálja ugyanezek a sarkokat.

Mikor kell használni osztályok

Van néhány eset, ahol meg kell használni osztályok bevezetésre Modernizr:

1. Ha a tartalék lehetőséget nem működik

Például, ha a használni kívánt háttér: # 000; opacitás: 0,25; A böngésző nem támogatja az átlátszóságot, akkor megjelenik egy fekete háttér, miközben meg kell szürke (#ccc). Ezt el lehet kerülni az alábbiak szerint:

2. Ha kisebb változtatások vagy konkrét

Például, ha azt szeretnénk, hogy távolítsa el a nyíl legördülő menü navigációs érintőképernyős eszközök:

Észlelési képességek: A JS

Ezeket fel lehet használni közvetlenül a kód:

Ez is hasznos lehet, mint a tervezés során az eszközök érintőképernyők.

Nyilvánvaló, hogy az érintőképernyős készülékek teljesen felesleges a hover-hatások és jönnének ki valami mást. Például általában kiveszi ezt a hatást, és jelenítse meg a teljes verzió.

A felhasználók fogják látni az asztalon hover-hatás, ha lebeg az elemek felett.
Érintőképernyős eszközök:

Ezek a felhasználók a teljes verzió azonnal.
Attól függően, hogy a rendelkezésre álló egy adott funkciót, például localStorage. szükség lehet, hogy egy teljesen más megoldásokat. Ebben az esetben például nem lenne kényelmesebb betöltéséhez szükséges kiegészítő JS könyvtárak hiányában támogatás localStorage. Ez könnyen elvégezhető a segítségével Modernizr.load ().

Modernizr.load () néven is ismert yepnope.js

Ha a «teszt» true értékkel tér vissza (azaz a böngésző támogatja localStorage), akkor betöltődik localstorage.js, különben nem lesz betöltve localStorage-alternative.js. «Ja» és «Dehogy» nem kötelező, így használhatja csak az egyiket:

Modernizr.load / Yepnope.js egy gyors és könnyű script letöltő, ami követően azonnal rendelkezésre áll Modernizr kapcsolatot.