Cross-Browser
# Cross-Browser

* Verträglichkeit mit Standards, Accessibility
* HTML als logische Auszeichnungssprache
* Bevormundung des Users?
* Webstandards (W3C, Validator)

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

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:

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

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

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.):

### Cascading Stylesheets

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

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:

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).

