13 Kommentare

»Reset Reloaded«: Browserstyles zurücksetzen

Über Eric Meyers jüngst veröffentlichten Ansatz, die Basisstyles des Browsers zurückzusetzen, um eine einheitliche Umgebung zu schaffen.

Browser tragen bekanntlich ein internes Basisstylesheet mit sich rum, das auf jedes Dokument angewendet wird, um eine Grundstruktur zu erreichen. Das ist sinnvoll und sorgt dafür, dass auch Dokumente ohne ein eigenes Stylesheet strukturiert sind: Überschriften werden hervorgehoben, Textabsätze haben einen Abstand nach unten, Listen werden eingerückt, etc.

Bei der Umsetzung von Websites geraten Webautoren jedoch gerne mal in Konflikt mit den Basisstyles des Browsers, wenn sie es verpassen, die Browservorgaben durch eigene Angaben zu überschreiben. Das, was bei der Kontrolle auf dem eigenen System dann wie gewollt aussieht, kann beim Nutzer unter anderen Bedingungen verfälscht werden. Ein typisches – wenn auch seltenes – Beispiel dafür ist, dass verpasst wird, eine Hintergrundfarbe für den body zu definieren, weil der Webautor von einem weißen Hintergrund ausgeht. Im Regelfall wird der Benutzer dann auch einen weißen Hintergrund erhalten, weil es die Standardvorgabe nahezu jedes Browsers ist, jedoch lässt sich der Farbwert meistens in den Browsereinstellungen verändern, so dass es durchaus vorkommen kann, dass aus Weiß ein freundliches Pink oder ein himmelblaues Grün wird.

Aus Sicht des Webautors kann es deshalb sinnvoll sein, Browservorgaben zu Beginn seiner Stylesheets zurückzusetzen, um danach unter (hoffentlich) gleichen Bedingungen für alle Browser/Systeme individuelle Werte einzusetzen.

Aber wie so oft: die Betonung liegt auf »es kann sinnvoll« sein. Denn im Gegenzug zu der Situation, es ohne ein vorheriges Zurücksetzen der Browserstyles zu verpassen, bestimmte Vorgaben mit eigenen Styles zu überschreiben und damit u.U. ungewollte Ergebnisse hervorzurufen, kann es bei der eben erwähnten Methode des Zurücksetzens passieren, dass verpasst wird, allen Elementen einen neuen Style zuzuweisen. Der Browser würde dann mit »Nullwerten« für diejenigen Elemente arbeiten, die nicht explizit vom Webautor angefasst wurden, und das kann z.B. dann zum Problem werden, wenn während der Entwicklung der Website noch nicht bekannt ist, welche Inhalte samt ihrer Elemente zur Auszeichnung später verwendet werden.

Wer als Webautor also konsequent alle Browserstyles zurücksetzt, müsste danach im Gegenzug genauso konsequent alle (vorkommenden) Elemente neu definieren, um keine Überraschungen zu erleben, wenn auf der Website neue Inhalte eingebracht werden — etwa vom Redakteur innerhalb des Content Management Systems oder vom Leser eines Blogs, der einen Kommentar hinterlässt.

Ich selbst bin eher kritisch gegenüber dem Reset, also dem Zurücksetzen der Browserstyles, und arbeite lieber mit der Umgebung, die mir vom Browser zur Verfügung gestellt wird. Die Styleangaben, die ich als Webautor verwende, sind aus dieser Sicht heraus lediglich ergänzende Styles. Aber natürlich sollten sie detailiert genug sein, um ein Ausgabeergebnis zu erhalten, das den Anforderungen entspricht und im Wesentlichen systemübergreifend einheitlich ist.

Nach langem Gerede nun noch der nützliche Hinweis an alle diejenigen Webautoren, die nach der Erstmal-alles-Zurücksetzen-Methode arbeiten: Eric Meyer hat heute seine vermutlich finale Variante vorgestellt, diese Aufgabe zu erledigen:

