Normalize.css – Hva er det?

Som webutvikler arbeider jeg jevnlig med utfordringen det er å få oppsett til å fungere likt i ulike nettlesere. I den sammenhengen har jeg stadig kommet tilbake til Normalize.css – et verktøy som de siste årene har etablert seg som uunnværlig i moderne webutvikling. La oss se nærmere på hvorfor Normalize.css er så nyttig, og hvordan du kan få mest mulig ut av det.

Hva er Normalize.css, og hvorfor er det viktig?

Normalize.css er et CSS-bibliotek utviklet av Nicolas Gallagher og Jonathan Neal for å normalisere standardstilene til HTML-elementer på tvers av nettlesere. Målet er å fjerne forskjeller i hvordan elementer vises som standard, uten å fjerne nyttige standardinnstillinger i nettleseren. Det skiller seg fra klassiske CSS-resetter, som opphever alle stiler og overlater til utviklerne å utforme hvert element fra bunnen av.

Normalize.css-stilarket brukes for tiden i en rekke prosjekter: Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, SoundCloud og mange andre rammeverk, verktøysamlinger og nettsteder.

Stilarket støtter et svært bredt utvalg av nettlesere, også på mobil. Det inneholder CSS-regler for å normalisere HTML5-elementer, typografi, lister, innebygd innhold, skjemaer og tabeller.

Hvorfor er dette viktig? Nettlesernes standardstiler er ofte ulike, slik at et nettsted kan se forskjellig ut fra nettleser til nettleser. Normalize.css bidrar til å fjerne disse forskjellene ved å gjøre standardstilene mer ensartede, samtidig som nyttige standardinnstillinger bevares. Det sparer tid og gir en mer enhetlig brukeropplevelse på tvers av enheter og nettlesere.

Flere funksjoner i Normalize.css

Normalize.css gir en rekke fordeler utover selve normaliseringen:

1. Ensartet visning i nettlesere: Det håndterer mange små, men viktige forskjeller i hvordan elementer vises i ulike nettlesere, for eksempel input-felt, button-stiler og table-oppsett. Det reduserer tiden som går med til feilsøking, og gir et felles utgangspunkt.
2. Utvidet støtte for HTML5: HTML5 innførte mange nye elementer og attributter som eldre nettlesere ofte ikke viser riktig. Normalize.css sørger for at disse elementene vises riktig og ensartet i alle vanlige nettlesere. For eksempel vises summary-elementet, som er ment brukt inne i details-elementer, på en enhetlig måte i eldre nettlesere.
3. Bedre typografi: Normalize.css inneholder også typografiske tilpasninger som sørger for at tekst er ensartet og lett å lese på alle plattformer. Det omfatter innstilling av line-height, standardisering av font-size og fjerning av unødvendige marger på vanlige tekstelementer.
4. Skjemaer og inndataelementer: Visningen av skjemaelementer er et av de mest utfordrende områdene i webutvikling. Nettleserne behandler disse elementene svært forskjellig, noe som kan gi store visuelle forskjeller. Normalize.css normaliserer stilene ved å gi ensartede grunnstiler for input, textarea, select og button-elementer.
5. Modulær oppbygning: Koden i Normalize.css er delt inn i separate, godt dokumenterte deler. Dermed kan du bruke bestemte deler eller utelate dem etter behov. Hvis du for eksempel vet at nettstedet ditt ikke bruker skjemaer, kan du enkelt utelate den delen og redusere lastetiden ytterligere.

Normalisering eller reset?

Det er verdt å se grundig på forskjellen mellom et normalize.css-stilark og en tradisjonell CSS-reset:

«Normalize.css bevarer nyttige standardstiler.»

En reset gir et enhetlig visuelt uttrykk ved å nullstille standardstilene til nesten alle elementer. Normalize.css bevarer derimot mange nyttige standardstiler i nettleseren. Det betyr at du slipper å definere alle stilene for vanlige typografiske elementer på nytt.

Når ulike nettlesere gir et element forskjellige standardstiler, forsøker normalize.css å gjøre stilene så ensartede som mulig og i tråd med moderne standarder.

«Normalize.css retter vanlige feil.»

Det retter vanlige feil i nettlesere på både datamaskin og mobil som faller utenfor det en reset håndterer. Det omfatter display-regler for HTML5-elementer, korrigering av font-sizefor forhåndsformatert tekst, SVG-overlapping i IE9 og mange skjemafeil på tvers av plattformer og nettlesere.

Eksempelet nedenfor viser hvordan normalize.css-stilarket gjør den nye HTML5-verdien "search" for type-attributtet til input-elementer ensartet og mulig å style på tvers av nettlesere:

/**
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

En reset klarer ofte ikke å gi nettleserne et felles utgangspunkt for hvordan et element skal vises. Det gjelder særlig skjemaer, et område der normalize.css-stilarket er til stor hjelp.

«Normalize.css «søler» ikke til debug-verktøy.»

Med et normalize.css-stilark oppstår ikke dette i samme grad, fordi reglene retter seg mot bestemte stiler, og flere selektorer bare brukes sammen i begrenset omfang.

«Normalize.css kan brukes modulært.»

Prosjektet er delt inn i relativt uavhengige deler. Det gjør det enkelt å se hvilke elementer som trenger bestemte stiler. Du kan også fjerne en del, for eksempel normaliseringen av skjemaer, hvis du vet at nettstedet ditt aldri vil trenge disse reglene.

«Normalize.css har omfattende dokumentasjon.»

Normalize.css-koden er basert på metodiske tester og nøyaktige undersøkelser på tvers av nettlesere. Koden er sterkt dokumentert i filen og ytterligere beskrevet i Github Wiki. Man kan altså nøyaktig undersøke hva hvilken kodelinje «gjør», hvorfor den ble satt inn, hvilke forskjeller det er fra nettleser til nettleser, og gjennomføringen av egne tester blir dermed betydelig forenklet.

Prosjektet skal bidra til å forklare hvordan nettlesere viser elementer som standard, og gjøre det enklere å bidra med forbedringer.

Gode fremgangsmåter for å ta i bruk Normalize.css

Begynn med å installere eller laste ned normalize.css-stilarket fra GitHub. Du kan bruke Normalize.css effektivt på flere måter. Vurder disse fremgangsmåtene:

1. Tilpass til prosjektets behov: Bruk Normalize.css som grunnlag, og tilpass det til behovene i prosjektet ditt. Det betyr at du bruker filen som utgangspunkt for din egen grunnleggende CSS og overstyrer den ved behov.
2. Bruk filen uendret: Du kan også legge Normalize.css uendret inn i prosjektet og tilpasse bestemte stiler i en egen CSS-fil. Det er viktig at ditt eget stilark lastes inn etter Normalize.css, slik at endringene dine kan overstyre normaliseringen.
3. Kortere lastetider: Bruk bare de delene av Normalize.css du faktisk trenger. Den modulære oppbygningen gjør det enklere å fjerne unødvendige deler og dermed redusere lastetiden på nettstedet.

Nettlesere som støttes

• Google Chrome (nyeste versjon)
• Mozilla Firefox (nyeste versjon)
• Mozilla Firefox ESR
• Opera (nyeste versjon)
• Apple Safari 6+
• Internet Explorer 8+

Avsluttende merknader

Normalize.css-stilarket skiller seg fra en CSS-reset både i omfang og virkemåte. Det er verdt å prøve det for å se om det passer til prosjektene dine og måten du foretrekker å arbeide på.

Prosjektet utvikles offentlig på GitHub. Alle kan melde problemer samt bidra med rettelser og tillegg. Hele prosjekthistorikken er offentlig tilgjengelig, og sammenhengen og grunnene til eventuelle kodeendringer kan slås opp i «commit»-meldingene og «issue»-innleggene.

Videre lesning

Her er noen nyttige ressurser hvis du vil lære mer og arbeide direkte med Normalize.css:

• «CSS: The Definitive Guide» av Eric Meyer – En grundig bok som beskriver detaljene i CSS og nyttige teknikker for å håndtere forskjeller mellom nettlesere.
• MDN Web Docs: «CSS Cross-Browser Development» – En svært god kilde til oppdatert informasjon om CSS-utvikling på tvers av plattformer.
• «HTML5 and CSS3 All-in-One For Dummies» av Andy Harris – Gir en lettfattelig innføring i utvikling med HTML5 og CSS3 og viser hvordan Normalize.css kan brukes i moderne prosjekter.
• Normalize.css på GitHub – Prosjektets offisielle GitHub-side med kildekode og dokumentasjon.
• MDN Web Docs: «CSS User Agent Style Sheets» – Detaljert informasjon om standardstilene i ulike nettlesere.
• Detaljert informasjon om standardstilene i nettlesere (på engelsk): WHATWG suggestions for rendering HTML documents, Internet Explorer User Agent Style Sheetsog CSS2.1 User Agent Style Sheet Defaults.
• HTML5 Boilerplate – En omfattende frontend-mal som bruker Normalize.css for å gi et solid grunnlag for ethvert nettprosjekt.
• Web.dev: «Designing for Browser Diversity» – Googles veiledning til å utforme nettsteder for et bredt utvalg av nettlesere og enheter.

Med disse ressursene er du godt rustet til å ta i bruk Normalize.css i prosjektene dine og håndtere utfordringene med kompatibilitet på tvers av nettlesere. Lykke til med utviklingen!