Rendering-Mode, die Lösung zur korrekten Darstellung in Browsern

Seit Anfang der 90er Jahr, als das Internet noch in seinen ersten Zügen war, begannen die verschiedenen Browserhersteller möglichst viele Anteile an dem neuen Medium zu erhaschen. Blinkende Texte via Blink-Tag (Netscape), oder Laufschriften via Marquee-Tag (Microsoft) sind nur ein kleines Beispiel für die Versuche, Entwickler sowie Benutzer auf seine Seite zu bringen. So kam es, dass man sich zwar im Groben und Ganzen an die Ideen des W3C hielt, aber möglichst viel Eigeninitiative entwickelte, was sich auch auf die Darstellung einzelner Seiten auswirkte. Schon recht bald wichen die Anzeigen der einzelnen Browser stark voneinander ab. Es dauerte einen Moment, bis die einzelnen Browser-Software-Hersteller bemerkten, dass für das Ziel, eine möglichst gleiche Darstellung zu erreichen, eine Lösung gefunden werden musste. Der so genannte Rendering-Modus (Darstellungsmodus) sollte die Lösung bringen und die verschiedenen Darstellungsmodelle der Browser wieder möglichst vereinen. Da die Darstellung durch CSS geregelt werden sollte, hat der Rendering-Modus überwiegend maßgeblich Einfluss auf die Interpretation der CSS Richtlinien.

Welche Render-Modi gibt es?

Mittlerweile haben sich 3 verschiedene Modi etabliert. Um nun herauszufinden, in welchem Darstellungsmodus sich der Browser befindet, kann man folgende kleine JavaScript Zeile einfach in die Adressleiste kopieren und aufrufen.

1

javascript:alert(document.compatMode);

Das funktioniert jedoch nur bei den aktuellen Browsern Mozilla, Opera, IE5/mac und IE6/win sowie einigen Anderen. Als Ergebnis erhält man dann entweder die Meldung “BackCompat” oder “QuirksMode” für den Quirks Modus, oder aber “CSS1Mode” für den Strict Modus. Browser, die mit dem CompatMode nichts anfangen können liefern ein “undefined” zurück. Das sicherste Mittel ist jedoch einen Blick auf die z.B. unten stehende Tabelle.

• Quirks-Modus

  Davon ausgehend, dass noch immer Browser die DTDs nur mangelhaft, bzw. gar nicht unterstützen, kann man dieses Modus als sehr fehlertolerant bezeichnen. Der Quirks-Modus steht für das eigentlich unkonforme Verhalten der Browser aus den 90er Jahren.

• Full-Standard-Mode (vorher: Strict Mode)

  Ursprünglich hieß dieser Modus: Strict Mode. Jedoch gab es immer wieder Verwechslungen zwischen der „Strict DTD“ und dem “Strict-Mode”. Um diese Verwechslung zu vermeiden wurde dieser Darstellungsmodus kurzerhand in “Full Standard Mode” umbenannt.
  Befindet sich ein Browser in diesem Modus versucht er sich so gut er kann an die Vorgaben des W3C zu halten und das Dokument so konform wie möglich darzustellen.

• Almost Standard Mode

  Mit Einführung des Mozilla Browser ab Version 1.0.1 wurde dieser Modus eingeführt. Er existiert NUR bei Browsern die auf dem Mozilla ab Version 1.0.1 basieren (Netscape 7.0, Firebird, usw.), sowie Safari ab Version 1.0 (Build 0.85) und auch neuere Konqueror Versionen.

  Opera, Internet Explorer und andere Hersteller kennen diesen Modus hingegen nicht.

Worin unterscheiden sich die Modi konkret voneinander ?

Wie bereits gesagt weicht die Darstellung innerhalb der einzelnen Browser teilweise sehr stark voneinander ab. Im folgenden Teil werden ein paar Unterschiede aufgezeigt. Alle Unterschiede aufzuzeigen würde jedoch die Länge dieses Artikels sprengen, so dass hier nur einige grobe Unterschiede in den aktuellen Browsern erwähnt werden.

Mozilla ab Version 1.0.1 (und seine Derivate z.B. Netscape auf Windows + Mac), Safari 1.0 (Build 0.85 nur auf Mac)

Seit Version 6.0 basiert auch Netscape auf der Mozilla Rendering Engine und verhält sich somit identisch, was die Darstellung und das Doctype Switching betrifft. Netscape 4 hingegen hat außer dem Namen keine weitere Verwandtschaft mit seinem Nachfolger. Da er bereits lange vor der Idee des Doctypes Switchings auf dem Markt war, kann er folglich nichts mit Doctype Deklarationen anfangen.

