Brug Normalize.css til homogen udvikling
Browser kompatibilitet er en stor del af tilgængeligheden på internettet. Udviklere skal overveje variation af deres publikum og browserversioner, der kræver support. Selvom CSS nulstiller er en mulighed, foretrækker de fleste devs Normalize.css for sin enkelhed og krydskompatibilitet i alle moderne browsere.
I dette indlæg vil jeg dække Grundlæggende om Normalisere og hvordan det sammenlignes med generelle CSS-nulstillinger. Dette er ikke et kompliceret bibliotek, og det bør ikke tage mere end et par timer at forstå. Men nøglen til Normalisering er læring hvordan at gennemføre det korrekt og dømmende.
Browser nulstiller vs. Normaliser
I årevis har jeg brugt en tilpasset version af Eric Meyers CSS resets. Disse har været nok til de fleste af mine projekter og har ikke forårsaget større problemer. Men Normaliser ændret mit syn på nulstillingsordninger, fordi det virker anderledes end en CSS-nulstilling. Det er vigtigt at du forstår forskellene.
Tænk på Normaliser som en plagget anvendes konsekvent på alle browsere, og tænk på a CSS nulstilles som en termonukleær detonation på tværs af alle browsere.
Normaliser stilarter og formater overskrifter, afsnit, blokeringer og fælles elementer, så de vises identisk (eller tæt nok) i alle understøttede browsere. CSS nulstiller helt tørre skifer rent, så der er ingen standardindstillinger for alt.
Med en CSS-nulstilling kan dine overskrifter se ud som dine afsnit; elementer har ingen polstring, margener eller mellemrum af nogen art. Med en CSS nulstilling Du skal angive ny kode for at forbedre stilen. Med Normaliser får du en præ-designet stil som kan bygges på.
Så er en af disse bedre end den anden? Det er et meget diskuteret emne, selv om et punkt af argumentet siger, at normalisere fungerer bedre for kompatibilitet og producerer mindre filstørrelser.
“Jeg ville have at argumentere for, at normalisering er bedre end at nulstille. Det vil resultere i mindre CSS overføres over ledningen, bedre brug af UA standard og en bedre forståelse af, hvordan elementer er betød at vise.”
Uanset om du bliver forelsket i Normaliser eller foretrækker en typisk nulstilling, er det vigtigt at i det mindste forstå begge sider og vælge hvad der passer bedst. Meget få udviklere begynder kodning fra bunden, så Normaliser eller en CSS-nulstilling er næsten nødvendig for moderne frontend-udvikling.
Hvis du vil prøve en CSS nulstilling her er nogle populære valg:
- Eric Meyer er nulstillet
- HTML5 Reset
- HTML5Doctor Reset
Normaliser konfig
Normaliser skaberen Nicolas Gallagher skrev et introduktionsposter, der førte med denne erklæring:
“Normalize.css er en lille CSS-fil, der giver bedre cross-browser konsistens i standard styling af HTML-elementer. Det er et moderne, HTML5-klar, alternativ til den traditionelle CSS-nulstilling.”
Gennem årene er dette vokset til et betroet bibliotek, der anvendes af udviklere verden over. Normaliser er endda blevet brugt til en vis grad i Bootstrap og Pure CSS.
Der er to måder at bruge Normaliser i et projekt: Rediger kilden for at tilpasse dit eget Normaliser stylesheet, eller brug det som en base og tilføj stilarter ovenpå.
Den første er en pick-and-choose strategi, hvor du går gennem filen Normalize.css og sletter det, du ikke behøver at lave dit eget brugerark. Dette er bedst på per projekt-basis for at holde filstørrelsen lav.
Alternativt omfatter nogle udviklere hele filen Normalize.css og bygger deres eget stylesheet ud over det. Det fulde Normaliser stylesheet spænder over 420 + linjer med kode, der svarer til ~ 6,8KB ukomprimeret.
Hverken metode er bedre end den anden, og det er værd at følge hvad der virker bedst for hvert projekt eller din foretrukne arbejdsgang.
For at komme i gang skal du enten downloade en kopi af Normaliser fra GitHub eller være vært for en ekstern CDN. Du kan også trække den nyeste version af Normaliser lige fra NPM som sådan:
npm installer - gem normalize.css
Hvis du ikke vil downloade nogen filer, kan du endda lave et nyt CodePen-projekt, som kan tilføjes Normaliser ved et enkelt klik.
Fordi Normalisere er modulær, kan du fjerne sektioner midlertidigt eller endda lave din egen brugerdefinerede opbygning af Normaliser. Derefter kan du starte hvert projekt med udvalgte portioner som HTML5-displayelementerne, mens du fjerner stilarter til indlejret indhold.
Hver Normaliser-regel har en tilsvarende CSS-kommentar, der forklarer, hvad den gør, og hvilke problemer / fejl det løser. Nogle er indlysende som indstilling display: block på nyere HTML5 elementer.
Andre er mindre indlysende som denne SVG-kode, der skjuler overløb i Internet Explorer:
svg: ikke (: root) overløb: skjult;
Jeg anbefaler stærkt at skumme stilarket for at se præcis, hvordan det fungerer, og for at lære, om Normalisering ville være korrekt for dit projekt.
Normaliser.css I Web Design
Den nyeste version af Normalize v4.0 tilbyder udbredt browser support.
- Chrome (sidste to)
- Edge (sidste to)
- Firefox (sidste to)
- Firefox ESR
- Internet Explorer 8+
- Opera (sidste to)
- Safari 6+
Fra hvad jeg kan sige, kan Normalisere understøtte ældre versioner af browsere med konstante opdateringer som Firefox. Men “officiel” Support omfatter kun de to seneste versioner af Chrome / Edge / FF / Opera.
Også IE6 + og Safari 4+ understøttes med Normaliser v1, men den version opdateres ikke længere.
Det er afgørende, at du tjekker browserversioner med et værktøj som Google Analytics. Dette vil give dig en bedre ide om, om Normalize kan være et nyttigt værktøj til moderne webdesign arbejde.
Yderligere ressourcer
Der er ikke meget at specielt lære om Normalisere, så det meste af læring sker ved at gøre.
Og sandt nok er der ikke meget at forklare, at du ikke kan hente ved at læse stilarket og kopiere / ændre kode efter behov. Men hvis du leder efter andre relevante oplysninger, har jeg tilføjet nogle links nedenfor.
relaterede artikler
- Nicolas Gallagher: Om Normalize.css
- Introduktion til HTML5 Boilerplate
- Normalize.css vs Reset.css: Hvilken en skal bruges?
Intro Videoer
- Brug Normalisere CSS
- Nulstiller og normaliserer af Envato
- Nicolas Gallagher - tænker ud over skalerbar CSS
