Použitie Normalize.css pre homogénny vývoj
Kompatibilita s prehliadačom je veľkou súčasťou prístupnosti na webe. Vývojári musia zvážiť rozdiely medzi publikom a verziami prehliadača, ktoré vyžadujú podporu. Napriek tomu, že obnovenie CSS je možnosťou, väčšina devs preferuje Normalize.css pre svoju jednoduchosť a vzájomnú kompatibilitu vo všetkých moderných webových prehliadačoch.
V tomto príspevku budem kryť základy normalizácie a porovnanie s všeobecnými resetmi CSS. Toto nie je komplikovaná knižnica a nemalo by trvať viac ako pár hodín, aby ste ju pochopili. Ale kľúčom k normalizácii je učenie sa ako správne a rozumne ho implementovať.
Obnovenie prehliadača vs. normalizácia
Už roky používam vlastnú verziu obnovenia CSS Erica Meyera. To bolo dosť pre väčšinu svojich projektov a nespôsobilo žiadne závažné problémy. Avšak normalizácia zmenila môj názor na resetovanie, pretože funguje inak ako reset CSS. Je dôležité, aby ste pochopili rozdiely.
Mysli na Normalize ako a odev používaný konzistentne pre všetky prehliadače, a premýšľaj o CSS reset ako termonukleárna detonácia cez všetky prehliadače.
Normalizovať štýly a formáty nadpisov, odsekov, blokov a spoločných prvkov sú rovnaké (alebo dostatočne blízko) vo všetkých podporovaných prehliadačoch. Obnovenie CSS úplne utrite dosku čistú tak, aby existovala žiadne predvolené hodnoty pre hocičo.
S resetovaním CSS sa vaše hlavičky môžu zobrazovať rovnako ako vaše odstavce. prvky nemajú žiadne polstrovanie, okraje alebo medzery akéhokoľvek druhu. S resetom CSS musíte dodať nový kód na zlepšenie štýlu. Normalizáciou získate a vopred navrhnutý štýl na ktoré je možné budovať.
Takže jeden z nich je lepší ako druhý? Je to horko diskutovaná téma, aj keď jeden argument uvádza, že Normalize funguje lepšie pre kompatibilitu a vytvára menšie veľkosti súborov.
“Musím tvrdiť, že normalizácia je lepšia ako resetovanie. Bude to mať za následok prenesenie menšieho počtu CSS cez kábel, lepšie využitie predvolených hodnôt UA a lepšie pochopenie toho, ako sú elementy znamenalo zobraziť.”
Či sa zamilujete do Normalize alebo preferujete typický reset, je dôležité prinajmenšom pochopiť obidve strany a vybrať čo najviac vyhovuje. Veľmi málo vývojárov začne kódovanie od nuly, takže Normalize alebo CSS reset je takmer potrebná pre moderný vývoj frontend.
Ak chcete vyskúšať resetovanie CSS, máte niekoľko populárnych možností:
- Resetovanie Erica Meyera
- HTML5 Reset
- Reset HTML5Doctor
Normalizovať konfiguráciu
Normalizátor tvorca Nicolas Gallagher napísal úvodný príspevok vedúci k tomuto vyhláseniu:
“Normalize.css je malý súbor CSS, ktorý poskytuje lepšiu konzistenciu medzi rôznymi prehliadačmi v štandardnom štýle prvkov HTML. Je to moderná, pripravená na HTML5 alternatíva k tradičnému CSS resetovaniu.”
V priebehu rokov sa toto rozrástlo do dôveryhodnej knižnice, ktorú používajú vývojári na celom svete. Normalizácia sa do určitej miery používa v Bootstrap a Pure CSS.
Existujú dva spôsoby použitia programu Normalize v projekte: upravte zdroj na prispôsobenie vlastného štýlu normalizácie alebo ho použite ako základ a pridajte štýly na začiatok.
Prvá je stratégia výberu a výberu, v ktorej prechádzate cez súbor Normalize.css a odstráňte všetko, čo nepotrebujete vytvoriť svoj vlastný štýl šablóny. To je najlepšie na základe projektu, aby sa veľkosť súborov znížila.
Alternatívne niektorí vývojári zahŕňajú celý súbor Normalize.css a navyše si vytvoria svoj vlastný štýl. Štandardný štýl normalizácie sa skladá z 420 riadkov kódu, ktoré sa rovnajú nekomprimovanému ~ 6,8 kB.
Ani jedna metóda nie je lepšia ako druhá a stojí za to sledovať, čo najlepšie funguje pre každý projekt alebo preferovaný pracovný postup.
Ak chcete začať, buď si stiahnite kópiu programu Normalize z GitHub alebo ho zorganizujte z externého CDN. Môžete tiež vytiahnuť najnovšiu verziu Normalize priamo z NPM, napríklad takto:
npm nainštalujte --save normalize.css
Ak nechcete sťahovať žiadne súbory, môžete dokonca vytvoriť nový projekt CodePen, ktorý môže pridať normalizáciu kliknutím na tlačidlo.
Pretože Normalize je modulárny, môžete dočasne odstrániť sekcie alebo dokonca vytvoriť vlastnú vlastnú zostavu programu Normalize. Potom môžete spustiť každý projekt s vybratými časťami, ako sú elementy zobrazenia HTML5, pri odstraňovaní štýlov pre vložený obsah.
Každé normalizačné pravidlo má príslušnú poznámku CSS, ktorá vysvetľuje, čo robí, a ktoré problémy / chyby rieši. Niektoré sú zrejmé ako nastavenie display: block na novších prvkoch HTML5.
Iné sú menej zrejmé ako tento kód SVG, ktorý skrýva pretekanie v programe Internet Explorer:
svg: nie (: koreň) pretečenie: skryté;
Veľmi odporúčam skimming štýlu šablón, aby ste videli, ako presne funguje, a dozvedieť sa, či bude Normalize správne pre váš projekt.
Normalize.css V Web Design
Najnovšia verzia programu Normalize v4.0 ponúka širokú podporu prehliadača.
- Chrome (posledné dva)
- Edge (posledné dve)
- Firefox (posledné dva)
- Firefox ESR
- Internet Explorer 8+
- Opera (posledné dve)
- Safari 6+
Z čoho môžem povedať, Normalize môže podporovať staršie verzie prehliadačov s neustálymi aktualizáciami, ako je napríklad Firefox. Ale “úradné” podpora zahŕňa iba dve najnovšie verzie prehliadača Chrome / Edge / FF / Opera.
Aj platformy IE6 + a Safari 4+ sú podporované programom Normalize v1, ale táto verzia už nie je aktualizovaná.
Je dôležité, aby ste skontrolovali verzie prehliadača pomocou nástroja ako Google Analytics. To vám prinesie lepšiu predstavu o tom, či normalizácia môže byť užitočným nástrojom modernej tvorby webových stránok.
Ďalšie zdroje
Nie je veľa, čo sa konkrétne učí o Normalize, takže väčšina učenia sa deje.
A naozaj nie je veľa čo vysvetliť, že nemôžete vyzdvihnúť čítanie cez štýl a kópiu / zmenu kódu podľa potreby. Ale ak hľadáte ďalšie relevantné informácie, pridal som niekoľko odkazov nižšie.
Súvisiace články
- Nicolas Gallagher: O spoločnosti Normalize.css
- Úvod do HTML5 Boilerplate
- Normalize.css vs Reset.css: Ktorý sa má použiť?
Úvodné videá
- Použitie Normalize CSS
- Obnovenie a normalizácia spoločnosťou Envato
- Nicolas Gallagher - premýšľanie nad škálovateľným CSS