Quirks mode

• Alle Formatierungen werden, wenn nicht anders angegeben, gemäß der Datei quirks.css dargestellt. (http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/quirk.css)
• Laut den CSS Richtlinien müssen Farben im RGB Format mit einer Raute (#) beginnen. In diesem Modus werden sie auch ohne Raute akzeptiert.
• Farbwerte in Anführungszeichen werden akzeptiert
• Als Standardeinheit für Zahlen wird Pixel genommen, wobei normalerweise Zahlen immer mit der entsprechenden Einheit angegeben werden müssen.
• Ein leerer String bei der Angabe des Hintergrundbildes wird als leerer Hintergrund gewertet.
• Der Rahmen um Tabellenzellen ist 1 Pixel breit.
• Das Body-Element kann eine Höhe von 100% haben, ohne dass Inhalt vorhanden ist
• Eine vollständige Auflistung des Verhaltens im Quirks-Modus gibt es hier http://mozilla.org/docs/web-developer/quirks/quirklist.html

Standard Mode

Da sich das W3C nur ungenau über die Darstellung der Line-height Eigenschaft äußert, nutzten die Mozilla Entwickler den gegebenen Spielraum aus und interpretierten die CSS Spezifikation auf ihre Art und Weise. Sehr zum Leidwesen vieler Webdesigner, da die Kombination aus Tabellen und pixelgenauem Design es ihnen nur umständlich ermöglichte eine korrekte und browserübergreifende Seite zu erstellen. Das Ergebnis: Eine schier endlose Debatte, über die korrekte CSS2-Interpretation der line-height Eigenschaft, die der Auslöser dieser Darstellungsprobleme war. (mehr dazu: Evolt : Does Netscape 6 break your tables ?).

• Die Darstellung hält sich, abgesehen vom beschriebenen Line-height Problem, so exakt wie möglich an die Vorgaben des W3C.
• Die im Quirks-Modus aufgeführten „lockeren“ Interpretationen wurden aufgehoben.
• RGB Farbwerte müssen mit einer # angegeben werden, usw.
• Das Body-Element kann nicht 100% hoch sein. Es ist immer so hoch wie das höchste Element in ihm.

Almost Standard Mode

Mit Einführung des Almost Standard Modus wurde die Debatte um die Interpretation der line-height Eigenschaft beendet, wobei dadurch die nächste Debatte ausgelöst wurde: “War ein neuer Darstellungsmodus wirklich notwendig?”. Das ist jedoch ein eigenes Kapitel. Der “Almost Standard Mode” entspricht exakt dem “Full Standard Mode”, jedoch mit der Einschränkung, dass die line-height Eigenschaft anders interpretiert wird.

Internet-Explorer ab Version 6.0 (Windows nicht Mac !)

Bis zum Erscheinen der Version 6.0 war auch für den Internet Explorer/win Doctype Switching ein Fremdwort. Seine Vorgänger konnten weder mit Doctype Deklarationen umgehen, noch zwischen den einzelnen Modi hin- und herschalten. Um zu gewährleisten, dass sich Internetseiten in der Darstellung im IE6 nicht vom IE5 unterscheiden, führte Microsoft das Doctype Switching ein. Da sich die Version 6.0 im Quirks-Modus wie seine Vorgänger verhält, kann man auch sagen, dass sich alle älteren Versionen des Internet Explorers vor Version 6 grundsätzlich im Quirks-Modus befinden und ihre Interpretation der CSS Richtlinien fehlerhaft ist.

Quirks-Modus

• Bis Version 5.5x war beim Internet Explorer ein vollkommen fehlerhaftes Box Model implementiert. Um die Kompatibilität zu seinem Vorgänger zu wahren wurde dieses fehlerhafte Box Model auch im Quirks-Modus des IE 6/win weiterhin implementiert. (mehr dazu hier : Box Model Artikel)
• padding wird nicht auf IMG Elemente angewendet
• Farbwerte in Anführungszeichen werden akzeptiert
• white-space: pre wird als white-space:normal dargestellt. Es muss das veraltete PRE-Element verwendet werden, um diesen Effekt dennoch erreichen zu können.
• Das Body-Element kann 100% hoch sein
• Eine vollständige Auflistung des Verhaltens im Quirks-Modus gibt es hier MSDN CSS Enhancements

Standard Mode

• Generell versucht der Browser nun so gut wie möglich sich an die Vorgaben des W3C zu halten, wobei dieses Verhalten immer noch sehr fehlerhaft ist (siehe Bugbase)
• Es wird das korrekte Box Model angewendet
• Die CSS 2 Eigenschaften Min-height und word-spacing werden nun angewendet
• White-space: pre wird korrekt dargestellt
• Mehr Infos zum Verhalten im Standard Modus gibt es ebenfalls hier
• Das body-Element kann nicht 100% hoch sein. Es ist immer so hoch wie sein höchste Element.
• Mehr dazu ebenfalls unter MSDN CSS Enhancements

Almost Standard Mode

Dieser Modus existiert im Internet Explorer/Windows nicht.

Internet Explorer 5.x (Mac nicht Windows!)

Der Name des Windows Bruders lässt vermuten, dass der Internet Explorer auf dem Mac mit dem Bruder auf Windows Gemeinsamkeiten hat. Dem ist nicht so ! Der IE5/Mac wurde von einem vollkommen unabhängigen Entwicklerteam programmiert. Im Gegensatz zum Windows Bruder hält er sich abgesehen von einigen Bugs (wie bei allen Browsern) sehr streng an die CSS Richtlinien und interpretiert diese wesentlich besser als sein Windows Pendant.

Quirks-Modus

Eine kleine Verwandtschaft zwischen Mac und Windows gibt es doch. Im Quirks-Modus verhält sich der IE/Mac wie sein Windows Gegenstück im Quirks-Modus. Er hat also ebenfalls ein fehlerhaftes Box Model, akzeptiert Farbwerte in Anführungszeichen, usw.

• Formatierungen werden innerhalb von Tabellen nicht übernommen
• font-size: medium wird, genau wie beim IE4.x/win, zu klein dargestellt. Es wird stattdessen font-size: small angewendet. Die Schrift ist also um den Faktor 1,25 kleiner als erwünscht.

Standard Mode

Im Standard Modus ist der IE/mac seinem Windows Pendant überlegen (auch gegenüber Version 6). Er hält sich extrem streng an die CSS Richtlinien. Außerdem werden die Fehler des Quirks-Modus behoben.

Almost Standard Mode

Dieser Modus existiert im Internet Explorer/Mac nicht.

Opera ab Version 7 + 8 (Windows + Mac)

Ähnlich wie schon beim Internet Explorer kannten die Vorgängerversionen von Opera 7.0 keine Doctypes, geschweige denn Doctype Switching. Ihre Darstellung ist jedoch recht Richtlinienkonform, so dass man davon ausgehen kann, dass sie sich immer im Strict Modus befinden.

Quirks-Modus

• Das fehlerhafte Box Model des Internet Explorers wurde übernommen (!)
• Wie schon oben bei Mozilla Browsern werden Farben im RGB Format, ohne Raute (#) beginnend, akzeptiert.
• Auch hier wird Pixel als Standardeinheit bei der Grössendefinition genommen, wobei normalerweise Zahlen immer mit der entsprechenden Einheit angegeben werden müssen.
• Groß- und Kleinschreibung bei Klassen und IDs wird ignoriert
• Klassen und IDs dürfen auch mit Zahlen beginnen
• Der Rahmen um Tabellenzellen ist 1 Pixel breit.
• Das Body-Element kann 100% hoch sein, ohne dass Inhalte vorhanden sind
• Die Schriftgröße 100% wird als 100% – 1 Pixel dargestellt
• Eine vollständige Auflistung des Verhaltens im Quirks-Modus gibt es hier The Opera 7 and 8 Doctype Switches

Standard Mode

• Opera versucht sich bei der Darstellung der Seite so exakt wie möglich an die Vorgaben des W3Cs zu halten.
• Bei Klassen und IDs ist auf Groß- und Kleinschreibung zu achten.
• Klassen- und ID-Bezeichnungen müssen gemäß den vom W3C festgelegten Namenskonventionen verwendet werden.
• Es wird das korrekte Box Model angewendet.
• Das Body-Element kann nicht 100% hoch sein. Es ist immer so hoch wie das höchste Element in ihm.

Almost Standard Mode

Dieser Modus existiert im Opera Browser nicht.

Andere Browser

Es gibt sicherich noch viel andere Browser, jedoch alle aufzuzählen würde nicht nur die Länge dieses Artikels sprengen, sondern auch wenig Sinn machen. Das liegt daran, dass basierend auf den oben genannten 3 Browsern fast alle anderen Browser ihre Darstellung gestalten. Teilweise werden für eventuelle Derivate, sogar die selben Rendering-Engines lizensiert / verwendet und das fertige Produkt unter neuem Namen präsentiert. Sollte dieses mal nicht der Fall, dann lohnt die Aufführung des Browsers selbst dann nicht, da der Marktanteil des entsprechenden Browsers so gering, dass man ihn tatsächlich getrost ignorieren kann

Pages: 1 2 3