Homepage » Coding » A Normalize.css használata homogén fejlesztéshez

    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