Workshop Doctype-Switch: Teil 1 - Doctype-Switching
Dank der mangelhaften CSS-Umsetzung der Browser der letzten Jahre, waren Web-Designer gezwungen, ihre Seiten mehr
oder weniger fehlerhaft und am Standard des W3C vorbei zu erstellen. Viele Anfänger machten aus Unwissenheit auch
diverse Fehler, die von den Browsern nicht immer bemerkt wurden, da sie sich in einigen Punkten fehlertoleranter
verhielten als heute. So waren z.B. hexadezimale Farbangaben ohne
# möglich, das Boxmodell im Internet Explorers bis zur
Version 5.5 falsch umgesetzt und Eigenkreationen wie Laufschrift und blinkender Text verbreitet.
Die modernen Browser verhalten sich zum Glück mittlerweile gut bis sehr gut an die CSS-Spezifikation, ignorieren
fehlerhafte Angaben und interpretieren das Boxmodell. Das hat aber auch zur Folge, dass ältere oder nicht
standardkonforme Seiten fehlerhaft angezeigt werden.
Quirks-, Almost-Standards- und Standards-Mode
Aus diesem Grund lassen sich die Browser mit dem <!DOCTYPE> in verschiedene Darstellungsmodi
umschalten. Je nachdem, ob das <!DOCTYPE> fehlt, fehlerhaft ist oder als Sprache für das
Dokument HTML 3.2,
HTML 4.0,
XHTML 1.0 oder
XHTML 1.1 in den Varianten Transitional, Frameset oder Strict festlegt,
verhält sich der Browser standardkonform oder wie eine ältere Version. Damit soll sichergestellt sein, dass moderne und
ältere Seiten gleichermaßen richtig angezeigt werden.
Die folgenden drei Darstellungs-Modi haben sich mittlerweile durchgesetzt:
Quirks-Mode
Im Quirks-Mode verhält sich der Browser wie eine ältere Version aus dem 20. Jahrhundert,
die u.a. Fehler im Quellcode ignoriert und veraltete HTML-Tags und -Attribute kennt.
Der Internet Explorer 6 setzt das Boxmodell falsch um,
Internet Explorer, Geckos (Mozilla, Netscape,...) und Opera sind toleranter bei fehlerhaften CSS-Angaben
wie z.B. das Fehlen des # bei Farbwerten und Längenangaben ohne Einheit.
Standards-Mode
Im Standards-Mode, auch Standards-Compliant Mode oder Full Standards Mode genannt, verhält sich der Browser
weitesgehend an die CSS-Spezifikation des W3C und versucht die Seiten standardkonform anzuzeigen. Abgesehen
von einigen bis diversen Bugs funktioniert das auch gut.
Auch wenn nach dem Validieren die erste Fehlerliste vielleicht länger als der Quellcode ist, solltest du deine Seiten
gleich nach XHTML 1.0 Strict und somit im Standard-Mode erstellen.
Almost Standard Mode
Mozilla hat mit diesem Modus mit der Version 1.0.1 and 1.1beta noch einen weiteren eigenen Modus eingeführt, der sich vom Standards-Mode nur in dem Punkt unterscheidet, wie die Zeilenhöhen in Tabellen berechnet werden.
Browser-Bugs
Der Internet Explorer 6 hat, wie war es anders zu erwarten, zwei Probleme mit der <!DOCTYPE>-Angabe.
Wird vor dem <!DOCTYPE> ein Kommentar oder eine xml-Angabe eingefügt, so schaltet der IE immer in
den Quirks-Modus:
<?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">
<!-- --><?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">
Beide Angaben belassen den IE im Quirks-Modus.
Gleiches gilt übrigens auch für den Opera 7.0 - 7.03, da die Entwickler wohl der Meinung waren, das Verhalten des IEs
nachahmen zu müssen :-(. Seit der Version 7.1 ist dies aber korrigiert.
Modus überprüfen
Die Javascript-Eigenschaft compatMode erlaubt dir, den aktuellen Darstellungs-Modus abzufragen.
Im Quirks-Mode liefert document.compatMode den Wert BackCompat oder Quirks-Mode
und im Standards-Mode CSS1compat.
Internet Explorer 6, Mozilla ab der Version 1, Netscape und Opera ab Version 7 kennen diese Eigenschaft.
Alle anderen Browser liefern als Wert undefined und Mozilla unterscheidet hierbei nicht zwischen Standards-Mode und dem
eigenen Almost Standards Mode.
,
,
,
,
,
,
<script type="text/javascript"> alert(document.compatMode); </script>
Beispiel Quirks-Mode
Beispiel Standards-Mode
Weiterführende Links
Genauere Beschreibungen der Unterschiede zwischen den einzelnen Darstellungs-Modi findest du auf den Seiten der Browserentwickler: