Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Löschen ist keine Lösung

Löschen ist keine Lösung

Reset-Stylesheets haben sich als kleine effektive Helfer im Webdesign etabliert. Dirk Jesse hat sich auf die Suche nach den sprichwörtlichen »Haaren in der Suppe« begeben und ist fündig geworden. Daher hier einige kritische Anmerkungen zum ungebremsten Einsatz von Reset-Stylesheets

Gemälde: Pieter Bruegel der Ältere, Der Turmbau zu Babel, 1563. Museum Boijmans van Beuningen, Rotterdam.

Reset-Stylesheets haben eine bemerkenswerte Erfolgsgeschichte hinter sich. Aus dem einst so schlanken * { margin:0; padding:0; } zur Harmonisierung von Unregelmäßigkeiten in den Default-Stylesheets der zahllosen Browser sind mittlerweile Reset-Stylesheets entstanden, die selbst minifiziert noch über ein halbes Kilobyte an CSS-Code auf die Waage bringen und dennoch bedenkenlos eingesetzt werden. Angesichts dieser Entwicklung stellt sich jedoch die Frage, ob dies der richtige Weg ist? Denn eigentlich sind nicht die Default-Stylesheets ansich das Problem, sondern lediglich deren uneinheitliche Implementation.

Über den Sinn von Standardvorgaben

Die Default-Stylesheets der Browser haben eine klare Aufgabe. Sie sorgen dafür, dass semantisch sinnvoll ausgezeichnetes Markup für den Leser nachvollziehbar und verständlich ist, auch wenn Autorenstylesheets einmal nicht zur Verfügung stehen. Sie sorgen für die visuelle Gliederung der Inhalte (Überschriften, Aufzählungen, Zitate, etc.) aufgrund der im Markup transportierten semantischen Informationen.

Zum Leidwesen vieler Frontend-Entwickler sind diese Standardvorgaben jedoch alles andere als einheitlich, was den Kontrollaufwand selbst bei einfachen Gestaltsaufgaben unnötig erhöht. Aus dieser Unzufriedenheit heraus entstanden die so genannten Reset-Stylesheets, mit der Intention, durch das Zurücksetzen (Reset) jeglicher Standardvorgaben eine einheitliche Ausgangsbasis für Webentwickler zu schaffen. Am verbreitetsten ist zweifellos das Reset-Stylesheet von Eric Meyer, gefolgt von dem Reset-Baustein der YUI Library.

Bei beiden Varianten nehmen Nutzer in Kauf, dass auch zahlreiche sinnvolle Vorgaben überschrieben werden, deren Neudefinition z. T. aufwändiger ist als die effektive Ersparnis aus dem Einsatz eines derartigen Stylesheets. Einige dieser Vorgaben werden nachfolgend hinterfragt.

Remember to Define Focus Styles

So steht beispielsweise folgender Kommentar in Eric Meyers Reset-Stylehsheets an der Stelle, an der eine der grundlegendsten (weil nativ vorhanden) und zugleich wichtigsten optischen Navigationshilfen für Tastaturnutzer unbrauchbar gemacht wird:

  1. /* remember to define focus styles! */
  2. :focus { outline: 0; }

Das ersatzlose Entfernen der Hervorhebung von Elementen beim Focussieren (z. B. beim Navigieren per Tastatur) führt nämlich ganz real zu einer Verschlechterung der Zugänglichkeit einer Webseite, da die Standardvorgaben aufgrund der Unkenntnis vieler Nutzer bezüglich dieser Problematik oft die einzige visuelle Navigationshilfe für Tastaturnutzer darstellen.

Eric Meyer begründet seine Vorgehensweise damit, dass er die volle Kontrolle über das visuelle Erscheinungsbild seiner Layouts haben möchte:

“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element – whether it’s strong or em or b or h3 or whatever – and then style it as needed.”

Ich bin mir dabei ziemlich sicher, dass er selbst diesem Credo auch treu bleibt. Leider unterschätzt Eric Meyer damit jedoch seinen großen Einfluss auf die weltweite Entwickler-Community, die seine Vorarbeiten allzu gern übernimmt, ohne seine Entscheidung zu hinterfragen. Sein Reset-Baustein ist in CSS-Frameworks wie Blueprint CSS oder 960.gs enthalten und wird somit von tausenden Anwendern mit großem Vertauen eingesetzt, die sich dieses Problems in der Regel gar nicht bewusst sind.

