Dieser Beitrag stellt die wichtigsten klassischen CSS-Resets vor, die jeder CSS-Autor kennen sollte, und zeigt dann noch ein paar interessante, moderne Resets. Auch wenn man einen CSS-Reset heute nicht mehr unbedingt benötigt, lohnt sich die Beschäftigung damit, denn man lernt dabei eine Menge.
Inhaltsverzeichnis
- Der erste CSS-Reset: * { padding:0; margin:0; }
- Der Klassiker: »reset.css«
- Ein etwas anderer Ansatz: »normalize.css«
- Interessant: »A modern CSS-Reset« von Andy Bell
- Radikal: »The New CSS Reset« von Elad Shechter
- Ein »Modern CSS Reset« von Josh W. Comeau
- Ausprobieren: Diverse CSS-Resets auf einen Blick
- Fazit: Braucht man heute noch einen CSS-Reset?
Der erste CSS-Reset: * { padding:0; margin:0; }
Alle Browser haben ein eingebautes Stylesheet, und eine ziemlich nervige Sache beim Lernen von CSS war es lange Zeit, dass die Browser in ihren Stylesheets zum Teil sehr unterschiedliche Standardvorgaben hatten.
Um nicht jedes Mal wieder auf Fehlersuche gehen zu müssen, wurde ab etwa 2004 eine Maßnahme populär, die auf den ersten Blick radikal erscheinen mag, die sich aber auf breiter Front durchgesetzt hat:
* { padding: 0; margin: 0; }Viele Webdesigner begannen ihr Stylesheet mit dieser CSS-Regel, die die Innen- und Außenabstände für alle HTML-Elemente auf 0 setzt.
»Betrachten Sie es als Kalibrierung« hieß es dazu im Original-Little Boxes von 2006, denn durch diese eine Regel wurde in allen Browsern eine einheitliche Ausgangssituation geschaffen.
Danach musste man zwar in seinem eigenen CSS alle gewünschten Abstände neu definieren, aber man hatte zumindest in alle Browsern eine ähnliche Grundlage.
Der Klassiker: »reset.css«
Die Sache mit dem CSS-Reset wurde immer beliebter, und 2007 veröffentlichte Erik Meyer seine ausführlichen »Reset Styles«, die zu einem echten Klassiker wurden:
Meyer geht in seinem Reset etwas zielgerichteter vor und listet z. B. alle Selektoren einzeln. Außerdem werden neben padding und margin auch die Rahmenlinien (border) entfernt und eine grundlegende Schriftgestaltung definiert.
Ein etwas anderer Ansatz: »normalize.css«
CSS-Resets sind in der Regel recht radikal und überschreiben fast alle Browservorgaben, was nach dem Motto »Entfernt die Zähne samt Belag« manchmal auch über das Ziel hinausschießt und mehr Arbeit verursacht als es einspart.
Als Alternative zu einem harten Reset hat sich daher eine Normalisierung etabliert, also ein eher weiches Angleichen der unterschiedlichen Browservorgaben, und das bekannteste Projekt dieser Art ist normalize.css.
Initiator Nicolas Gallagher beschreibt die Ziele seines Projektes wie folgt:
- sinnvolle CSS-Browservorgaben erhalten und nicht überschreiben
- Angleichung der Gestaltung im Browser für HTML-Elemente
- Korrektur von bekannten Browserbugs und -inkonsistenzen
- Verbesserung der Usability durch subtile Verbesserungen
- Erklärung des Codes durch Kommentare und Dokumentation
normalize.css wurde in Websites wie Twitter und GitHub und Projekten wie HTML5 Boilerplate und Bootstrap genutzt, und wurde auch in »Flexible Boxes« (ab 2013) vorgestellt. Als Alternative zu normalize.css gibt es auch noch das Projekt sanitize.css, das einen ähnlichen Ansatz verfolgt, aber etwas weniger Rücksicht auf ältere Browser nimmt.
Interessant: »A modern CSS-Reset« von Andy Bell
Lange Zeit hörte man eigentlich immer weniger von CSS-Resets, aber im Oktober 2019 veröffentlichte der immer lesenswerte Andy Bell (aka @piccallili_) einen Blogbeitrag namens A Modern CSS Reset.
In seiner Einleitung schreibt er, dass man die traditionellen Resets heutzutage wohl nicht mehr braucht:
In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days.
Andy Bell spart sich selbst bei neuen Projekten aber etwas Arbeit, in dem er ein paar grundlegende Einstellungen wie das Border-Box-Modell oder die Entfernung von margin für bestimmte Elemente vorab definiert. Eine Besonderheit in seinem modernen Reset ist das Styling für Listen, das zusammengefasst etwa so aussieht:
ul[class],
ol[class] {
list-style: none;
padding: none;
margin: none;
}Aufzählungszeichen sowie Innen- und Außenabstand werden auf none gesetzt, aber nur für Listen mit dem Attribut class. Das ist z. B. häufig in der Navigation der Fall. Im Fließtext verwendete normale Listen ohne Klasse sind von diesem Reset nicht betroffen.
Auf der Suche nach sinnvollen Standardeinstellungen für eigene Projekte ist der moderne CSS-Reset von Andy Bell auf jeden Fall einen Besuch wert.
Radikal: »The New CSS Reset« von Elad Shechter
Elad Shechter (@eladsc on Twitter) zeigt in seinem im Sommer 2021 veröffentlichten The New CSS Reset, wie man die Gestaltung der Browser-Stylesheets komplett neutralisiert und nur den Wert von display erhält, sodass die Einstellungen für Block- und Inline-Elemente erhalten bleiben. Besonderheit dieses Resets sind die modernen CSS-Features:
- die Keywords
unsetandrevert - die Eigenschaft
all - die Pseudoklassen
:where()und:not()
Der Kern des Resets ist die folgende CSS-Regel:
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
}Der Selektor mit :where() und :not() hat es in sich und auch die Nutzung der Eigenschaft all und der Keywords unset und revert sind sehr interessant, und in einem Interview auf csstricks.com erklärt der Autor, was er sich dabei gedacht hat. Aber dieser Reset ist echt radikal, so nach dem Motto „Entfernt die Zähne samt Belag“:
Ein »Modern CSS Reset« von Josh W. Comeau
Josh W. Comeau (@joshwcomeau on Twitter) hat im November 2021 einen lesenswerten Blogbeitrag namens My Custom CSS Reset veröffentlicht, der aus neun CSS-Regeln besteht:
/* 1. Use a more-intuitive box-sizing model. */
*, *::before, *::after { box-sizing: border-box; }
/* 2. Remove default margin */
* { margin: 0; }
/* 3. Allow percentage-based heights in the application */
html, body { height: 100%; }
/* Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 7. Remove built-in form typography styles */
input, button, textarea, select { font: inherit; }
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 9. Create a root stacking context */
#root, #__next { isolation: isolate; }In dem verlinkten Beitrag erklärt er jede dieser neue Regeln ausführlich und wirklich gut, und auch wenn Sie den Reset nicht einsetzen, lohnt sich die Lektüre schon für diese Erklärungen.
Ausprobieren: Diverse CSS-Resets auf einen Blick
Der folgende CodePen zeigt die Auswirkungen diverser Resets und CSS-Frameworks auf einen Blick:
- HTML5 Kitchen Sink (von Daniel Box auf Codepen.io)
Um die Auswirkungen zu sehen, klicken Sie einfach auf die gewünschte Option.
Fazit: Braucht man heute noch einen CSS-Reset?
CSS-Resets stammen aus einer Zeit, in der der Internet Explorer noch ein wichtiger Browser war. Das ist definitiv für immer vorbei (YES!), und die Vielzahl der heutigen Browser basiert, wie im ersten Kapitel von »Einstieg in HTML und CSS« erwähnt, auf letztlich wenigen Rendering Engines wie Blink, Webkit oder Quantum.
Braucht man also heute überhaupt noch einen CSS-Reset?
Webdesigner Andy Clarke zieht in einem Tweet vom Oktober 2019 folgendes Fazit:
Fazit: Eher nicht.
Vielleicht ist es sinnvoll, für seine Projekte einige häufig benötigte Standardeinstellungen zu definieren, aber traditionelle CSS-Resets verursachen inzwischen meist mehr Arbeit als sie einsparen, und auch die Beispielsite zum Buch und zum Videokurs hat keinen CSS-Reset mehr.
Trotzdem lohnt sich die Beschäftigung mit traditionellen und aktuellen CSS-Resets, denn man kann dabei eine Menge lernen.