Pinselführung
Moderne Browser verfügen über zwei Darstellungsmodi: Der Quirks Mode stellt ein Dokument dar, wie ältere Browser es täten; der Standards Mode zeigt es gemäß den W3C-Empfehlungen und -Spezifikationen an. Entscheidend dafür, in welchen Modus ein Browser schaltet, ist die Angabe des Dokumententyps.
- Michael Jendryschik
Aktuelle Versionen von Internet Explorer, Opera, Safari und Mozilla sowie der auf Mozilla basierenden Browser wie Netscapes Navigator, Camino oder Firebird haben die schon seit 1998 vorliegende CSS2-Spezifikation endlich in größerem Umfang implementiert als ihre Vorgänger. Darüber hinaus haben die Entwickler viele Fehler der älteren Versionen korrigiert. Standardkonform geschriebene Webseiten stellen Browser heute somit wesentlich besser dar als vor Jahren, und umgekehrt zeigen sie an den Standards vorbei geschriebene Webseiten teilweise fehlerhaft an. Diese Entwicklung hin zu sauberem und validem (X)HTML und CSS ist allgemein zu begrüßen, aber sie birgt einige Fallstricke.
Häufig: mangelhafte CSS-Umsetzung
Viele Webseiten sind noch für vor einigen Jahren aktuelle und heute weiterhin häufig verwendete Browser wie die 4er-Versionen des Navigator oder die 4er- und 5er-Versionen des Internet Explorer geschrieben. Diese Browser zeigen jedoch an vielen Stellen eine mangelhafte und nicht standardkonforme CSS-Umsetzung. In diesem Zusammenhang ist die fehlerhafte Implementierung des CSS-Box-Modells in früheren Versionen des IE für Windows zu nennen oder die Tatsache, dass CSS-Deklarationen nicht in Tabellenzellen hinein vererbt wurden. In vielen Fällen haben Autoren diese Schwierigkeiten durch proprietäre (nicht standardkonforme) Erweiterungen umschifft, entweder absichtlich oder unwissentlich. Einer der bekannten Workarounds dieser Art ist die Angabe folgender Attribute im Start-Tag von body, um den Rand zwischen Browserfenster und Seiteninhalt zu entfernen:
<body marginwidth="0" leftmargin="0" marginheight="0" topmargin="0">
Ganz gleich, ob Entwickler sich der Fehler als solcher bewusst waren, es blieb ihnen nichts anderes übrig, als Webseiten entgegen den Standards auf diese Browser hin zu konzipieren, um das gewünschte Layout umzusetzen. Das führte dazu, dass Webseiten auf damals aktuellen Browsern gut aussahen; auf heutigen Browsern jedoch würden sie zwar W3C-konform, aber falsch im Sinne der ursprünglichen Layoutvorstellungen des Designers dargestellt. Listing 1 zeigt ein einfaches HTML-Dokument, das lediglich ein p mit ein paar Stilvorgaben enthält. Ein Stolperstein ist die gleichzeitige Verwendung von
width: 100%;
mit einem Padding ungleich 0. Abbildung 1 zeigt, wie das Dokument in älteren Versionen des Internet Explorer aussehen würde, Abbildung 2 zeigt die Darstellung im IE6. Darin ist das Element breiter als das Anzeigefenster. Es wird somit ein horizontaler Rollbalken angeboten, was der Usability und dem Layout einer Website in den meisten Fällen schadet. Der Grund für diese Darstellung liegt in der erwähnten fehlerhaften Interpretation des CSS-Box-Modells.
Listing 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang="de">
<head>
<title>Box Model Bug</title>
<style type="text/css">
p { background-color: #99d;
padding: 1em; width: 100%; }
</style>
</head>
<body>
<p>So breit wie das Fenster oder breiter?</p>
</body>
</html
Zur Erklärung: Blockelemente wie p, blockquote oder div erzeugen eine Box (die so genannte Principal Block Box), die wiederum weitere Boxen enthält. Das CSS-Box-Modell beschreibt die rechteckigen Boxen, die für Blockelemente generiert werden. Sie lassen sich durch CSS-Eigenschaften kontrollieren. Jede Block-Box hat neben dem Content-Bereich (der „Content-Box“) - von innen nach außen betrachtet - einen Padding-, einen Border- und einen Margin-Bereich. Jeder dieser drei Bereiche lässt sich in oben, rechts, unten und links aufteilen. Die CSS-Eigenschaften width und height geben die Breite beziehungsweise Höhe des Content-Bereichs an. In früheren Versionen des Internet Explorer für Windows jedoch entsprechen width und height der Breite und Höhe inklusive Padding- und Border-Bereich. Abbildung 3 veranschaulicht den Unterschied.
Listing 2 zeigt ein ähnliches HTML-Dokument wie Listing 1, allerdings mit anderen Stilvorgaben: eine Schriftgröße ohne Einheit und eine Schriftfarbe ohne vorangestelltes „#“. Fehlertolerante Browser interpretieren diese Angaben wie vom Autor gewünscht, standardgemäße Browser hingegen nicht. Der Unterschied ist in den Abbildungen 4 und 5 zu sehen.
Listing 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang="de">
<head>
<title>Fehlertoleranz im Quirk Mode</title>
<style type="text/css">
p { font-size: 30; color: f00; }
</style>
</head>
<body>
<p>Groß und rot?</p>
</body>
</html
Die Browserhersteller mussten damit rechnen, dass niemand aktuelle Browserversionen verwenden würde, wenn alte Webseiten darin nicht mehr wie gewohnt aussäen. Daher wurden zwei unterschiedliche Darstellungsarten eingeführt: Der erste Modus, bekannt als Quirks oder Compatible Mode, stellt eine Webseite wie alte, inkompatible Browser dar; der zweite Modus, bekannt als Standards oder Compliant Mode, bemüht sich um eine Darstellung gemäß den W3C-Spezifikationen. Darüber hinaus unterteilen einige Mozilla-Versionen den Letzteren in einen Almost Standard und einen Full Standard Mode. Die technischen Details dieser Umsetzung sind in den Browserdokumentationen zu finden.
Microsofts und die Mozilla-Entwickler haben sich entschieden, über die Dokumenttypdeklaration (kurz: Doctype) zu differenzieren, welchen Rendering Mode sie für eine einzelne Seite verwenden. Andere Browser zogen nach. Die Unterscheidung funktioniert in allen Fällen nach folgendem Schema: Falls der Doctype vom Typ A ist, verwende den Standard Mode. Wenn er vom Typ B ist oder kein Doctype vorhanden ist, verwende den Quirks Mode. Dieses Verfahren wird Doctype Switching oder Doctype Sniffing genannt [1].
Welcher DTD ein Dokument entspricht
Ein gültiges HTML- oder XHTML-Dokument gibt an, zu welcher Sprachversion es konform ist. Der Doctype benennt die Dokumenttypdefinition (DTD), der das Dokument entspricht. Er leitet es ein und verrät somit der verarbeitenden Software (Browser, Validator), um welche HTML- oder XHTML-Version es sich handelt. HTML 4 und XHTML 1.0 bieten drei unterschiedliche Sprachversionen und somit drei unterschiedliche DTDs an: strict, transitional und frameset. Die strikte DTD beinhaltet alle Elemente und Attribute, die nicht missbilligt (deprecated) sind und nicht in Frameset-Dokumenten auftauchen. Transitional beinhaltet alle Elemente und Attribute aus der strikten DTD plus die missbilligten Elemente und Attribute (vor allem die zur visuellen Präsentation). Die Frameset-DTD enthält alle Elemente und Attribute aus der Transitional-DTD plus Frames. Ein Doctype für (X)HTML-Dokumente ist folgendermaßen aufgebaut:
<!DOCTYPE html PUBLIC "FPI" "SI">
Der Formal Public Identifier (FPI) gibt an, welcher DTD das Dokument entspricht. Der System Identifier (SI) enthält den URI der DTD. XHTML-Dokumenten als XML-Dokumenttyp kann noch eine XML-Deklaration vorstehen, die die verwendete XML-Version spezifiziert sowie weitere Angaben wie über den verwendeten Zeichensatz enthalten kann.
| Wie Browser auf Doctypes reagieren | ||||||
| Doctype |
Mozilla 0.6 bis 0.9.4, Netscape 6.x |
Mozilla 0.9.5 bis 1.0 |
Mozilla ab 1.0.1, Safari 0.9 und 1.0, Netscape 7.x |
Internet Explorer 5 für Mac |
Internet Explorer 6 für Windows, Opera 7.0x |
Opera ab 7.1 |
| Kein DOCTYPE angegeben | Q | Q | Q | Q | Q | Q |
| Unbekannter DOCTYPE | Q | S | S | S | S | S |
| Unbekannter Doctype + URI | Q | S | S | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" "http://www.w3.org/TR/REC-html32/html32.dtd"> | Q | Q | Q | Q | Q | Q |
| HTML 4.0 | ||||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> | S | S | S | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> | S | S | S | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> | Q | Q | Q | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> | Q | Q | Q | S | S | S |
| HTML 4.01 | ||||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | S | S | S | Q | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | S | S | S | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | S | S | A | S | S | S |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | S | S | A | S | S | S |
| XHTML 1.0 | ||||||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | S | S | S | S | S | S |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | S | S | A | S | S | S |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | S | S | A | S | S | S |
| <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | S | S | S | S | Q | S |
| <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | S | S | S | S | Q | S |
| XHTML 1.1 | ||||||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | S | S | S | S | S | S |
| <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | S | S | S | S | Q | S |
| Erläuterungen: S = Standards Mode; A = Almost Standards Mode; Q = Quirks Mode | ||||||
Oben stehende Tabelle führt gültige W3C-Doctypes von HTML 2.0 bis XHTML 1.1 (gegebenenfalls mit und ohne XML-Deklaration) auf und gibt an, welcher Browser wann in welchen Modus schaltet. Daraus lassen sich unter anderem folgende Regelmäßigkeiten ablesen.
Standard oder Quirks Mode
IE6 für Windows schaltet in den Quirks Mode, wenn kein Doctype angegeben oder auf eine HTML-Version vor 4.0 verwiesen wird. Ebenso bei HTML 4 und HTML 4.01 bei Angabe der Transitional- und Frameset-DTD, wenn kein System Identifier vorhanden ist. In allen anderen Fällen, beispielsweise bei allen XHTML-Doctypes, schaltet IE6 in den Standard Mode. Leider hat dieser Browser einen Bug und erwartet den Doctype immer in der ersten Zeile des Dokuments. Wenn eine XML-Deklaration ein XHTML-Dokument einleitet, erfolgt das Rendering im Quirks Mode. Da die XML-Deklaration bei XHTML-Dokumenten nicht vorgeschrieben ist, wird sie häufig weggelassen. Lance Silvers CSS-Artikel [2] führt eine Tabelle auf und dokumentiert die Unterschiede zwischen Quirks und Standard Mode. IE5 für Mac entspricht dem IE6 für Windows mit zwei Ausnahmen: Bei Angabe von HTML 4 beziehungsweise HTML 4.01 Strict ohne Systembezeichner schaltet er in den Quirks Mode. Es gibt keinen XML-Declaration-Bug.
Opera 7.0x verhält sich genauso wie IE6 für Windows. In den Versionen ab 7.1 haben die Norweger den XML-Declaration-Bug behoben. Operas Website führt die Unterschiede zwischen beiden Modi auf [3].
Komplizierter ist es bei Mozilla und allen auf der Gecko-Engine basierenden Browsern. Die aktuellen Versionen unterscheiden nur bei Dokumenten, die mit dem MIME-Type text/html ausgeliefert werden, zwischen verschiedenen Modi. Mit text/xml, application/xhtml+xml oder mit einem anderen XML-MIME-Type ausgelieferte Dokumente stellen sie immer im Standards Mode dar. Weitere Informationen und eine ausführliche Übersicht, wann Mozilla in den Quirks und wann in den Full oder Almost Standards Mode schaltet, finden sich unter [4] und [5].
Fazit
Auf Grund der Fehler, die Browserhersteller in der Vergangenheit gemacht haben, war eine Einführung unterschiedlicher Darstellungsmodi unumgänglich, obwohl dadurch der Schritt hin zu standardkonformen Dokumenten für heute verbaut zu sein scheint (wozu sollte man die alten Fehler beheben, wenn es ausreicht, Browser im Quirks Mode laufen zu lassen?). Bis vor kurzem war die Angabe eines Doctype den Browsern vollkommen gleichgültig, und noch heute verwenden sie ihn nicht, um das Dokument nach SGML oder XML zu validieren. Ob es sinnvoll ist, gerade über Art und Notation des verwendeten Doctypes den Darstellungsmodus für ein Dokument festzulegen, ist umstritten. Schließlich ist diese Art der Differenzierung alles andere als intuitiv.
Auf den zweiten Blick ist die Vorgehensweise ebenfalls fraglich. Die HTML 4-Spezifikation des W3C etwa ist ein standardkonformes Dokument, dennoch wird es nur im Quirks Mode dargestellt. Man kann durchaus bezweifeln, dass die Autoren dieser Website damit gerechnet haben, dass die Darstellung dieses Dokuments in einem Modus erfolgt, der die standardkonforme Darstellung umgeht und dessen Rendering Engine mit voller Absicht an der einen oder anderen Stelle fehlerhaft ist. Webautoren stehen nun vor der Frage, was der Doctype eines (X)HTML-Dokuments mit dessen Formatierung über CSS zu tun hat. Für viele ist jetzt einfach nur ein weiterer Faktor hinzugekommen, mit dem man sich beschäftigen und herumschlagen muss. Dabei hätten sich andere Wege angeboten, beispielsweise ein META-Element wie
<meta name="rendering mode" content="quirks" />
oder eine Form von „strukturierten Kommentaren“, wie sie in der Vergangenheit für derartige Workarounds schon zum Einsatz gekommen sind.
Michael Jendryschik
studiert Informatik in Dortmund und beschäftigt sich seit Jahren mit den Webstandards des W3C.
Literatur
[1] Matthias Gutfeldt; Doctype switching and standards compliance: An overview; gutfeldt.ch/matthias/articles/doctypeswitch.html
[2] Lance Silver; CSS Enhancements in Internet Explorer 6; msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
[3] The Opera 7 DOCTYPE Switches; www.opera.com/docs/specs/doctype/
[4] David Baron; Mozilla’s quirks mode; www.mozilla.org/docs/web-developer/quirks/
[5] Eric A. Meyer; Gecko’s „Almost Standards“ Mode; devedge.netscape.com/viewsource/2002/almost-standards/;
deutsche Übersetzung: www.ltrebing.de/interessen/www/devedge-almost-standards/
[6] Bert Bos; What is a good Standard? - An essay on W3C’s design principles; www.w3.org/People/Bos/DesignGuide/introduction;
deutsche Übersetzung: www.jendryschik.de/wsdev/trans/designguide/format
iX-TRACT
- Viele Webdokumente sind für vor Jahren aktuelle und immer noch verwendete Browser wie die 4er-Versionen des Navigator oder vergleichbare Versionen des Internet Explorer geschrieben. Diese zeigen jedoch oft eine mangelhafte und nicht standardkonforme CSS-Umsetzung.
- Aktuelle IE- und Mozilla-Browser kennen zwei Darstellungsmodi. In welchem sie Webseiten darstellen, entscheiden sie nach der Dokumenttypdeklaration, so vorhanden.
- Den Standards des W3C entsprechende Dokumente stellen neue Browser deshalb nicht immer wie Standarddokumente dar, sondern wechseln in den Quirks Mode, was ungewollte Effekte nach sich zieht.