Die Konsequenz daraus: Selbst erfahrene, professionelle Webentwickler tappen immer wieder in diese Falle und vergessen die Redefinition entsprechender Regeln bei Kundenprojekten. Ist es das wert?

Wollt Ihr Eric Meyers Reset-Bausteins also verwenden, müsst Ihr in jedem Fall darauf achten, die Fokus-Hervorhebung mit ausreichend hohem Kontrast neu zu definieren. Bei dieser Hervorhebung kommt es nicht darauf an, ob die Farbgebung sich möglichst harmonisch in das Screenlayout einschmiegt. Stattdessen ist es wichtig, dem Tastaturnutzer ein möglichst eindeutiges visuelles Feedback für die Navigation auf der Webseite zu geben. Achtet weiterhin darauf, dass in den älteren Internet Explorer-Versionen die Pseudo-Klasse :active verwendet werden muss, um den gleichen Effekt zu erzeugen. Meine Empfehlung ist daher, bei Hervorhebung von Hyperlinks generell die drei Pseudo-Klassen :focus, :hover und :active gleichzusetzen, wobei hier auch die Reihenfolge wichtig ist, damit der Internet Explorer mitspielt.

  1. /* high contrast focus styles! */
  2. a:focus,
  3. a:hover,
  4. a:active {
  5.   color: #fff;
  6.   background: #800;
  7.   outline: 2px #800 solid;
  8. }

Dieses Beispiel deckt nur Links ab. Zur Hervorhebung aktiver Formularelemente sollten ähnliche Einstellungen vorgenommen werden.

Typographie wird überbewertet

Die Überschrift dieses Abschnitts mag kontrovers sein, doch anders ist es aus Sicht eines normalen Anwenders ohne entsprechendes Hintergrundwissen kaum zu erklären, warum sowohl bei Eric Meyer als auch bei YUI typographisch grundlegendste Formatierungen vollständig zurückgesetzt werden. Beide entfernen sämtliche Listeneigenschaften (Abstände und Listentypen), sodass sich die visuelle Darstellung einer <ul> und <ol> weder untereinander noch vom restlichen Fließtext unterscheidet. Wem nützt das?

  1. ol, ul { list-style: none; }

Richtig ist, dass die Defaultvorgaben für Listen wohl zu den Dingen gehören, die in der Vergangenheit innerhalb der verschiedenen Browser unterschieldlicher kaum sein können. Doch in jedem Fall haben die Vorgaben ihren Zweck erfüllt – die jeweiligen Elemente auch ohne zusätzliche Gestaltung für den Nutzer zweifelsfrei erkennbar zu machen. Bei der Entwicklung des Reset-Bausteins des CSS-Frameworks YAML habe ich einen deshalb alternativen Weg eingeschlagen. Hier werden die Listendefinitionen nicht »gelöscht« sondern durch Wertevorgabe vereinheitlicht:

  1. ul, ol, dl { margin: 0 0 1em 1em }
  2. li { margin-left: 1.5em; line-height: 1.5em; }

Natürlich gibt es auch gute Gründe, Listen radikaler zu formatieren – typischerweise ist das bei der grafischen Gestaltung von Navigationslisten der Fall. Doch genau hier kann man im Hinblick auf das herannahende HTML5 durchaus etwas subtiler vorgehen, und einen derartigen optischen Kahlschlag lokal beschränken, beispielsweise so:

  1. nav ul {
  2.   margin: 0;
  3.   list-style-type:none;
  4. }

Ähnlich zweifelhaft wie das Zurücksetzen der Listengestaltung ist der Sinn hinter folgenden CSS-Regeln bei Eric Meyer und YUI:

  1. b, strong { font-weight:normal; }
  2. i, em { font-style:normal; }

In schätzungsweise weit über 95% der Fälle (oder mehr) wird <strong> für den Fettdruck und <em> (abgeleitet von emphasize) zur visuellen Hervorhebung verwendet. Die überwältigende Mehrheit der Anwender wird also zwangsläufig die Standardvorgaben in den eigenen Stylesheets wiederherstellen müssen – und zwar in der Regel ohne jede Änderung gegenüber dem Default-Zustand.

