Was ist ein CSS Reset?

CSS Reset — ist eine Sammlung von CSS-Regeln, die dazu dienen, einheitliche Grundstile für alle HTML-Elemente standardmäßig festzulegen und Unterschiede in den Standardstilen der Browser zu überwinden. Dies trägt dazu bei, eine vorhersehbarere und browserübergreifende Darstellung von Webseiten zu gewährleisten.

Hauptziele des CSS Reset:

• Entfernen oder Zurücksetzen der Standard-Margen (margin, padding) und Rahmen.
• Zurücksetzen der Standardgrößen von Schriftarten und Zeilenabständen für Überschriften, Absätze usw.
• Einheitliche Gestaltung von Listen (ul, ol).
• Zurücksetzen der Stile für Tabellen, Formulare, Bilder und andere Elemente.

Beispiel für einen grundlegenden CSS Reset:

/*
   CSS Reset: Setzt die Standardstile der Browser zurück
   um ein einheitliches Grundlayout der Elemente zu gewährleisten.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Padding und Border in die Gesamtgröße einbeziehen */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Font-Glättung */
}

img, picture, video, canvas, svg {
  display: block; /* Entfernt den Standardabstand unter Inline-Bildern */
  max-width: 100%; /* Stellt sicher, dass Bilder die Container nicht überschreiten */
}

input, button, textarea, select {
  font: inherit; /* Erbt die Schriftart vom Elternelement */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Ermöglicht Zeilenumbruch bei langen Wörtern */
}

Es gibt verschiedene Varianten von CSS Reset, z.B. Eric Meyer's Reset CSS oder Normalize.css. Normalize.css bewahrt nützliche Standardstile und korrigiert nur jene, die Kompatibilitätsprobleme verursachen. Die Wahl hängt vom Projekt und den Vorlieben des Entwicklers ab.