Modernes CSS Reset heißt heute etwas völlig anderes als der 50-Zeilen-Block, den viele Entwickler noch aus den Nullerjahren im Kopf haben. Browser rendern so einheitlich wie nie, der Internet Explorer liegt im Grab, und trotzdem schwört die halbe Branche weiter auf Resets. Warum eigentlich?
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Modernes CSS Reset spaltet die Webentwicklung in zwei Lager. Die einen kopieren seit Jahren denselben Eric-Meyer-Block in jedes Projekt, ohne eine einzige Zeile zu hinterfragen. Die anderen haben ihr Reset längst auf wenige, bewusst gesetzte Regeln eingedampft. Beide Lager bauen funktionierende Websites, und doch trennen Welten die zwei Ansätze.
Das Wichtigste in Kürze
- Der klassische Eric-Meyer-Reset stammt aus einer Zeit massiver Browserunterschiede. Heute schadet ein Teil seiner Regeln mehr, als er nützt.
- Ein modernes CSS Reset setzt auf sinnvolle Defaults statt auf Tabula rasa: box-sizing, Media-Skalierung, Font-Vererbung.
- Normalize.css gilt als Klassiker, bekam aber seit November 2018 kein Update mehr. Aktive Alternativen heißen modern-normalize und sanitize.css.
- Frische Eigenschaften wie
:focus-visible,scrollbar-gutterund@layermachen das Reset 2026 kürzer und robuster zugleich.
Warum sah ein CSS Reset 2014 noch völlig anders aus?
2014 musste ein Reset Dutzende Browser-Macken glattbügeln, allen voran die des Internet Explorer. Heute rendern Chrome, Firefox und Safari nahezu identisch, deshalb fällt ein großer Teil der alten Reset-Regeln ersatzlos weg.
Der Urvater aller Resets stammt von Eric Meyer. Sein „Reset Reloaded“ listete praktisch jedes HTML-Element auf und setzte Margin, Padding und Border kompromisslos auf null. Dazu kamen Klassiker wie *{font-size:101%}, ein reiner Notnagel gegen die zickigen Schriftgrößen im Internet Explorer.
Genau hier liegt das Problem. Microsoft hat den Internet Explorer 11 am 15. Juni 2022 endgültig beerdigt. Der Browser, gegen den die halbe Reset-Logik einst entstand, existiert nicht mehr. Eine Regel wie *{font-size:101%} repariert 2026 nichts, sie sorgt nur für Verwirrung beim nächsten Entwickler im Team.
Schlimmer wiegt eine andere alte Empfehlung. Viele Resets von damals enthielten :focus { outline: 0 }, um den Fokusrahmen loszuwerden. Heute gilt diese Zeile als handfester Barrierefreiheits-Fehler, weil Tastaturnutzer ohne sichtbaren Fokus die Orientierung verlieren. Was 2014 als sauberes Aufräumen durchging, kassiert heute zu Recht Kritik.
Auch der Einbau hat sich überholt. Das damals beliebte @import url("reset.css") blockiert das Rendern und lädt Stylesheets nacheinander statt parallel. Eine solide Grundlage zum Zusammenspiel von Selektoren und Spezifität liefern übrigens die CSS-Grundlagen und die Funktionsweise der Kaskade.
Reset, Normalize oder sanitize.css: Was unterscheidet die Ansätze?
Ein Reset macht alle Browser-Defaults platt, Normalize glättet nur die Unterschiede und behält sinnvolle Voreinstellungen. sanitize.css und modern-normalize kombinieren beide Ideen. Tailwinds Preflight ist ein Reset, das direkt im Framework steckt.
Die vier Ansätze verfolgen unterschiedliche Philosophien. Ein klassisches Reset räumt radikal auf und überlässt dem Entwickler jede einzelne Entscheidung neu. Normalize geht behutsamer vor und korrigiert nur dort, wo Browser tatsächlich auseinanderlaufen.
| Ansatz | Philosophie | Stand 2026 |
|---|---|---|
| Eric-Meyer-Reset | Alles auf null, Designer baut komplett neu auf | Veraltet, viele tote Regeln |
| Normalize.css | Nur Unterschiede glätten, Defaults behalten | Letzte Version 8.0.1 von 2018, ungepflegt |
| modern-normalize | Schlankes Normalize für Evergreen-Browser | Aktiv gepflegt, gute Wahl |
| sanitize.css | Normalize plus meinungsstarke Defaults | Aktiv gepflegt |
| Tailwind Preflight | Reset als Teil des Frameworks | Standard in Tailwind-Projekten |
Ein Wort zu Normalize.css. Das Projekt von Nicolas Gallagher war jahrelang der Goldstandard. Die letzte Version 8.0.1 erschien allerdings am 5. November 2018, seither herrscht Funkstille. Wer heute auf die Idee von Normalize setzt, greift besser zum aktiv gepflegten modern-normalize oder zu sanitize.css.
Braucht modernes CSS bei Evergreen-Browsern überhaupt noch ein Reset?
Ja, aber ein kurzes. Den großen Meyer-Reset braucht 2026 niemand mehr. Ein schlankes modernes CSS Reset mit rund einem Dutzend Regeln spart trotzdem Zeit, weil box-sizing, Media-Defaults und Font-Vererbung in jedem Projekt gleich gebraucht werden.
Die Browserlandschaft hat sich grundlegend gewandelt. Chrome, Firefox, Safari und Edge aktualisieren sich automatisch und stimmen ihre Engines über Projekte wie Interop aktiv aufeinander ab. Ein Vollreset auf moderne Browser loszulassen, gleicht dem Tragen eines Bauhelms im Wohnzimmer: Die Schutzausrüstung stört mehr, als sie hilft.
Wir haben jahrelang jeden Meyer-Block treu mitgeschleppt. Genutzt haben wir am Ende vielleicht ein Fünftel davon. Genau diese Erfahrung steckt hinter den schlanken Resets von Andy Bell auf piccalil.li und Josh Comeau, die heute den Ton angeben. Beide werfen den Ballast über Bord und behalten nur, was in echten Projekten täglich Arbeit spart.
Der Kern bleibt überschaubar. Ein modernes CSS Reset kümmert sich um drei Dinge: ein berechenbares Box-Modell, vernünftig skalierende Medien und Formularelemente, die endlich die richtige Schrift erben. Alles andere ist Kür.
Welche Zeilen gehören in ein modernes CSS Reset?
In ein modernes CSS Reset gehören: box-sizing auf border-box, ein Margin-Reset, eine angenehme line-height, skalierende Medien, Font-Vererbung für Formulare und ein Schutz gegen überlaufende Wörter. Mehr braucht der Grundstock nicht.
Der folgende Block zeigt einen praxistauglichen Grundstock, kommentiert Zeile für Zeile:
Jede Zeile hat einen konkreten Zweck. Das box-sizing auf border-box beendet das ewige Rechnen mit Innenabständen. Der Margin-Reset nimmt allen Elementen ihre uneinheitlichen Außenabstände. Die Font-Vererbung sorgt dafür, dass Buttons und Eingabefelder nicht plötzlich in der hässlichen Systemschrift erscheinen.
Viele alte Zentrier-Hacks, die ein Reset früher mitschleppte, sind heute überflüssig. Wie Sie Elemente in modernem CSS sauber zentrieren, zeigt unser eigener Überblick mit fünf aktuellen Methoden.
Der komplette Eric-Meyer-Reset zielt 2026 noch auf einen Browser, den Microsoft längst beerdigt hat. Ein modernes CSS Reset braucht keine 50 Zeilen mehr.
— Michael Dobler, Herausgeber Dr. Web
Wie verhindern :focus-visible und scrollbar-gutter typische Fehler?
:focus-visible zeigt den Fokusrahmen nur bei Tastaturnutzung, statt ihn wie das alte outline:0 ganz zu entfernen. scrollbar-gutter: stable reserviert den Platz der Scrollleiste dauerhaft, damit das Layout beim Scrollen nicht springt.
Die Barrierefreiheit verdient besondere Sorgfalt. Statt den Fokusrahmen pauschal zu killen, steuert :focus-visible ihn intelligent. Mausnutzer sehen keinen störenden Rahmen, Tastaturnutzer dagegen schon. Damit löst eine einzige Eigenschaft den alten Zielkonflikt zwischen Optik und Zugänglichkeit.
Das zweite Ärgernis von früher war der springende Seiteninhalt. Sobald eine Scrollleiste auftauchte, verschob sich das zentrierte Layout um ein paar Pixel. Der alte Trick html { overflow: scroll } erzwang deshalb dauerhaft eine Leiste. Moderne Browser lösen das eleganter mit scrollbar-gutter: stable, das den Platz reserviert, ohne eine leere Leiste zu zeigen. Den Fokusrahmen einfach wegzuräumen, bleibt für uns einer der ärgerlichsten Fehler im ganzen Web, weil er echte Menschen aussperrt.
Wann lohnen sich @layer reset und :where()?
@layer reset packt das Reset in eine eigene, niedrig priorisierte Kaskadenebene, sodass eigene Stile es immer überschreiben. :where() drückt die Spezifität der Reset-Selektoren auf null. Beide Werkzeuge beenden die Spezifitätskämpfe, die früher üblich waren.
Cascade Layers sind die vielleicht wichtigste Neuerung für Resets. Mit @layer legen Sie eine klare Reihenfolge fest, in der Browser konkurrierende Regeln auflösen. Das Reset landet ganz unten, eigene Komponenten darüber.
Das :where() drückt zusätzlich die Spezifität auf null. Eine Reset-Regel mit :where() lässt sich später ohne !important und ohne Verrenkungen überschreiben. Wie Sie zusätzlich Ihr CSS gezielt für die Performance optimieren, beschreiben wir in einem eigenen Beitrag.
Wie machen dvh, text-wrap und prefers-reduced-motion das Reset zukunftssicher?
Dynamische Viewport-Einheiten wie dvh lösen das alte Problem mobiler Adressleisten. text-wrap: balance und pretty verbessern den Umbruch ganz ohne JavaScript. prefers-reduced-motion respektiert Nutzer, die weniger Animation wollen. Alle drei gehören 2026 in ein gutes Reset.
Die Einheit 100vh machte auf Smartphones jahrelang Ärger, weil die ein- und ausfahrende Adressleiste die Höhe veränderte. Die dynamische Variante 100dvh misst die tatsächlich sichtbare Höhe und beendet das Gezappel. Für noch feinere Kontrolle stehen svh und lvh bereit.
Beim Textumbruch hilft text-wrap. Der Wert balance verteilt Überschriften auf ausgewogene Zeilen und ist laut caniuse.com in Chrome, Firefox und Safari breit verfügbar. Der Wert pretty verhindert einzelne Wörter in der letzten Zeile und gilt vorerst als Fortschrittsschicht, die Sie gefahrlos obendrauf legen.
Der letzte Baustein ist Rücksicht. Mit prefers-reduced-motion drosseln Sie Animationen für Menschen, die starke Bewegung als unangenehm empfinden. Neuere Eigenschaften wie interpolate-size für Animationen auf height: auto setzen Sie am besten über @supports als Fortschrittsschicht ein, damit ältere Browser sauber zurückfallen.
Glossar: 15 wichtige Fachbegriffe zu modernem CSS Reset
box-sizing
box-sizing legt fest, wie der Browser Breite und Höhe eines Elements berechnet. Mit dem Wert border-box zählen Innenabstand und Rahmen zur angegebenen Breite. In jedem modernen Reset bildet diese Eigenschaft die erste und wichtigste Zeile, weil sie das Layout berechenbar macht.
Cascade Layers (@layer)
Cascade Layers führen mit der Regel @layer benannte Ebenen in die CSS-Kaskade ein. Entwickler bestimmen damit die Reihenfolge, in der Browser konkurrierende Regeln gewichten. Für Resets sind Layers ideal, weil das Reset gezielt unterhalb der eigenen Stile liegt.
CSS Reset
CSS Reset bezeichnet ein Stylesheet, das die uneinheitlichen Voreinstellungen der Browser vereinheitlicht. Klassische Resets setzten alle Werte auf null. Ein modernes Reset behält dagegen sinnvolle Defaults und korrigiert nur, was im Alltag tatsächlich stört.
dvh (dynamische Viewport-Einheit)
dvh steht für „dynamic viewport height“ und misst die aktuell sichtbare Höhe des Anzeigebereichs. Auf Smartphones berücksichtigt die Einheit die ein- und ausfahrende Adressleiste. Damit ersetzt 100dvh das fehleranfällige 100vh in vielen Layouts.
Evergreen-Browser
Evergreen-Browser aktualisieren sich automatisch im Hintergrund, ohne dass Nutzer eingreifen. Chrome, Firefox, Edge und Safari gehören dazu. Diese ständige Aktualität ist der Hauptgrund, warum große Resets gegen alte Browser heute überflüssig sind.
:focus-visible
:focus-visible ist eine Pseudoklasse, die den Fokusrahmen nur dann zeigt, wenn ein Element per Tastatur angesteuert wird. Mausklicks lösen den Rahmen nicht aus. Die Pseudoklasse ersetzt das veraltete outline: 0 und schützt die Barrierefreiheit.
interpolate-size
interpolate-size erlaubt mit dem Wert allow-keywords das Animieren von Größen auf Schlüsselwörter wie height: auto. Lange war genau das in CSS unmöglich. Die Eigenschaft ist neu und gehört nur als optionale Fortschrittsschicht in ein Reset.
line-height
line-height steuert den Abstand zwischen den Zeilen eines Textes. Ein Wert um 1.5 verbessert die Lesbarkeit von Fließtext deutlich. Moderne Resets setzen diesen Wert am body, damit langer Text von Anfang an angenehm zu lesen ist.
modern-normalize
modern-normalize ist ein schlanker Nachfolger von Normalize.css, zugeschnitten auf Evergreen-Browser. Das Projekt wird aktiv gepflegt und verzichtet auf Korrekturen für längst verschwundene Browser. Für Teams, die den Normalize-Ansatz mögen, ist modern-normalize die zeitgemäße Wahl.
Normalize.css
Normalize.css war jahrelang der Standard, um Browserunterschiede zu glätten, ohne alle Defaults zu löschen. Die letzte Version 8.0.1 erschien 2018, danach ruhte das Projekt. Aktuelle Projekte greifen besser zu modern-normalize oder sanitize.css.
prefers-reduced-motion
prefers-reduced-motion ist eine Media-Funktion, die abfragt, ob ein Nutzer reduzierte Bewegung wünscht. Mit dem Wert reduce drosseln Stylesheets Animationen und Übergänge. Ein modernes Reset respektiert diese Einstellung aus Gründen der Barrierefreiheit.
sanitize.css
sanitize.css kombiniert die behutsame Glättung von Normalize mit einigen meinungsstarken Defaults. Das Projekt wird aktiv gepflegt und versteht sich als praxisnahe Mischung. Entwickler, die etwas mehr Vorgaben als bei modern-normalize wollen, finden hier eine gute Basis.
scrollbar-gutter
scrollbar-gutter reserviert mit dem Wert stable dauerhaft Platz für die Scrollleiste. Damit verschiebt sich das Layout nicht mehr, sobald eine Leiste erscheint. Die Eigenschaft löst das alte Problem, das Entwickler früher mit html { overflow: scroll } umgingen.
text-wrap
text-wrap steuert den Zeilenumbruch von Text. Der Wert balance verteilt Überschriften ausgewogen, der Wert pretty verhindert einsame Wörter am Absatzende. Beide Werte verbessern die Typografie ohne JavaScript und gehören in ein modernes Reset.
:where()
:where() ist eine Pseudoklasse, deren Spezifität immer null beträgt. Reset-Regeln innerhalb von :where() lassen sich später mühelos überschreiben. In Kombination mit Cascade Layers verhindert die Pseudoklasse die früher üblichen Spezifitätskämpfe.
FAQ: Braucht modernes CSS 2026 noch ein Reset?
Was ist ein modernes CSS Reset?
Ein modernes CSS Reset ist ein kurzes Stylesheet, das nur die sinnvollen Grundlagen setzt: box-sizing auf border-box, einen Margin-Reset, skalierende Medien und Font-Vererbung für Formulare. Anders als der klassische Eric-Meyer-Reset löscht ein modernes Reset nicht alle Browser-Defaults, sondern behält die nützlichen.
Braucht man 2026 überhaupt noch ein CSS Reset?
Einen großen Reset nicht mehr, ein schlankes schon. Da Evergreen-Browser nahezu identisch rendern, sind die meisten alten Reset-Regeln überflüssig. Ein knappes Reset spart trotzdem Zeit, weil box-sizing, Media-Defaults und Font-Vererbung in jedem Projekt gleich gebraucht werden.
Was ist der Unterschied zwischen Reset und Normalize?
Ein Reset macht alle Browser-Defaults platt und zwingt den Entwickler, jede Eigenschaft neu zu setzen. Normalize glättet dagegen nur die Unterschiede zwischen Browsern und behält sinnvolle Voreinstellungen. sanitize.css und modern-normalize verbinden beide Ansätze.
Ist Normalize.css noch aktuell?
Nein, nicht mehr. Die letzte Version 8.0.1 von Normalize.css erschien am 5. November 2018, seither gibt das Projekt keine Updates mehr heraus. Für den Normalize-Ansatz greifen Sie besser zum aktiv gepflegten modern-normalize oder zu sanitize.css.
Warum sollte man outline:0 vermeiden?
Die Regel outline:0 entfernt den Fokusrahmen komplett und sperrt damit Tastaturnutzer aus, die ohne sichtbaren Fokus die Orientierung verlieren. Die moderne Lösung heißt :focus-visible. Diese Pseudoklasse zeigt den Rahmen nur bei Tastaturnutzung und versteckt ihn bei Mausklicks.
Wohin gehört ein CSS Reset im Stylesheet?
Am besten in eine eigene Cascade Layer. Mit @layer reset landet das Reset auf einer niedrig priorisierten Ebene, sodass eigene Stile das Reset jederzeit ohne Spezifitätskämpfe überschreiben. In Kombination mit :where() bleibt die Spezifität der Reset-Selektoren bei null.
Quellen
Microsoft | Internet Explorer 11 has retired and is officially out of support | https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/ | besucht am 15.06.2026
Eric Meyer | CSS Tools: Reset CSS | https://meyerweb.com/eric/tools/css/reset/ | besucht am 15.06.2026
Andy Bell | A (more) Modern CSS Reset | https://piccalil.li/blog/a-more-modern-css-reset/ | besucht am 15.06.2026
Josh W. Comeau | A Modern CSS Reset (Custom CSS Reset) | https://www.joshwcomeau.com/css/custom-css-reset/ | besucht am 15.06.2026
Nicolas Gallagher | normalize.css Releases/Tags (Version 8.0.1) | https://github.com/necolas/normalize.css/tags | besucht am 15.06.2026
Can I use | CSS text-wrap: balance | https://caniuse.com/mdn-css_properties_text-wrap_balance | besucht am 15.06.2026
MDN Web Docs | scrollbar-gutter | https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter | besucht am 15.06.2026
MDN Web Docs | text-wrap | https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap | besucht am 15.06.2026