Auch hier sei wieder auf die Argumentation von Eric Meyer verwiesen. Gleichermaßen hat YUI gute Gründe für diese Vorgaben, denn innerhalb großer Webportale, deren Inhalt aus vielen verschiedenen Quellen unterschiedlicher Herkunft und unterschiedlichen Alters stammt, ist es durchaus sinnvoll wirklich alles zu kontrollieren bzw. neuzudefinieren – ein Reset eben. Doch diese Randbedingungen treffen wohl kaum auf normale Webseiten zu, weshalb an dieser Stelle überlegt sein will, ob das unveränderte Übernehmen derartiger Vorgaben sinnvoll ist.

Zusammenfassung

Reset-Stylesheets sind ganz sicher nicht böse. Doch zumindest bergen die beiden hier diskutierten Vertreter doch einige zweifelhafte Vorteile und im Falle des Resets von Eric Meyer durch die Deaktivierung der :focus Styles auch ganz handfeste Nachteile, soweit sich der Anwender über diese nicht im Klaren ist und diese beachtet.

Für normale Webseiten sollte der Resetbaustein deshalb so schlank wie möglich ausfallen. Setzt nur zurück, was auch wirklich Sinn macht, z. B. Randabstände (margin, padding). Für so ziemlich alles andere ist es in der Regel sinnvoller, statt des Löschens jeglicher Defaultvorgaben, mit sinnvollen Standardwerten zu hantieren, wie bei den Listen beschrieben. Und auch dann sollte im Resetteil nur das Notwendigste stehen. Denn am sinnvollsten ist es immer noch, Doppeldefinitionen zu vermeiden. Verwendet also lieber vorkonfigurierte CSS-Bausteine, die Ihr nach Bedarf anpasst, um das gewünschte Erscheinungsbild zu erzielen.

Ach ja, noch ein Tipp zum Schluss. Kopiert den Inhalt des Reset-Baustein am Besten an den Beginn Eures ersten regulären Stylesheets und verschwendet nicht auch noch einen HTTP-Request. Das ist dieser Baustein wirklich nicht wert.

Gemälde: Pieter Bruegel der Ältere, Der Turmbau zu Babel, 1563. Museum Boijmans van Beuningen, Rotterdam.

Kommentare

David Maciejewski

David Maciejewski (Webkraut)
am 02.12.2010 - 09:53

Schön, dass du Reset-Stylesheets hinterfragst. Ich habe den Sinn eines Reset-Stylesheets noch nie verstanden. Alleine drei Definitionen für eine Fettung von strong (Default-Stylesheet, Reset und dann im eigenen Stylesheet) sind für mich zwei zu viel. Auch macht es die Wartbarkeit im Code schwieriger, wenn man im Browser-DOM mal nachschaut, welche Styles von was geerbt werden.
Ich war nie Fan von Reset-Stylesheets und hoffe, dass auch andere dank deines Artikels endlich mal begreifen, dass einiges davon einfach nur unsinnig ist.

Permanenter Link

Bastian Heist
am 02.12.2010 - 10:10

Ganz unsinnig ist es sicherlich nicht. Ich nutze den Reset von Eric Meyer idR als Vorlage und passe abhängig von der Seite das an, was ich (nicht) brauche.
Bezüglich der Formatierungen von strong und em gebe ich dir Recht. Reset-Stylesheets sind aber sehr brauchbar als Blaupause, damit man weiß dass man an alles gedacht hat.

Permanenter Link
Sylvia Egger

Sylvia Egger
am 02.12.2010 - 10:40

Es ist wichtig, Standards - oder hier Quasi-Standards, immer auch zu hinterfragen. Klar, die meisten Leute kopieren einfach, aber wie ja hier auch angeführt wird, viele Grid-Systeme haben den Reset schlicht mit bei.

Sieht man sich aktuell etwa das HTML 5 Boilerplate an, sind die hier genannten Probleme schon reduziert worden. Allerdingst ist das alles schon so reduziert, dass man das dann auch schon nicht mehr unter "Eric Meyer's Reset Reloaded" aufführen muss.

