Använda Normalize.css för homogen utveckling

Webbläsarkompatibilitet är en stor del av tillgängligheten på webben. Utvecklare måste överväga variation av deras publik och webbläsarversioner som kräver support. Även om CSS-återställningar är ett alternativ föredrar de flesta devs Normalize.css för enkelhet och korskompatibilitet i alla moderna webbläsare.

I detta inlägg täcker jag grunderna för Normalisera och hur det jämförs med allmänna CSS-återställningar. Det här är inte ett komplicerat bibliotek och det ska inte ta mer än ett par timmar att förstå. Men nyckeln till Normalisera är att lära på vilket sätt att genomföra det ordentligt och förnuftigt.

Browser återställer vs Normalisera

I åratal har jag använt en anpassad version av Eric Meyers CSS-återställningar. Dessa har varit tillräckliga för de flesta av mina projekt och har inte orsakat några större problem. Men Normalisera ändrade min syn på återställning eftersom den fungerar annorlunda än en CSS-återställning. Det är viktigt att du förstår skillnaderna.

Tänk på Normalisera som en plagget tillämpas konsekvent på alla webbläsare, och tänka på a CSS återställs som en termonukleär detonation över alla webbläsare.

Normalisera format och rubriker rubriker, stycken, blockquotes och gemensamma element så de verkar identiska (eller nära nog) i alla stödda webbläsare. CSS återställer helt torka skifferet så det finns inga standardinställningar för allt.

Med en CSS-återställning kan dina rubriker se ut som dina stycken; element har inga vadderingar, marginaler eller mellanslag av något slag. Med en CSS återställning Du måste ange ny kod för att förbättra stilen. Med Normalisera får du en förkonstruerad stil som kan byggas på.

Så är en av dessa bättre än den andra? Det är ett hett diskuterat ämne, även om en argumentation säger att Normalisera fungerar bättre för kompatibilitet och producerar mindre filstorlekar.

“Jag skulle behöva argumentera för att normalisering är bättre än att återställa. Det kommer att resultera i att mindre CSS överförs över tråden, bättre användning av UA-standard och en bättre förståelse av hur element är betydde att visa.”

Oavsett om du blir kär i Normalisera eller föredra en typisk återställning, är det viktigt att du åtminstone förstår båda sidor och väljer vad som passar bäst. Mycket få utvecklare börjar kodning från början så Normalisera eller en CSS-återställning krävs nästan för modern frontend-utveckling.

Om du vill prova en CSS-återställning här är några populära val:

• Eric Meyer återställer
• HTML5 Reset
• HTML5Doctor Reset

Normalisera konfig

Normalisera skaparen Nicolas Gallagher skrev en inledande post som ledde till detta uttalande:

“Normalize.css är en liten CSS-fil som ger bättre cross-browser konsistens i standard styling av HTML-element. Det är ett modernt, HTML5-klart alternativ till den traditionella CSS-återställningen.”

Under åren har detta vuxit till ett pålitligt bibliotek som används av utvecklare över hela världen. Normalisera har till och med använts i viss grad i Bootstrap och Pure CSS.

Det finns två sätt att använda Normalisera i ett projekt: redigera källan för att anpassa ditt eget Normalisera stilark eller använd det som en bas och lägg till stilar överst.

Den förra är en plocka och välja strategi där du går igenom filen Normalize.css och tar bort vad du inte behöver göra för att skapa ditt eget stilark. Det här är bäst på per projekt-basis för att hålla filstorleken låg.

Alternativt innefattar vissa utvecklare hela filen Normalize.css och bygger också ett eget stilark. Det fullständiga Normaliserar stilarket sträcker sig över 420 + linjer med kod som motsvarar ~ 6,8KB okomprimerad.

Varken metod är bättre än den andra och det är värt att följa det som fungerar bäst för varje projekt, eller ditt föredragna arbetsflöde.

För att komma igång ladda ner antingen en kopia av Normalisera från GitHub eller värd det från en extern CDN. Du kan också dra den senaste versionen av Normalisera direkt från NPM så här:

npm installera - spara normalize.css 

Om du inte vill ladda ner filer kan du till och med skapa ett nytt CodePen-projekt som kan läggas till Normalisera med ett knapptryck.

Eftersom Normalisera är modulär kan du ta bort avsnitt tillfälligt eller till och med skapa en egen anpassad byggnad av Normalisera. Då kan du starta varje projekt med valda delar som HTML5-visningselementen medan du tar bort stilar för inbäddat innehåll.

Varje Normalize-regel har en motsvarande CSS-kommentar som förklarar vad den gör och vilka problem / fel det löser. Vissa är uppenbara som inställning display: block på nyare HTML5-element.

Andra är mindre uppenbara som den här SVG-koden som döljer överflöde i Internet Explorer:

svg: not (: root) overflow: hidden;  

Jag rekommenderar starkt att skumma stilarket för att se exakt hur det fungerar och att lära om Normalisera skulle vara rätt för ditt projekt.

Normalize.css I webbdesign

Den senaste versionen av Normalize v4.0 erbjuder utbrett webbläsarstöd.

• Chrome (de senaste två)
• Kant (sista två)
• Firefox (sista två)
• Firefox ESR
• Internet Explorer 8+
• Opera (sista två)
• Safari 6+

Från vad jag kan berätta kan Normalize stödja äldre versioner av webbläsare med ständiga uppdateringar som Firefox. Men “officiell” Stöd innehåller bara de två senaste versionerna av Chrome / Edge / FF / Opera.

Även IE6 + och Safari 4+ stöds med Normalisera v1, men den versionen uppdateras inte längre.

Det är viktigt att du kontrollerar webbläsarversioner med ett verktyg som Google Analytics. Detta kommer att ge dig en bättre uppfattning om att Normalize kan vara ett användbart verktyg för modern webbdesign.

Ytterligare resurser

Det finns inte mycket att specifikt lära om Normalize så det mesta av inlärningen händer genom att göra.

Och sanningsenligt finns det inte mycket att förklara att du inte kan hämta genom att läsa igenom stilarket och kopiera / ändra kod efter behov. Men om du letar efter annan relevant information har jag lagt till några länkar nedan.

relaterade artiklar

• Nicolas Gallagher: Om Normalize.css
• Introduktion till HTML5 Boilerplate
• Normalize.css vs Reset.css: Vilken som ska användas?

Intro Videos

• Använd normalisera CSS
• Återställer och normaliseras av Envato
• Nicolas Gallagher - Tänkande bortom skalbar CSS