Browser-Stylesheets: Grundlagen und Beispiele

Artikel vom 25. Februar 2008 (↻ 18. April 2021). ISSN 1614-3124, #36. Schwerpunkt:  (RSS-Feed).

Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development.

CSS handhabt die Standardformatierung von Dokumenten durch das Konzept der Browser- bzw. User-Agent-Stylesheets, einen Eckpfeiler der Kaskade. Dies sorgt dafĂĽr, dass ein Browser nicht einfach nur eine lange Zeile Text darstellt, wenn er mit einem HTML-Dokument gefĂĽttert wird, das ĂĽber keine Styling-Informationen verfĂĽgt, sondern es statt dessen mit einfacher Formatierung anzeigt.

Die Begriffe Browser-, User-Agent-, Standard- und Default-Stylesheet werden in diesem Artikel synonym verwendet.

Unformatierte Webseite.

Abbildung: HTML-Dokument mit Default-Darstellung in Firefox.

Spezifikation

Bereits CSS 1 sieht vor, dass »jeder User-Agent (UA, oftmals ein ›Webbrowser‹ oder ›Web-Client‹) ein Standard-Stylesheet besitzen wird, das Dokumente in vernünftiger – jedoch nüchterner – Weise darstellt«. CSS 2 spricht davon, dass »konforme User-Agents ein Standard-Stylesheet einsetzen müssen (oder sich so verhalten, als würden sie dies tun)« und dass »das Standard-Stylesheet eines User-Agents die Elemente der Dokumentensprache in einer Form darstellen sollte, die die allgemeinen Erwartungen an die Anzeige für diese Dokumentensprache erfüllt«. CSS 3 ist mit an Sicherheit grenzender Wahrscheinlichkeit derselben Ansicht.

Da die CSS-Spezifikationen also den Implementierungen überlassen, ob diese tatsächlich ein »echtes« Stylesheet für die Standarddarstellung einsetzen oder nicht, ist es nicht überraschend, dass man nicht im Installationsordner jedes Browsers ein solches Stylesheet vorfindet. Im Gegensatz zu beispielsweise Microsofts Internet Explorer und (soweit bekannt) Opera erleichtern jedoch Gecko-Browser wie Firefox oder Netscape Navigator (»html.css«) genauso wie Konqueror das Verständnis der von ihnen gewählten Standarddarstellung, indem sie »echte« Stylesheets an Bord haben.

User-Agent-Stylesheets

Es folgt eine [weiterhin gepflegte] Liste von Browser-Stylesheets, die sowohl unterschiedliche Browser als auch Jahre berĂĽcksichtigt und somit Unterschiede zwischen den Browsern und auch Entwicklungen aufzeigt. Aufgrund der Tatsache, dass Firebird, Firefox und Co. auf derselben Layout-Engine basieren, gibt es einige Ă„hnlichkeiten zwischen den Stylesheets, wenn nicht sogar Ăśbereinstimmungen.

Beachten Sie zum Vergleich auch ein 1998er »Basis-Stylesheet« sowie die Stylesheets, die vom W3C in den Spezifikationen von CSS 1, CSS 2, CSS 2.1 und CSS 2.2 vorgeschlagen werden:

Browser- und Reset-Stylesheets

Die genannten Beispiele – tatsächlich verwendete Stylesheets – sollen den Einblick in Browser-Stylesheets erleichtern. Kenntnis von Browser-Stylesheets trägt dazu bei, ein größeres Verständnis von CSS sowie bestimmten »Darstellungsphänomenen« zu erlangen.

Nichtsdestotrotz sollte dieses Wissen für andere Dinge als das Erstellen weiterer oder umfangreicherer Reset-Stylesheets eingesetzt werden. Unter der Voraussetzung, dass ein solches Stylesheet noch durch weitere CSS-Regeln zur Formatierung der jeweiligen Website ergänzt wird, sind »Reset«- oder »Undo«-Stylesheets selten notwendig und die in der Regel beobachtete Redundanz nicht wünschenswert. Aus eigener Erfahrung entspricht * { margin: 0; padding: 0; } dem einzig mal nützlichen und dann gleichzeitig gut zu merkenden »Pseudo-Reset«; Kritikern zum Trotz, die ausgerechnet dieser Methode Leistungseinbußen im µs-Bereich vorwerfen. Ein entsprechend ergänzender Artikel beleuchtet Reset-Stylesheets da jedoch genauer. [Noch am Zweifeln? Probieren Sie folgende Gegenprobe: Verwenden Sie Ihren bevorzugten Reset, dann entfernen Sie ihn temporär und schauen, was passiert.]

HierĂĽber tooten?

Ăśber mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Bücher für O’Reilly und Frontend Dogma. Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du eine Frage oder Anregung zu dem hast, was ich schreibe, sende bitte jederzeit eine Nachricht. Danke!