Allerdings wird dort auch ganz allgemein outline auf 0 gesetzt, das finde ich nicht wirklich notwendig. Browser Defaults sind mitunter im Einzelfall nervig, aber generell halte ich die für sinnvoll. Und ein Default für input und select mittig, ist dann schon eher speziell.

Also auch das Boilerplate wirkt ein wenig zusammengewürfelt.

Permanenter Link

Christoph Zillgens
am 02.12.2010 - 11:09

Ein guter Artikel, dem ich voll zustimmen kann. Ich verwende ein CSS-Reset meist aus Bequemlichkeit (weil's da ist) und hab auch schon mal den Fokus vergessen, neu zu definieren.
Von der generellen Gleichschaltung von :hover, :focus und :active halte ich allerdings nichts, erst recht nicht, nur weil der IE das braucht. Auch ist ein :hover meist dezenter (oder kann dezenter ausfallen), als einem :focus gut tun würde.

Mittlerweile reduziere ich die Reset-Regeln immer mehr, zum einen, weil eh die meisten Regeln wieder überschrieben werden und zum anderen, weil ich bei der Entwicklung gerne sehen möchte, was eine Überschrift, eine Liste, fett gestellt usw. ist, die Alles-auf-null-Ansicht hilft da nicht weiter.

Permanenter Link
Michael Grosch

Michael Grosch (Webkraut)
am 02.12.2010 - 12:00

Vielen Dank für die Inspiration. Ich kann mich den anderen Kommentaren nur anschließen. Das blinde Übernehmen von existierenden Lösungen in Form von Code-Schnipseln birgt jede Menge Risiken, derer man sich bewusst sein muss. CSS-Resets haben durchaus ihre Daseinsberechtigung, aber man sollte es nicht übertreiben und bestehende Lösungen immer hinterfragen, auch wenn Zeitdruck und Bequemlichkeit dazu verleiten, dies nicht zu tun.

Permanenter Link

Gunnar Bittersmann
am 02.12.2010 - 13:07

Ich möchte in diesem Zusammenhang auf Jens Meierts Artikel Conditional Comments, Resets, Frameworks verweisen.
Reset-Stylesheets […] werden selten jedoch richtig eingesetzt; die Ironie ist vielleicht, dass sie richtiger Gebrauch nahezu obsolet macht.

Permanenter Link
Dirk Jesse

Dirk Jesse (Autor)
am 02.12.2010 - 15:16

@Gunnar
Eine derart kompromislose Sichtweise wie in Jens Meierts Artikel halte für genauso wenig hilfreich. Redundanz ist nicht per Definition ein Problem. Wir bräuchten keine eine CSS-Kaskade, wenn deren Anwendung generell performancekritisch oder gar schädlich wäre.

Sinnvoll gewählte Standardvorgaben haben den Vorteil, dass sie nicht bei jedem Projekt neu geschrieben - sondern wiederverwendet werden können.

Jens Meinung zu Conditional Comments und Frameworks teile ich nicht, doch dazu habe ich schon vor längerer Zeit etwas geschrieben und will das hier nicht wieder aufkochen.

Ich spreche mich deshalb hier auch nicht gegen den Einsatz von Reset-Bausteine aus, nur gegen deren blinde Einsatzempfehlung bzw. unreflektierte Übernahme in eigene Projekte.

Permanenter Link
Michael van Laar

Michael van Laar (Webkraut)
am 02.12.2010 - 16:12

Schöner Artikel, und vor allem für mich sehr passend, weil ich gerade selbst dabei bin, mir die HTML5-Boilerplate-Vorlage für meine persönlichen Bedürfnisse anzupassen. Dazu gehört auch das Reset-Stylesheet.

Ich halte es mitlerweile eher so, dass ein Reset-Stylesheet nicht zwangsläufig ein komplettes Auf-Null-Setzen bedeuten muss. Sinnvoller ist es, genau die Ausgangslage zu schaffen, die vom jeweiligen Webdesigner erwartet wird. In einem Team muss man diese Erwartungen natürlich abstimmen.

Ich persönlich gestalte beispielsweise Überschriften nur noch recht selten mit fetten Schriftschnitten. Diese Vorliebe kommt natürlich direkt in mein Reset-Stylesheet, um mir das x-malige Definieren von font-weight: normal; zu ersparen. Wären hingegen 90 Prozent meiner Überschriften fett, würde ich sie mit Sicherheit bereits im Reset-Stylesheet fett definieren. Das ist dann zwar nicht mehr unbedingt ein echtes „Reset“-Stylesheet, aber solange es am Anfang der CSS-Datei (HTTP-Requests sparen) steht, ist das meiner Meinung nach auch für projektfremde Entwickler später leicht nachvollziehbar.

Wer Reset-Stylesheets ungefragt übernimmt, vergibt die Möglichkeit sich das Leben ein wenig leichter zu machen.

Permanenter Link

Dieter
am 02.12.2010 - 19:30

Herzlichen Dank für diesen hilfreichen Artikel.

Grundsätzlich setze ich auf YAML. Wenn ich mich richtig erinnere, habe ich in einem Fall jedoch ein WordPress-Theme mit einem CSS-Reset von Eric Meyer eingesetzt. Und schon lief ich in Resetfallen (vergessen focus zu definieren, ungeordnete Listen waren vom Kugelpunkt "befreit" und strong war nicht mehr standardmäßig mit Fettdruck versehen).

Mit dieser Erfahrung kann ich den Schlussfolgerungen in diesem Artikel nur beipflichten.

Permanenter Link

Moritz Gießmann
am 03.12.2010 - 12:48

Man sollte wissen was in seinem CSS-Reset steht und was es für Auswirkungen hat statt ihn einfach blind einzubinden. Deine Argumentation ist stichhaltig und ich habe genau die Teile, die hier kritisiert werden aus dem Eric Meyer Reset entfernt, weil eben nichts dagegen spricht, bei :focus keine Outline zu vergeben.

Permanenter Link
Gerrit van Aaken

Gerrit van Aaken (Webkraut)
am 04.12.2010 - 09:08

Hochinteressant! Ich denke, ich werde die nächste Version von Kickstart dahingehend ein wenig entschlacken! Ich habe ein paar wenige Punkte aus Eric Meyers Styles entfernt, aber da geht noch mehr ;-)

