Jens Oliver Meiert

Browser-Stylesheets: Grundlagen und Beispiele

Artikel vom 25. Februar 2008 (↻ 20. August 2014). ISSN 1614-3124, #36.

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

CSS kümmert sich um die Standardformatierung von Dokumenten durch das Konzept der Browser- beziehungsweise User-Agent-Stylesheets, einen Eckpfeiler der Kaskade. Dieses sorgt dafür, dass ein Browser nicht einfach nur eine lange Zeile Text darstellt, wenn er mit einem HTML-Dokument gefüttert wird, dem keine Styling-Informationen mitgegeben wurden, 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 ›Webclient‹) 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.

Beispieldateien

Es folgt eine 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, ergeben sich einige Ähnlichkeiten, wenn nicht sogar Übereinstimmungen.

Beachten Sie zum Vergleich auch die exemplarischen Stylesheets, die vom W3C in den Spezifikationen von CSS 1, CSS 2 und CSS 2.1 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 zu beobachtende Redundanz wenig 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.

Über den Autor

Jens Oliver Meiert, Foto vom 27. Juli 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Er experimentiert mit Kunst und Abenteuer. Hier auf meiert.com teilt und verallgemeinert und übertreibt er einige seiner Gedanken und Erfahrungen.

Mehr Jens gibt es im Archiv und bei Amazon. Wenn Sie eine Frage oder ein Anliegen (oder eine Empfehlung) zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → Browser-Stylesheets: Grundlagen und Beispiele

Stand: 20. August 2014.

»Sei fair, sei fleißig, sei nüchtern und sei glücklich