CSS - Box Modell

Die langen Jahre der uneinheitlichen Darstellung von Internetseiten auf den verschiedenen Browsern gehört schön langsam der Vergangenheit an. Dafür soll der so genannte Rendering Mode – der Darstellungsmodus – sorgen. Dieser steht in unmittelbaren Zusammenhang mit den DTDs, die oben besprochen wurden.

Zum aktuellen Zeitpunkt haben sich drei Darstellungsmodis bei den Browsern etabliert.

1. Quirks Mode

Im Quirks-Modus simuliert ein Browser das Verhalten eines Browsers der 90er Jahre, der die DTDs nur mangel- und fehlerhaft unterstützt und ist deshalb sehr fehlertolerant.

Beispiele für im Quirks-Modus akzeptierte Fehler:

• Mozilla 1.0, Safari 1.0:
  • Farbangaben ohne Raute (#)
  • Farbwerte in Anführungszeichen
  • Body-Element mit 100% Höhe, ohne vorhandenen Inhalt
  • Zahlenangaben ohne Maßeinheit werden als Pixel interpretiert
• Internet Explorer 6 PC
  • padding wird nicht auf img-Elemente angewendet
• Opera 7.0
  • Klassen und IDs dürfen mit Zahlen beginnen
  • Groß- und Kleinschreibung bei Klassen und IDs wird ignoriert

2. Standard (Compliance) Mode

Ein Browser im Standard-Modus versucht die Vorgaben des W3C so gut es geht einzuhalten und das Dokument möglichst konform den Regeln zu interpretieren.
Die im Quirks-Modus aufgeführten "lockeren" Interpretationen wurden aufgehoben, dass bedeutet, dass Farbwerte in Anführungszeichen, RGB Farbwerte ohne #, usw. z.B. ignoriert werden.
Kein Element kann 100% hoch sein. Es ist immer so hoch wie das höchste Kindelement in ihm selbst. Die Höhe kann höchstens mit einer absoluten Einheit festgelegt werden, nicht jedoch mit einer relativen Einheit.

3. Almost Standard Mode

Diesen Modus kennen nur Browser die auf dem Mozilla ab Version 1.0.1 basieren und Safari 1.0. Dieser Modus entspricht im Wesentlichen dem Standard Mode, mit Unterschieden in der Darstellung ein paar weniger Elemente.

Tabelle: Wann schaltet welcher Browser in welchen Modus?

Weil man mit fehlendem bzw. vorhandenem Doctype den Darstellungsmodus steuern kann, nennt man diese Steuerungsmöglichkeit den "Doctype switch". Wie die Bezeichnung bereits vermuten lässt, kann man dies durch die Doctype Deklaration steuern. Das komplette Weglassen des Doctypes bewirkt die Anzeige der (x)HTML-Datei im Quirks Mode. Ein Doctype OHNE Angabe der URL zur DTD bewirkt bei den meisten transitional Doctypes ebenfalls eine Darstellung im Quirks Mode.

Man kann sehr einfach selber testen, wie ein Webbrowser eine Seite anzeigt bzw. welcher Modus verwendet wird: Durch die Eingabe des Javascript Befehls

javascript:alert(document.compatMode);  

in die Adressleiste des Browsers wird entweder "QuirksMode" oder "BackCompat", für den Standardmodus "CSS1compatMode" ausgegeben.