Permanenter Link

Rainer
am 04.12.2010 - 15:54

Guter Artikel! Aber ist es nicht so, dass die korrekte Reihenfolge hover-focus-active ist (und nicht focus-hover-active)?

Permanenter Link

Michael
am 06.12.2010 - 13:58

Wie man es von Dirk kennt ein kritischer Artikel zu einem scheinbar selbstverständlichen Thema. Schon sein Artikel "Alles valide oder was?" - ist schon etwas länger her - hat mir sehr gut gefallen.
Ein Beitrag von Peter Körner, bzw. das in seinem Beitrag eingebundene Video, geht auch auf diese Problematik ein, obwohl das Hauptthema "Warum Websites ohne Javascript zu funktionieren haben" ist. Aber wenn kein Javascript mehr da ist, dann bleibt oft nur HTML & CSS. Auch das Focus-Problem wird an Beispielen veranschaulicht.

Permanenter Link

Christoph
am 09.12.2010 - 13:27

Wirklich sehr genialer Artikel!

Ich war noch nie ein Fan von CSS-Resets, da ich wohl eher einer der Code-Optimierer bin.

Es macht keinen Sinn, 3-5 mal pro Seitenaufbau die Stylesheets des Browsers zu überlagern. Wofür gibt's denn !important?

Man sollte diese CSS-Resets wie schon erwähnt mit Vorsicht genießen. Nicht jeder hat nen Firefox, es gibt andere Wege, das Internet zu nutzen. Stichwort Crawler, WebKit-Mobile Devices und Screenreader.

Permanenter Link

rob
am 09.12.2010 - 14:03

Ist der Hammer schuld, wenn sich jemand damit auf den Finger haut?

Von einem Reset erwarte ich, dass alles auf Null gesetzt wird, alles andere ist ein Framework.

Permanenter Link

Patrick
am 11.12.2010 - 15:03

Schöner Artikel. Ich selbst nutze weder Reset-Bausteine noch ganze Frameworks.

Ich schreibe mein CSS prinzipiell von Hand und nutze lediglich

* {
margin:0;
padding:0;
}

Permanenter Link

Die Kommentare sind geschlossen.