Cross-Browser

Cross-Browser bezeichnet die Fähigkeit von in Webseiten eingebetteten Inhalten (insbesondere Cascading Style Sheets (CSS) und JavaScript), unabhängig vom jeweiligen Browsertyp die gleiche Ausgabe zu erzeugen beziehungsweise sich weitestgehend identisch zu verhalten.

Die Notwendigkeit für Cross-Browser-Fähigkeiten ist historisch gewachsen und stammt zum einen Teil aus der Zeit des Browserkrieges zwischen Microsoft und Netscape und zum anderen Teil aus der derzeit vorherrschenden Unfähigkeit und Unwilligkeit der Browserhersteller, verbindliche Standards für die Codierung von Webseiten einzuhalten. Zudem spielt der Wunsch vieler Webdesigner und -entwickler nach pixelgenauer Positionierung einzelner Elemente eine große Rolle.

Das Ergebnis sind Webseiten, die nur auf bestimmten Browsern das gewünschte Ergebnis liefern, während sie auf dem Browser eines anderen Herstellers unschöne Darstellungsfehler aufweisen oder im schlimmsten Fall gar nicht funktionieren.

Als Konsequenz müssen sich Webdesigner darum bemühen, ihre Inhalte durch Cross-Browser-Scripting auf allen wichtigen Browsern lauffähig zu halten, ein aufwändiges Unterfangen nach der Versuch-und-Irrtum-Methode, das viel Zeit verschwendet, die sinnvoller für die eigentlichen Entwicklungen eingesetzt werden könnte.

Mit dem DOM, einem Standardobjektmodell des W3C wurde schon ein erheblicher Schritt in eine einheitliche Richtung gegangen, jedoch gibt es noch starke Differenzen und Unzulänglichkeiten insbesondere bei der Kodierung von Events (siehe QuirksMode).

Weitere Besserung ist in Sicht. Der momentane AJAX-Hype (besser bekannt unter dem Namen Web 2.0) bringt das Cross-Browser-Kompatibilitätsproblem wieder ans Licht und fördert die Entwicklung unabhängiger JavaScript-Frameworks.

Einfaches Beispiel für eine Cross-Browser-Kodierung

Um das nachfolgende Code-Beispiel zu verstehen, sind Grundkenntnisse in HTML und JavaScript nötig:

<div id="sample" style="position : absolute; top : 100px; left : 100px;">some text</div>

Der Code beschreibt einen Textblock der in der linken oberen Ecke der Webseite 100 Pixel vom oberen und 100 Pixel linken Rand angezeigt werden soll. In den Browsern der 4er Serie des Netscape Navigators könnte man diesen Textblock mit JavaScript nachträglich verschieben:

document.layers['sample'].left = 200;

Dieser Code würde jedoch im Internet Explorer 4 nicht funktionieren. Stattdessen müsste man folgende Notation verwenden:

document.all['sample'].style.left = 200;

Um den Code cross-browser-fähig zu gestalten, müsste er also folgendermaßen aussehen:

if (document.all)
  document.all['sample'].style.left = 200;
else if (document.layers)
  document.layers['sample'].left = 200;

Der folgende Code benutzt das relativ neue DOM, ein Standardmodell des W3C das von allen modernen Browsern unterstützt wird (z. B. Mozilla Firefox, Internet Explorer, Opera, Safari usw.):

document.getElementById('sample').style.left = '200px';

Weblinks

QuirksMode – Unterschiede moderner Webbrowser, und Möglichkeiten, diese zu umgehen
X – JavaScript-Bibliothek mit vielen Demos
Crosscheck – JavaScript-Modultest-Framework, das Browserumgebungen für eine Vielzahl von Plattformen simuliert