A Normalize.css használata homogén fejlesztéshez
A böngésző kompatibilitása az interneten elérhető hozzáférés nagy része. A fejlesztőknek figyelembe kell venniük a a közönség és a böngésző verzióinak a támogatását igénylő változatai. Bár a CSS alaphelyzetbe állítás egy opció, a legtöbb deviátor a Normalize.css-t részesíti előnyben az egyszerűség és a kompatibilitás érdekében az összes modern webböngészőben.
Ebben a hozzászólásban lefedem a normalizálás alapjai és az összehasonlítás az általános CSS visszaállításokkal. Ez nem bonyolult könyvtár, és nem szabad több mint egy órát megértenie. De a normalizálás kulcsa a tanulás hogyan hogy megfelelően és ésszerűen hajtsák végre.
A böngésző visszaállítja a Normalizálást
Évek óta Eric Meyer CSS alaphelyzetbe állított verzióinak testreszabott verzióját használtam. Ezek elégségesek voltak a legtöbb projektemre, és nem okoztak jelentős problémákat. A Normalizálás azonban megváltoztatta a visszaállítási nézeteimet, mert másképp működik, mint a CSS visszaállítása. Fontos, hogy megértse a különbségeket.
Gondolj a normalizálásra mint a minden böngészőre következetesen alkalmazzák, és gondolj a A CSS visszaállítja a termonukleáris detonációt minden böngészőben.
Normalizálja a stílusokat és formátumokat, fejléceket, bekezdéseket, blokkokat és közös elemeket, így azok azonos (vagy elég közel van) minden támogatott böngészőben. A CSS teljesen letörli a pala tisztát, így van nincs alapértelmezett érték bármiért.
A CSS alaphelyzetbe állításával a fejlécek megegyezhetnek a bekezdésekkel; az elemek nem rendelkeznek párnázással, margókkal vagy bármilyen távolsággal. CSS visszaállítással új kódot kell megadnia a stílus javítása. Normalizálással a előre megtervezett stílus amelyre épülhet.
Tehát ezek közül az egyik jobb, mint a másik? Ez egy melegen vitatott téma, bár az egyik érv azt állítja, hogy Normalizál jobban működik a kompatibilitás szempontjából, és kisebb fájlméreteket eredményez.
“Meg kell értenem, hogy a normalizálás jobb, mint a visszaállítás. Ez azt eredményezi, hogy kevesebb CSS kerül továbbításra a vezetéken, jobban kihasználja az UA alapértelmezett értékeit, és jobban megérti, hogy az elemek hogyan jelentett megjeleníteni.”
Függetlenül attól, hogy beleszeretsz a Normalizálásba, vagy inkább egy tipikus resetre van szükség, fontos, hogy legalább megértsük mindkét oldalt, és válasszuk ki a legjobbat. Nagyon kevés fejlesztő kezdi el a kódolást a semmiből, így a normalizálás vagy a CSS visszaállítás szinte szükséges a modern frontend fejlesztéséhez.
Ha meg szeretné próbálni egy CSS-visszaállítást, itt néhány népszerű választás:
- Eric Meyer visszaáll
- HTML5 visszaállítás
- HTML5Doctor Reset
A konfigurálás normalizálása
A normalizáló alkotója Nicolas Gallagher írt egy bevezető bejegyzést, amely ezzel a kijelentéssel vezetett:
“A Normalize.css egy kis CSS-fájl, amely jobb böngésző-konzisztenciát biztosít a HTML-elemek alapértelmezett stílusában. Ez egy modern, HTML5 kész, alternatívája a hagyományos CSS visszaállításnak.”
Az évek során ez egy megbízható könyvtár lett, amelyet a fejlesztők használnak világszerte. A normalizálást bizonyos fokig a Bootstrap és a Pure CSS-ben használták.
Kétféle módon lehet használni a Normalizálást egy projektben: szerkesztheti a forrást, hogy testreszabja a saját normálizálási stíluslapját, vagy használja azt alapként és adjon hozzá stílusokat a tetejére.
Az előbbi egy pick-and-select stratégia, ahol átmehet a Normalize.css fájlon, és törölheti mindazt, amit nem kell saját stíluslap létrehozásához. Ez a legjobb egy projektenkénti alapon, hogy a fájlméret alacsony legyen.
Alternatívaként néhány fejlesztő tartalmazza a teljes Normalize.css fájlt, és ehhez saját stíluslapot épít. A teljes normalizálási stíluslap 420+ kódsorra terjed ki, ami ~ 6,8KB tömörítetlen.
Egyik módszer sem jobb, mint a másik, és érdemes követni mindent, ami az egyes projektek esetében a legjobban megfelel, vagy a kívánt munkafolyamat.
Az induláshoz töltse le a Normalize egy példányát a GitHub-ból, vagy adjon meg egy külső CDN-ről. A Normalizálás legújabb verzióját közvetlenül az NPM-ből is húzhatja:
npm telepítés --save normalize.css
Ha nem szeretne fájlokat letölteni, akkor még egy új CodePen projektet is készíthet, amely egy gombnyomással kiegészítheti a Normalizálást..
Mivel a Normalizálás moduláris, ideiglenesen eltávolíthatja a szekciókat, vagy akár saját szokásos normálépítést is készíthet. Ezután elindíthat minden projektet olyan részekkel, mint a HTML5 megjelenítő elemei, miközben eltávolítja a beágyazott tartalom stílusait.
Minden Normalizálási szabálynak van egy megfelelő CSS-megjegyzése, amely elmagyarázza, hogy mit csinál, és milyen problémákat / hibákat old meg. Néhány nyilvánvaló, mint a beállítás display: block újabb HTML5 elemeken.
Mások kevésbé nyilvánvalóak, mint az SVG kód, amely elrejti az Internet Explorer túlcsordulását:
svg: nem (: root) túlcsordulás: rejtett;
Nagyon ajánlom a stíluslapot, hogy pontosan hogyan működjön, és megtudja, hogy a Normalizálás helyes-e a projekt számára.
Normalize.css Web Designban
A Normalize v4.0 legújabb verziója széleskörű böngésző támogatást kínál.
- Chrome (utolsó kettő)
- Él (utolsó kettő)
- Firefox (utolsó két)
- Firefox ESR
- Internet Explorer 8+
- Opera (utolsó két)
- Safari 6+
Amit tudok mondani, a Normalizálás támogatja a böngészők régebbi verzióit, amelyek állandó frissítéseket tartalmaznak, mint a Firefox. De a “hivatalos” A támogatás csak a Chrome / Edge / FF / Opera két legújabb verzióját tartalmazza.
Az IE6 + és a Safari 4+ is támogatja a Normalize v1, de ez a verzió már nem frissül.
Létfontosságú, hogy a böngésző verzióit egy olyan eszközzel ellenőrizze, mint a Google Analytics. Ez jobb ötletet ad Önnek, hogy a Normalizálás hasznos eszköz-e a modern webdesignokhoz.
További források
A Normalizálásról nem lehet sokat tanítani, így a tanulás nagy része ezzel történik.
És őszintén szólva nincs sok magyarázata, hogy nem tudod felvenni, ha olvasod a stíluslapot, és szükség szerint másol / módosít kódot. De ha más releváns információt keres, az alábbi linkeket adtam hozzá.
kapcsolódó cikkek
- Nicolas Gallagher: A Normalize.css-ről
- Bevezetés a HTML5 rendszerbe
- Normalize.css vs Reset.css: Melyiket kell használni?
Intro videók
- A normál CSS használata
- Visszaállítja és normalizálja az Envato
- Nicolas Gallagher - A Scalable CSS túlmutatása
