Mi az a CSS Reset?

CSS Reset — ez egy szabályokból álló CSS-készlet, amelynek célja, hogy egységes alapstílusokat állítson be az összes HTML elem számára alapértelmezés szerint, felülírva a böngészők szabványos stílusainak különbségeit. Ez segít biztosítani, hogy a weboldalak megjelenése előrejelezhetőbb és böngészőfüggetlen legyen.

A CSS Reset fő céljai:

• Az alapértelmezett margók (margin, padding) és keretek eltávolítása vagy nullázása.
• A fejléc- és bekezdésstílusok alapértelmezett méreteinek és sortávolságának nullázása.
• A listák (ul, ol) egységes megjelenése.
• A táblázatok, űrlapok, képek és más elemek stílusainak nullázása.

Alap CSS Reset példa:

/*
   CSS Reset: A böngészők alapértelmezett stílusainak nullázása
   az egységes alap kinézet biztosítása érdekében.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* A padding és border beleszámítása az összméretbe */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Betűk simítása */
}

img, picture, video, canvas, svg {
  display: block; /* Az inline képek alatti alapértelmezett tér eltávolítása */
  max-width: 100%; /* Biztosítja, hogy a képek ne lépjenek túl a konténeren */
}

input, button, textarea, select {
  font: inherit; /* A szövegstílus öröklése a szülőtől */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Hosszú szavak törése */
}

Különböző CSS Reset változatok léteznek, például Eric Meyer Reset CSS-je vagy Normalize.css. A Normalize.css, ellentétben a teljes resettel, megőrzi a hasznos alapértelmezett stílusokat, és csak azokat javítja, amelyek kompatibilitási problémákat okoznak. A választás a projekt és a fejlesztő preferenciái szerint történik.