Použití Normalize.css pro homogenní vývoj

Kompatibilita prohlížeče je velkou součástí dostupnosti na webu. Vývojáři musí zvážit a jejich verze prohlížeče, které vyžadují podporu. I když jsou volby CSS možností, většina devs preferuje Normalize.css pro svou jednoduchost a křížovou kompatibilitu ve všech moderních webových prohlížečích.

V tomto příspěvku budu pokrývat základní informace o normalizaci a jak se srovnává s obecnými resety CSS. To není složitá knihovna a neměla by trvat déle než pár hodin, než to pochopíte. Ale klíčem k normalizaci je učení jak řádně a uvážlivě provádět.

Obnovení prohlížeče vs. Normalizace

Po celá léta jsem použil upravenou verzi CSS resetu Eric Meyer. Ty byly pro většinu mých projektů dostačující a nezpůsobily žádné zásadní problémy. Normalize však změnila můj pohled na resetování, protože funguje jinak než reset CSS. Je důležité, abyste pochopili rozdíly.

Přemýšlejte o normalizaci jako oděv aplikovaný konzistentně na všechny prohlížeče, a myslet na CSS reset jako termonukleární detonace napříč všemi prohlížeči.

Normalizovat styly a formáty záhlaví, odstavců, blockquotes a společných prvků tak, aby vypadají identicky (nebo dostatečně blízko) ve všech podporovaných prohlížečích. CSS resetuje kompletně otřete břidlice čisté, takže tam jsou žádné výchozí hodnoty pro cokoliv.

S resetem CSS mohou záhlaví vypadat stejně jako vaše odstavce; prvky nemají žádné polstrování, okraje nebo mezery jakéhokoliv druhu. S resetem CSS musíte zadat nový kód zlepšit styl. S Normalize dostanete předem navržený styl na které lze stavět.

Takže je jeden z nich lepší než ten druhý? Je to hotly diskutované téma, ačkoli jeden bod argumentu uvádí, že Normalize pracuje lépe pro kompatibilitu a produkuje menší velikosti souborů.

“Musel bych argumentovat, že normalizace je lepší než resetování. Výsledkem bude nižší přenos CSS přes vodič, lepší využití výchozích hodnot UA a lepší pochopení toho, jak jsou prvky znamenalo zobrazit.”

Ať už se zamilujete do normalizace nebo upřednostňujete typický reset, je důležité alespoň porozumět oběma stranám a vybrat si to, co nejlépe vyhovuje. Velmi málo vývojářů začalo kódování od nuly, takže pro moderní vývoj frontendu je téměř nutné provést normalizaci nebo reset CSS.

Chcete-li si vyzkoušet reset CSS, zde jsou některé oblíbené možnosti:

• Eric Meyer Resets
• Obnovení HTML5
• HTML5Doctor Reset

Normalizovat Config

Normální tvůrce Nicolas Gallagher napsal úvodní příspěvek, který vedl k tomuto prohlášení:

“Normalize.css je malý soubor CSS, který poskytuje lepší konzistenci mezi prohlížeči, ve výchozím stylu elementů HTML. Je to moderní, HTML5-ready, alternativa k tradičnímu resetu CSS.”

V průběhu let se toto rozrostlo na důvěryhodnou knihovnu, kterou používají vývojáři po celém světě. Normalizace byla dokonce do jisté míry použita v Bootstrapu a Pure CSS.

Normalizaci lze v projektu použít dvěma způsoby: upravit zdroj tak, aby si přizpůsobil vlastní šablonu normalizačních stylů, nebo jej použít jako základní a přidat styly nahoře.

První z nich je strategie pick-and-select, kde projdete souborem Normalize.css a vymažete vše, co nepotřebujete, abyste si vytvořili svůj vlastní styl. To je nejlepší na základě projektu pro udržení nízké velikosti souborů.

Alternativně někteří vývojáři zahrnou celý soubor Normalize.css a postaví na něm svůj vlastní styl. Plné Normalize stylesheet překlenuje 420 + řádků kódu, který se rovná ~ 6,8KB nekomprimované.

Žádná z metod není lepší než druhá a stojí za to sledovat vše, co je pro každý projekt nejlepší, nebo preferovaný pracovní postup.

Chcete-li začít, buď si stáhněte kopii produktu Normalize z aplikace GitHub nebo ho zkopírujte z externího disku CDN. Můžete také vytáhnout nejnovější verzi Normalize přímo z NPM takto:

npm install --save normalize.css 

Pokud si nepřejete stahovat žádné soubory, můžete vytvořit nový projekt CodePen, který můžete klepnutím na tlačítko Normalizovat..

Protože Normalize je modulární, můžete sekce dočasně odebrat nebo dokonce vytvořit vlastní sestavení Normalize. Poté můžete každý projekt spustit s vybranými částmi, jako jsou prvky zobrazení HTML5, a zároveň odstraňovat styly pro vložený obsah.

Každé pravidlo Normalize má odpovídající komentář CSS, který vysvětluje, co dělá a které problémy / chyby řeší. Některé jsou zřejmé jako nastavení zobrazit: blok na novějších prvcích HTML5.

Ostatní jsou méně zřejmé jako tento SVG kód, který skrývá přetečení v aplikaci Internet Explorer:

svg: not (: root) overflow: hidden;  

Vřele doporučuji skimming stylyheet, abych přesně zjistil, jak funguje a aby se dozvěděl, zda by normalizace byla vhodná pro váš projekt.

Normalize.css V návrhu webu

Nejnovější verze Normalize v4.0 nabízí širokou podporu prohlížeče.

• Chrome (poslední dva)
• Okraj (poslední dva)
• Firefox (poslední dva)
• Firefox ESR
• Internet Explorer 8+
• Opera (poslední dvě)
• Safari 6+

Z toho, co mohu říci, může normalizovat podporu starších verzí prohlížečů s neustálými aktualizacemi, jako je Firefox. Ale “oficiální” podpora obsahuje pouze dvě nejnovější verze Chrome / Edge / FF / Opera.

Také IE6 + a Safari 4+ jsou podporovány normalizací v1, ale tato verze již není aktualizována.

Je důležité, abyste zkontrolovali verze prohlížeče pomocí nástroje, jako je Google Analytics. To vám dá lepší představu, zda může být normalizace užitečným nástrojem pro moderní webdesign.

Další zdroje

Neexistuje spousta, co by specificky učit o normalizaci, takže většina učení se děje děláním.

A pravdivě tam není moc vysvětlit, že nemůžete vyzvednout čtením prostřednictvím šablony stylů a kopírováním / pozměňováním kódu podle potřeby. Ale pokud hledáte další relevantní informace, přidal jsem některé odkazy níže.

Související články

• Nicolas Gallagher: O Normalize.css
• Úvod do HTML5 Boilerplate
• Normalize.css vs Reset.css: Který z nich použít?

Intro Videos

• Použití normalizace CSS
• Resetuje a normalizuje Envato
• Nicolas Gallagher - přemýšlet nad škálovatelnou CSS