CSS Reset och Normalize
Ta bort inkonsekventa standardstilar i webbläsare med CSS-reset och Normalize-stilmallar.
CSS Reset och Normalize är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Problemet: inkonsekventa standardvärden i webbläsare
Varje webbläsare har en inbyggd user-agent-stilmall med standardstilar för rubriker, marginaler, utfyllnader, listor och formulärelement. Dessa standardvärden skiljer sig mellan webbläsare, vilket leder till ett inkonsekvent utseende.
CSS-reset
En CSS-reset tar bort alla webbläsarens standardvärden och ger en tom utgångspunkt. Den välkända reseten från Eric Meyer anger marginal, utfyllnad och många egenskaper till noll eller none.
<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>
CSS Normalize
Normalize.css använder en annan metod: i stället för att ta bort alla standardvärden gör den webbläsarnas standardvärden konsekventa och åtgärdar kända buggar, samtidigt som användbara standardvärden som rubrikstorlekar bevaras.
Avvägningar mellan reset och normalize
Jämförelse:
- Reset: tom utgångspunkt, allt definieras själv, mer arbete
- Normalize: konsekvent bas med användbara standardvärden kvar, mindre egen kod
Modern CSS-reset
En populär modern reset (av Josh Comeau) fokuserar på de mest betydelsefulla standardvärdena:
<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>
Bilder som blockelement
Om bilder anges som display: block tas det vanliga tomrummet bort (som orsakas av line-height) längst ned på bilder inuti behållare:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />
Mönster för listreset
Ta bort listmarkörer och indrag när anpassad navigering eller anpassade UI-listor formges:
<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>
Reset för formulärelement
Formulärelement (input, button, textarea) ärver inte teckensnitt som standard i många webbläsare. En vanlig lösning:
<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>
Tailwinds Preflight
Tailwind CSS innehåller en egen reset som kallas Preflight och bygger på modern-normalize. Om Tailwind används har en reset redan tillämpats automatiskt.
Var reseten ska placeras
Placera alltid reset- eller normalize-stilmallen först, före alla komponent- eller utility-stilar. Kaskadordningen gör att de egna stilarna åsidosätter reseten utan konflikter i specificitet.
Att tänka på vid en anpassad reset
Skapa en egen minimal reset som är anpassad efter projektet i stället för att inkludera en fullständig reset från tredje part. Ta endast med de regler som behövs för att hålla CSS-omfattningen liten.
<p>Base font-size and line-height set on the root element affect the whole page.</p>
Snabbkontroll
Vad är den viktigaste skillnaden mellan en CSS-reset och CSS normalize?
Sammanfattning
Webbläsarnas standardstilar är inkonsekventa. CSS-resetar tar bort alla standardvärden, medan normalize.css gör dem konsekventa. Moderna resetar fokuserar på de mest betydelsefulla reglerna, till exempel box-sizing: border-box, bilder med maximal bredd och ärvda teckensnitt för formulärelement. Ladda alltid reseten först.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”CSS Reset och Normalize” gratis?
Ja – hela texten till ”CSS Reset och Normalize” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”CSS Reset och Normalize”?
Ta bort inkonsekventa standardstilar i webbläsare med CSS-reset och Normalize-stilmallar. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”CSS Reset och Normalize”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Block jämfört med inline och inline-block
- Visibility jämfört med display: none
- Overflow: scroll, clip och auto
- CSS Reset och Normalize