CSS-reset

Marginalen du aldrig skrev

Öppna en tom HTML-sida med bara en <h1> och titta noga. Det finns ett par pixlars glapp mellan innehållet och webbläsarfönstrets kant, och ett tydligt avstånd ovanför och under rubriken. Du skrev aldrig den koden. Så varifrån kommer den?

Svaret är att webbläsaren har en egen inbyggd stilmall, en så kallad user-agent stylesheet. Innan en enda rad av din CSS läses in har webbläsaren redan satt margin på <body>, storlek och marginaler på dina rubriker, punkter på dina <ul> och mycket mer. Det är därför en rå HTML-sida inte ser helt naken ut.

Problemet är att webbläsare historiskt haft lite olika standardvärden. Samma sida kunde se olika ut beroende på var den öppnades. Lösningen som utvecklare landade i kallas en CSS-reset: en bit CSS högst upp i din fil som nollställer eller jämnar ut webbläsarens standardstilar, så att du börjar från ett känt och förutsägbart läge.

“Nollställ allt”: Eric Meyer och den klassiska reseten

Idén populariserades av Eric Meyer, en av världens mest inflytelserika röster inom CSS. Hans Reset CSS från 2007 gjorde en enda radikal sak: den nollställde precis allt.

/* Utdrag ur Eric Meyers klassiska reset, kraftigt förkortat */
html,
body,
h1,
h2,
p,
ul,
ol,
li {
    margin: 0; /* Bort med alla marginaler */
    padding: 0; /* Bort med all padding */
    border: 0; /* Bort med alla borders */
    font-size: 100%; /* Alla element börjar på samma textstorlek */
    font: inherit; /* Ärv typsnitt i stället för webbläsarens default */
}

Poängen var kontroll. När allt är nollställt bygger du upp varje marginal och storlek själv, medvetet, i stället för att slåss mot värden du aldrig satt. Nackdelen är att du nollställer bort även sådant du kanske ville ha, och får bygga tillbaka det för hand.

En rad du redan känner igen

Notera att du redan skrivit en del av en reset. box-sizing-regeln från Boxmodellen är så vanlig att den räknas som obligatorisk i varje modernt projekt:

*,
*::before,
*::after {
    box-sizing: border-box; /* Räkna in padding och border i width */
}

Det är ingen slump att den dyker upp först i nästan alla resets. Den löser den vanligaste layoutfällan innan den ens hinner uppstå.

Den moderna reseten: Andy Bell

Idag använder få den totala Meyer-varianten. Den moderna standarden är mer nyanserad: nollställ det som ställer till problem, behåll det som är vettigt, och lägg till några grundinställningar som gör livet enklare. Det mest spridda exemplet är Andy Bells moderna CSS-reset.

/* Utdrag ur en modern reset i Andy Bells anda */
*,
*::before,
*::after {
    box-sizing: border-box; /* Samma border-box som förut */
}

* {
    margin: 0; /* Nollställ marginaler, men rör inte padding blint */
}

body {
    min-height: 100vh; /* Låt sidan alltid fylla minst hela höjden */
    line-height: 1.5; /* Läsvänligt radavstånd som default */
}

img,
picture {
    max-width: 100%; /* Bilder spränger aldrig sin container */
    display: block; /* Slipp det mystiska glappet under bilder */
}

input,
button,
textarea,
select {
    font: inherit; /* Formulärelement ärver ditt typsnitt, inte systemets */
}

Skillnaden mot Meyer är filosofin. Meyer säger “börja från noll”. Andy Bell säger “börja från en genomtänkt bas”. För dig som är i början är den moderna varianten nästan alltid rätt val: du slipper bygga tillbaka självklarheter som ett läsbart radavstånd.

Pröva i DevTools: hitta webbläsarens egna stilar

Öppna en sida i webbläsaren och tryck F12.

Markera <body> i Elements-fliken.
Titta i Styles-panelen och scrolla ned. Du hittar ett block märkt user agent stylesheet.
Där ser du webbläsarens egna regler, till exempel body { margin: 8px }. Det är glappet du aldrig skrev.
Lägg till din reset (* { margin: 0 }) och ladda om. Nu ser du webbläsarens margin: 8px överstruken, besegrad av din egen regel.

Uppgift: Ge din övningssida en ren start

Din övningssida har hittills ärvt vad webbläsaren råkade bestämma. Nu tar du kontrollen.

Öppna style.css på din övningssida.
Lägg till en modern reset allra överst i filen: box-sizing: border-box på *, *::before, *::after, margin: 0 på *, samt line-height: 1.5 och min-height: 100vh på body.
Ladda om sidan. Lägg märke till vad som ändrades: glappet mot fönsterkanten försvann och avstånden runt rubrikerna nollställdes.
Bygg tillbaka medvetet: ge din <main>-container den padding och de marginaler du faktiskt vill ha, nu när inget sätts bakom ryggen på dig.

Vad händer om…

Kommentera bort hela reset-blocket och ladda om. Titta särskilt på marginalen runt sidan och avståndet ovanför din <h1>. Var kommer de värdena ifrån, när de inte står någonstans i din egen CSS?

Motivera & reflektera

Skriv i din readme.md varför du vill börja varje nytt projekt med en reset. Vilken standardstil förvånade dig mest när du nollställde den?

Nästa nivå

Lägg till ett block som respekterar användare som bett sitt system att minska rörelse:

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Ta reda på vem det hjälper. Personer med känsligt balanssinne kan bli yra eller illamående av rörelser på skärmen, som animationer och effekter där innehåll glider förbi i olika hastigheter. Att lyssna på deras systeminställning är skillnaden mellan en sida som fungerar för alla och en som bara fungerar för dig.