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.
under-construction.jpg
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 Mangelhafte CSS Darstellung
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:
marginheight=”0″ topmargin=”0″>

Webdesigner im ständigen Kampf

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.
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.
Mit Doctype-Deklaration sieht manches Dokument im IE schlecht aus: als ob man horizontal scrollen müsste, wo es nicht notwendig ist.

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. Microsofts IE interpretiert Randzonen eines Webdokuments leider anders als die CSS-Spezifikation.

Doc Type switching

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
Was bedeutet DTD
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:

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.

Quirks und der IE
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 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.
andere können es besser
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 .
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.Derzeit bietet der kleine Firefox Browser für uns Entwickler eine gute Plattform, weil er nicht nur gut darstellen kann, sondern wegen die vielen Extenions zur Überprüfung von validem Code in den Internetseiten.
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.

Weblinks:
Matthias Gutfeldt: Doctype switching and standards compliance: An overview gutfeldt.ch/matthias/articles/doctypeswitch.html

Lance Silver:CSS Enhancements in Internet Explorer 6; msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

The Opera 7 DOCTYPE Switches:www.opera.com/docs/specs/doctype/

David Baron:Mozilla’s quirks mode; www.mozilla.org/docs/web-developer/quirks/

Bert Bos What is a good Standard?deutsche Übersetzung: www.jendryschik.de/wsdev/trans/designguide/format