I have what I’m willing to call the final version of my take on the topic of reset styles.

Eric Meyer: Reset Reloaded

Der IE/Win benötigt dabei wie üblich eine Sonderbehandlung, auf dessen verschiedene Ansätze Eric ebenfalls hinweist, sie jedoch als nicht zwingend notwendig betrachtet.

Weitere Artikel zum Thema

(Der Artikel wurde parallel auch im Blog des Autors veröffentlicht.)

eingeordnet unter:

veröffentlicht von Schuer

Kommentieren ist für diesen Artikel deaktiviert.

  1. Naja, ich persönlich setze standardmäßig lediglich per Wildcard (*) alle margins und paddings auf 0. Was für einen Sinn sollte es auch machen, zum Beispiel <sub>s zuerst auf die Baseline zu bringen und später wieder nach unten? Ist doch nun wirklich unnötige Zeitverschwendung, oder?

  2. Ich selbst bin eher kritisch gegenüber dem Reset, also dem Zurücksetzen der Browserstyles, und arbeite lieber mit der Umgebung, die mir vom Browser zur Verfügung gestellt wird. Die Styleangaben, die ich als Webautor verwende, sind aus dieser Sicht heraus lediglich ergänzende Styles.

    Ich denke, hier irrst Du. Denn warum soll ich eine Styleidee der Browserhersteller als gegeben ansehen? Eigentlich ist deren Ansinnen, jedem Element ein Aussheen zu geben, kontraproduktiv und am Ziel vorbei. Der Webautor sollte die Kontrolle über das Aussehen seiner Seite haben, nicht Mozilla, Opera oder Microsoft. Deshalb finde ich den globalen Reset auch wichtig und gut. Jeder hat da sein eigenes Vorgehen. Ich wundere mich nur, daß das Ganze auf einmal wie eine Neuerfindung besprochen wird.

  3. Sebastian, bei der Wildcard-Variante stört mich ein bisschen, dass auch Formularelemente auf Null gesetzt werden und man sie danach nicht wieder in den Originalzustand bekommt (vor allem aufgrund unterschiedlicher paddings), falls gewünscht.

    Jens, es geht doch nicht darum, den Vorstellungen von Browserherstellern zu folgen (oder folgen zu müssen), sondern darum, dem Benutzer ein sinnvoll strukturiertes Dokument anzubieten. Ein Reset ist meiner Meinung nach deshalb in gewisser Weise gefährlich, weil man damit sämtliche (visuelle) Struktur beseitigt. Man muss demnach bei der Auszeichnung wirklich konsequent daran denken, alle vorkommenden Elemente zu erfassen. Denn sonst ist man ja in einer ähnlichen Situation wie die, die du anprangerst: der Style eines Elements ist nicht der, den man erreichen wollte. Stattdessen ist er gleich Null, und das hielte ich dann für schlimmer, als wenn er den Standardwert des Browsers einnähme, der allein diese Absicht hat, eine sinnvolle Basisstruktur zu erreichen.
    Aber natürlich hat jeder Webautor eine andere Vorliebe für seinen Workflow. Und es soll auch hier nicht als »Neuerfindung« besprochen werden, sondern hat zwei ganz klar Absichten: Grundinformation für angehende Webautoren (wir wollen hier schließlich nicht nur elitäres Geektum verbreiten) und Hinweis auf den nach eigener Aussage finalen Entwurf eines echten Webprofis, der sich lang und breit mit dem Thema befasst hat.

  4. Ich setze auch die margins und paddings mit dem *-Selektor auf Null, entferne zusätzlich border und setze Font-weight und -style auf normal sowie -size auf 100%.

    Die Gefahr, etwas zu übersehen, ist recht gering, weil ich alle Seiten, die ich schreibe, auch anschaue. Das erfordert Aufmerksamkeit und mehr Definitionsarbeit, aber gibt bessere Kontrolle über das Aussehen.

    Bei mehreren Redakteuren sieht das bestimmt anders aus.

  5. Elmar, wenn du den border für alle Elemente entfernst, bedeutet das aber zwangsläufig, dass du keine standardisierten Formularelemente mehr verwenden kannst. Denn die Standardborder lassen sich doch manuell nicht mehr einheitlich hinzufügen, sobald sie einmal entfernt wurden. Oder irre ich? Windows benutzt doch beispielsweise schon zwei unterschiedliche Bordertypen für das Grüne-Wiese-Klicki-Bunti-Theme und das Classic-Theme..

  6. Ich halte ein Reset der Browserstyles für sehr sinnvoll, denn es ist der einzige Weg, um ansatzweise Kontrolle über die Darstellung des Content gewinnen. Gerade über diesen Weg werden die eigenen Stylesheets meiner Meinung nach logischer und einfacher, da innerhalb der anschließend folgenden Deklarationen alle Browser gleich behandelt werden können.

    Allerdings stimme ich Dir insofern zu, dass man grundsätzlich wissen sollte, was man da eigentlich macht. Ein Reset sollte nicht dazu führen, dass ein Dokument unübersichtlich wird. Daher ist ein Reset auch nicht mit der üblichen Zeile * {margin:0; padding: 0} erledigt.

    Gerade Listen schreien geradezu nach einer einheitlichen Vorformatierung, da hier die fast jeder Browser andere Vorgaben macht. Und da sehe ich auch eine der Schwächen von Eric Meyers Vorschlag.

  7. > dass aus Weiß ein freundliches Pink oder ein himmelblaues Grün wird. Wie sieht denn bitte himmelblaues Grün aus?

  8. Dirk, falls du meinst, dass die Texteingabefelder und Buttons etc. nicht so aussehen wie in vielen Windows- (Mac-, Linux[KDE, Gnome, fvwm, ...]-) Anwendungen, hast du recht.

    Ich glaube nicht, dass jemand ein Problem hat, diese als solche zu erkennen, wenn sie anders formatiert sind (was nicht für jede x-beliebige Formatierung zutrifft). Die Rechner, die Formulare sind, sowie die Suche sind die meist aufgerufenen URIs auf meinem Site, obwohl sie, abgesehen von der Suche, kaum mehr als 1% des Contents sind.

    Die Frage ist: Hat wirklich jemand Probleme, Texteingabefelder (Buttons, Auswahllisten, ...) zu erkennen, wenn sie nicht aussehen wie unter vielen Anwendungen des Betriebssystems? Wurde das empirisch untersucht? Kommen solche Anwender wirklich besser zurecht, wenn die Eingabefelder anders aussehen (wie "gewohnt")? Woher will ich wissen, dass der Browser nicht eigene Vorstellungen hat, wie er diese Elemente darstellt?

    Jedenfalls finde ich die nicht selbst formatierten Formularfelder recht "klobig" (nicht "hübsch").

  9. Da auch ich den Formularfelder immer neue Stile verpasse, habe ich eigentlich kein Problem damit. Zumal man doch recht schnell raus hat, wie sich die paddings etc. bei den diversen Formularelementen verhalten bzw. wie sie zu behandeln sind.

  10. Alex, himmelblau ist eher eine Einstellung als eine Farbe. Türkis klänge irgendwie so negativ ;)

    Elmar, es gibt unterschiedliche Haltungen zu der Frage, ob Formulare in ihrer Form als Systemelemente unangetastet bleiben sollten, oder ob man als Webautor im Sinne einer konsistenten Gestaltung eingreifen darf/soll. Safari ist z.B. aktuell immer noch riguros genug, auf seinen Human Interface Guidelines zu beharren und Styleangaben von außen weitgehend zu ignoreren. Angeblich soll das Verhalten in den kommenden Versionen gelockert werden, was vermuten lässt, dass sie von ihrem Standpunkt abweichen, Formularelemente allein dem System zuzuschreiben.
    Denn auf der anderen Seite hat die Fraktion derjenigen, die Formularelemente nicht dem System, sondern der Website zuschreiben, ein paar gute Argumente zur Hand, wenn sie sagen, dass man die Erkennbarkeit und die Aufmerksamkeit des Benutzers besser lenken könne, wenn angepasste Styleangaben aufgenommen würden — beispielhaft durch einen prominenten Submitbutton oder ein mittels auffälliger Rahmen hervorgebobenes Eingabefeld, die Safari beide nicht in der Form darstellen würde.
    Es gibt also keine »authorisierte« Meinung zu dem Thema, aber wichtig zu wissen war in diesem Zusammenhang, dass ein Reset aller Borders - den du angemerkt hattest - dazu führen kann, dass man Systemelementen ihren Basisstyle nimmt und diesen später nicht mehr oder nur schwerlich rekonstruieren kann, sollte die Notwendigkeit bestehen. Und auf einer sehr formularlastigen Website (Suchangebote, Datenbankkram, etc) kann das durchaus so sein.

  11. Ich würde keine Reset-Styles verwenden, meiner Meinung nach helfen sie zwar sicher ein wenig, aber letztendlich hängt ja auch viel vom Betriebssystem ab oder? Wenn ich z. B. meine Seiten, in denen ich genau die Schrift bestimmt habe, einmal in Firefox/Windows und einmal in Firefox/MacOS ansehe, ist das Ergebnis trotzdem ganz unterschiedlich.

    Vielleicht hätte ich auch einfach die Reset-Styles nehmen sollen und dann hätte alles gleich ausgesehen, aber das ist halt jetzt mal eine recht subjektive Meinung ;-). Die Fonts auf Mac und Windows sind doch alle ein wenig anders.

    Kann auch sein dass der Reset nur bei den Schriften nichts nützt und sonst sehr praktisch ist, ich bin da aber eher skeptisch. Den einzigen Reset den ich nutze ist auch das zurücksetzen der paddings und margins aller Elemente.

  12. Hier noch eine weiter höchst subjektive Meinung:

    1. Ich gehe davon aus, dass sich die Browserentwickler bei ihrem Standardstyle etwas gedacht haben, sind ja schliesslich keine Anfänger. Deshalb halte ich ein Reset nicht für sinnvoll.

    2. Natürlich soll man jedes Element, das man verwendet, auch im Stylesheet umfassend formatieren. Dann sollte eigentlich nix passieren.

    3. Redaktionssysteme sind doch gerade dazu da, dass die Redakteure nicht an Design und Layout (weder am HTML noch am CSS) rumfummeln, die Redakteure sollen den WYSIWYG-Editor nutzen. Wenn der WYSIWYG-Editor Elemente zum "markieren und draufklicken" anbietet, muss ich als Webdesigner natürlich auch diese Elemente im Stylesheet formatieren, nicht nur die, die ich beim Design und Layout selbst verwendet habe.

    4. Meine sämtlichen Bekannten und Verwandten sind, wenn überhaupt, reine User. Die holen mich immer wieder ganz schnell auf den Boden der Tatsachen zurück. Die allermeisten unserer Besucher interessieren sich nicht die Bohne für unser geniales Design. Die suchen Information, und diese soll leicht auffindbar und erfassbar sein. Deshalb soll mein Formular auch genauso aussehen, wie die es erwarten und von ihrem Browser gewöhnt sind. Und genau deshalb werde ich den Teufel nicht das Aussehen der Formularfelder oder der Formular-Buttons verändern, indem ich das Standardstyle komplett ausser Kraft setze.

    An Jens: Das Internet gehört niemandem, nicht den Profis und nicht den Amateuren. Es soll durchaus auch Autoren geben, die dem Design keine Priorität geben und das dem Browser überlassen. Vielleicht, weil es ihnen egal ist, vielleicht, weil sie keine Lust haben, sich mit CSS zu befassen. Das soll übrigens auch eine gute Methode sein, eine Seite allen Ausgabemedien (z. B. Handys) zugänglich zu machen, reines HTML abliefern. Genau dafür sind die Standardstyles da, damit man eine Überschrift vom Text unterscheiden kann, Absätze und eine Liste erkennt, auch ohne Autoren-Stylesheet.

  13. Hallo zusammen!

    Man sollte sich meiner Meinung nach erst einmal den Ursprung und die Ursachen für die hier diskutierte Problematik angucken. Lange vor der Einführung von CSS gab es bereits gewisse "Basis Formatierungen" für die einzelnen HTML-Tags. Und schon damals war es dem jeweiligen Browser überlassen, wie diese aussahen (bspw. die Überschriften-Tags h1-6).

    Mit der Einführung von CSS hat sich daran im Prinzip auch nichts geändert. Und genau hier fangen die Probleme und Versäumnisse an.

    Natürlich ist es sinnvoll, dass es gewisse Default-Werte ("Basis Styles") gibt, da man ansonsten jeder HTML-Datei zwingend eine CSS-Datei beipacken müsste. Aber warum ist man nicht hingegangen, und hat die CSS Default-Werte für die einzelnen HTML-Tags mit festgelegt (standardisiert), anstatt es weiter dem jeweiligen Browser zu überlassen?

    Und noch problematischer wird es, wenn die verschiedenen Browser auch noch unterschiedliche CSS-Eigenschaften auf ein und dasselbe HTML-Element anwenden (bspw. bei Listen, margin bzw. padding)! Gibt ein Autor nun seinem Element z.B. ein Padding mit, erreicht in dem einen Browser, was er beabsichtigt. In einem anderen hingegen überschreibt er die Standard-Einstellung und das Ergebnis sieht aller Wahrscheinlichkeit nach nicht mehr so aus, wie es soll.

    In meinen Augen liegt hier also ganz klar ein Versäumnis seitens des W3Cs vor. Ich kann doch nicht einerseits hingehen, und eine Standardisierung des Webs erreichen wollen, und andererseits dann viele Dinge doch wieder den Browsern überlassen. Das ist ja so, als wenn es jedem Grafikprogramm überlassen wäre, wie es transparente Bereiche in einem bestimmten Grafikformat erzeugen/ darstellen soll. Das Resultat kann man sich wohl vorstellen.

    Wären die Basis Styles einheitlich in allen Browsern, würde sich diese Diskussion hier erübrigen. Dass sie es nicht sind, ist gerade für Anfänger & Einsteiger eine weitere Hürde, da sie von den Unterschieden in den jeweiligen Browsern quasi "überrascht" werden, bzw. diese gar nicht kennen und nicht wissen, wo die jeweiligen Unterschiede liegen.

    Ich denke, letztlich ist immer abzuwägen, was für die jeweilige Seite erforderlich ist. Kann ich mit den Unterschieden in den einzelnen Browsern leben, oder möchte ich eine möglichst einheitliche Darstellung quer durch alle Browser erreichen?

    Meine Empfehlung an alle "Ungeübten/ Unerfahrenen" ist jedenfalls erstmal mit den Standardvorgaben der Browser zu leben und auf globale Resets zu verzichten. Erfahrenere Anwender können sicher von Fall zu Fall selbst entscheiden, was für sie angebrachter ist: kein Reset (also nur bloßes Überschreiben der Standardeinstellungen bei Bedarf), Teil-Reset (* {margin:0; padding: 0}), oder bspw. Eric Meyers "Total-Reset".

    Ach übrigens (wo wir gerade beim Thema sind): Kennt jemand eine vernünftige Übersicht über die Basisstylesheets der gängigen und aktuellen Browser? Ich nämlich bislang noch nicht.

    Im Übrigen ist die Verwendung des Begriffs "Reset" in meinen Augen hier eigentlich falsch. Unter einem Reset versteht man ja gemeinhin eher das Zurücksetzen eines Systems (in diesem Fall eines Browsers) auf seine Grund-/ Ausgangswerte. Aber genau diese möchte man hier ja ändern, bzw. gleich machen.

    Gruß Gunther