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 und Betriebssystem die gleiche Ausgabe zu erzeugen beziehungsweise sich weitestgehend identisch zu verhalten.

Einhaltung von Webstandards

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 unterschiedlichen Interpretation diverser Standards in marktführenden Browsern. Zudem spielt der Wunsch vieler Webdesigner und -entwickler nach pixelgenauer Positionierung einzelner Elemente eine große Rolle.

Problematik

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 nicht funktionieren.

Als Konsequenz müssen sich Webdesigner darum bemühen, ihre Inhalte auf allen wichtigen Browsern lauffähig zu halten, welches mitunter ein aufwändiges Unterfangen nach der Versuch-und-Irrtum-Methode sein kann.

Aussicht

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

Beispiele

Um die nachfolgenden Code-Beispiele zu verstehen, sind Grundkenntnisse in HTML und JavaScript nötig.

JavaScript

<div id="sample" style="position: absolute; top: 100px; left: 100px;">Beispieltext</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 DOM, ein Standardmodell des W3C das von allen modernen Browsern unterstützt wird (z. B. Mozilla Firefox, Internet Explorer, Opera, Apple Safari usw.):

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

Cascading Stylesheets

Der folgende Code bewirkt eine Mindesthöhe in Block-Elementen:

 <div style="min-height: 200px;">Beispieltext</div>

Der Internet Explorer bis einschließlich Version 6 interpretiert die Angabe min-height fehlerhaft oder gar nicht, weshalb sich die Größe des Elements in diesen Browsern nach dem Inhalt richtet.

Folgende Angaben beschreiben die Größe und den Abstand eines div-Elements:

 <div style="width: 200px; height:50px; padding: 10px; border: 5px solid red;">Beispieltext</div>

Auch hier kann der Internet Explorer aufgrund des Box-Modell-Bugs das div-Element nicht korrekt darstellen, wenn das Dokument im Quirks-Modus gerendert wird: Entgegen der Spezifikation beträgt die Gesamtbreite in den betroffenen Browsern 200 Pixel (korrekt wäre eine Elementgesamtbreite von 230px).

Siehe auch

• Reset-Stylesheet
• Box-Modell-Fehler im Internet Explorer

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.
• BrowseEmAll – Desktopanwendung, welche das Testen in vielen Browsern und auf mobilen Endgeräten ermöglicht.
• Equafy – Cross-Browser-Test auf verschiedenen Browsern, Plattformen und Bildschirmauflösungen. Cloud-basiert.