Bruke Normalize.css for homogen utvikling

Browser kompatibilitet er en stor del av tilgjengeligheten på nettet. Utviklere må vurdere varians av publikum og nettleserversjoner som krever støtte. Selv om CSS tilbakestilles er et alternativ, foretrekker de fleste devs Normalize.css for enkelhet og krysskompatibilitet gjennom alle moderne nettlesere.

I dette innlegget vil jeg dekke Grunnleggende om Normalisere og hvordan det sammenlignes med generelle CSS tilbakestiller. Dette er ikke et komplisert bibliotek, og det bør ikke ta mer enn et par timer å forstå. Men nøkkelen til Normalisere er læring hvordan å implementere det på riktig måte og dømmende.

Nettleser tilbakestilles vs. Normaliser

I årevis har jeg brukt en tilpasset versjon av Eric Meyers CSS resets. Disse har vært nok for de fleste prosjektene mine og har ikke forårsaket noen store problemer. Men Normaliser, endret visningen min på nullstillingene fordi den fungerer annerledes enn en CSS-tilbakestilling. Det er viktig at du forstår forskjellene.

Tenk på Normaliser som en plagget brukes konsekvent til alle nettlesere, og tenk på a CSS tilbakestilles som en termonukleær detonasjon over alle nettlesere.

Normaliser stiler og formater overskrifter, avsnitt, blokkeringer og vanlige elementer slik at de vises identisk (eller nært nok) i alle støttede nettlesere. CSS tilbakestiller helt tørke skiferene rent slik at det er ingen standardinnstillinger for hva som helst.

Med en CSS tilbakestilling kan overskriftene dine se på samme måte som avsnittene dine; elementer har ingen polstring, marginer eller avstand av noe slag. Med en CSS tilbakestilling du må levere ny kode for å forbedre stilen. Med Normaliser får du en pre-designet stil som kan bygges på.

Så er en av disse bedre enn den andre? Det er et diskutert tema, selv om et poeng av argument sier at Normalisere fungerer bedre for kompatibilitet og produserer mindre filstørrelser.

“Jeg måtte argumentere for at normalisering er bedre enn å tilbakestille. Det vil føre til at mindre CSS blir overført over ledningen, bedre bruk av UA-standard, og en bedre forståelse av hvordan elementene er betydde å vise.”

Enten du blir forelsket i Normaliser eller foretrekker en typisk tilbakestilling, er det viktig å minst forstå begge sider og velge hva som passer best. Svært få utviklere starter koding fra grunnen, slik at Normalisere eller en CSS reset er nesten nødvendig for moderne frontendutvikling.

Hvis du vil prøve en CSS reset her er noen populære valg:

Eric Meyer tilbakestiller
HTML5 Reset
HTML5Doctor Reset

Normaliser konfig

Normaliser skaperen Nicolas Gallagher skrev et innledende innlegg som ledet med denne utsagnet:

“Normalize.css er en liten CSS-fil som gir bedre kryssbrowser-konsistens i standard styling av HTML-elementer. Det er et moderne, HTML5-klart alternativ til den tradisjonelle CSS-reset.”

Gjennom årene har dette vokst til et pålitelig bibliotek som brukes av utviklere over hele verden. Normalisere har til og med vært brukt til en viss grad i Bootstrap og Pure CSS.

Det er to måter å bruke Normaliser i et prosjekt: rediger kilden for å tilpasse ditt eget Normaliser stilark, eller bruk det som en base og legg til stiler på toppen.

Den tidligere er en pick-and-choose strategi hvor du går gjennom filen Normalize.css og slett det du ikke trenger å lage ditt eget stilark. Dette er best på per-prosjekt basis for å holde filstørrelsen lav.

Alternativt inkluderer noen utviklere hele filen Normalize.css og bygger også deres eget stilark. Det fulle Normaliser stilarket spenner over 420 + linjer med kode som tilsvarer ~ 6,8KB ukomprimert.

Verken metode er bedre enn den andre og det er verdt å følge det som fungerer best for hvert prosjekt, eller din foretrukne arbeidsflyt.

For å komme i gang, last ned en kopi av Normaliser fra GitHub eller vert det fra en ekstern CDN. Du kan også trekke den nyeste versjonen av Normaliser rett fra NPM slik som:

npm installere - lagre normalize.css

Hvis du ikke vil laste ned noen filer, kan du til og med lage et nytt CodePen-prosjekt som kan legge til Normalisering ved å klikke på en knapp.

Fordi Normalize er modulær, kan du fjerne seksjoner midlertidig eller til og med lage din egen tilpassede konstruksjon av Normaliser. Deretter kan du starte hvert prosjekt med utvalgte deler som HTML5-skjermelementene mens du fjerner stiler for innebygd innhold.

Hver Normaliser-regel har en tilsvarende CSS-kommentar som forklarer hva den gjør og hvilke problemer / feil det løser. Noen er åpenbare som omgivelser display: block på nyere HTML5-elementer.

Andre er mindre åpenbare som denne SVG-koden som skjuler overløp i Internet Explorer:

svg: ikke (: root) overflow: hidden;

Jeg anbefaler på det sterkeste å skumme stilarket for å se nøyaktig hvordan det fungerer og å lære om Normalisere ville være riktig for prosjektet.

Normaliser.css I Webdesign

Den nyeste versjonen av Normaliser v4.0 tilbyr utbredt nettleserstøtte.

Chrome (siste to)
Kant (siste to)
Firefox (siste to)
Firefox ESR
Internet Explorer 8+
Opera (siste to)
Safari 6+

Fra det jeg kan fortelle, kan Normaliser støtte eldre versjoner av nettlesere med konstante oppdateringer som Firefox. Men “offisielt” Støtte inkluderer bare de to siste versjonene av Chrome / Edge / FF / Opera.

Også IE6 + og Safari 4+ støttes med Normaliser v1, men den versjonen oppdateres ikke lenger.

Det er avgjørende at du sjekker nettleserversjonene med et verktøy som Google Analytics. Dette vil gi deg en bedre ide om Normalisere kan være et nyttig verktøy for moderne webdesignarbeid.

Ytterligere ressurser

Det er ikke mye å spesifikt lære om Normalisere, så det meste av læringen skjer ved å gjøre.

Og det er sannelig ikke mye å forklare at du ikke kan plukke opp ved å lese gjennom stilarket og kopiere / endre kode etter behov. Men hvis du leter etter annen relevant info, har jeg lagt til noen linker nedenfor.

relaterte artikler

Nicolas Gallagher: Om Normalize.css
Introduksjon til HTML5 Boilerplate
Normalize.css vs Reset.css: Hvilken som skal brukes?

Intro videoer

Bruke Normalisere CSS
Tilbakestiller og normaliserer av Envato
Nicolas Gallagher - tenker utover skalerbar CSS