Browser-Kompatibilität testen

Wer heute als Entwickler Frontends für Webanwendungen erstellt, muss sich früher oder später damit auseinander setzen auf welchen Browsern die Anwendung später läuft oder laufen muss. Üblicherweise nutzt der Webentwickler in seiner Entwicklungsumgebung immer die neuste Version eines flexiblen Browsers, der mit vielen unterstützenden Plugins versehen ist, möglichst alle aktuellen Standards beherrscht und fehlertolerant ist. Leider spiegelt das aber in den wenigsten Fällen die Situation beim Kunden bzw. Benutzer wieder.

Im besten Fall stellt der Kunde die Anforderung, dass lediglich der im Unternehmen eingesetzte Standardbrowser genutzt wird. Im schlimmsten Fall soll die Anwendung auf “allen gängigen Browsern” funktionieren.

Spätestens jetzt steht der Entwickler vor einem Problem und muss sich folgende Fragen stellen:

• Welche sind die “gängigsten” Browser?
• Wie kann ich die Webseite auf diesen Browsern testen?
• Wie kann ich die Webseite so optimieren, dass sie auf möglichst allen Browsern funktioniert?

Browser am Markt

Eine Übersicht vieler bekannter und weniger bekannter Browser findet man recht schnell in Wikipedia. Doch alleine nützt diese Übersicht natürlich wenig. Das ausschlaggebende Kriterium welchen Browser man derzeit als “gängig” betrachtet ist natürlich dessen Verbreitung bzw. Marktanteil. Auch hier gibt es aussagekräftige Statistiken, die in regelmäßigen Abständen die reale Verbreitung der unterschiedlichen Browser anzeigen.

Anhand der Marktanteile sieht man sehr deutlich, dass sicherlich viele aktuelle Browser wie IE7, IE8 und Firefox 3.5 den Markt beherrschen, aber auch z.B. der IE6 noch eine nicht zu unterschätzende Verbreitung genießt. Ebenfalls Browser wie Opera, Safari und Google Chrome spielen in der Top-Liste der Browser zum jetzigen Zeitpunkt eine Rolle. Wenn man von “gängigen Browsern” spricht, kommt man an den genannten also nicht vorbei.

Browser testen

Um also zu testen ob die Webanwendung auf allen “gängigen Browsern” funktioniert und möglichst auch identisch aussieht, muss man sich etwas einfallen lassen.

Bedenken sollte man dabei, dass eine 100% Kompatibilität mit allen Browsern nahezu unmöglich ist. Man muss also aus wirtschaftlicher Sicht genau abwägen wie das Kosten/Nutzen-Verhältnis ist und wie viel Prozent Kompatibilität man erreichen möchte.

Eine einfache und oftmals ausreichende Möglichkeit ist, jeden ausgewählten Test-Browser parallel zum Entwicklungsbrowser zu installieren und bereits während der Entwicklung stetig die Ausgabe der anderen Browser zu kontrollieren und ggf. gleich nachzusteuern. Installationen von Opera, Google Chrome und Safari für Windows lassen sich in der Tat einfach parallel installieren. Problematisch wird es aber mit dem Internet Explorer. Da dieser tief im Kern von Windows verwurzelt ist, lassen sich unterschiedliche Versionen nicht einfach so parallel installieren. Googelt man ein wenig nach diesem Problem, bekommt man haufenweise Tipps und so genannte “Sandbox-” oder “Standalone-Browser” angeboten. Aber Vorsicht: Nicht alle angebotenen Lösungen sind empfehlenswert und können gar den vorinstallierten Browser zerstören. Die aktuell beste Lösung und zweifelsfrei zu empfehlen ist der IETester, welcher auch unter Windows Vista und Windows 7 lauffähig ist. Das rund 25MB große Programmpaket installiert den IETester, in welchem beliebige Browser-Tabs mit unterschiedlichen IE-Versionen geöffnet werden können. Dabei werden mit dem IE5.5 bis IE8 alle nötigen und sinnvollen Versionen abgedeckt.

Sollen darüber hinaus noch weitere Browser auf anderen Betriebssystemen getestet werden, bietet das Internet auch hier eine Lösung die allerdings nicht ganz so flexibel ist. Auf der Webseite browsershots.org wird nach Angabe der URL die eigene Webseite in allen denkbaren Browservarianten gerendert und das Ergebnis als Screenshot präsentiert. Die eigentliche Funktionalität der Webseite kann damit allerdings nicht getestet werden.

Auch wenn man mit diesen Tools und Tricks die Kompatibilität der meisten Browser meist ausreichend gut testen kann, lohnt es sich doch immer die Seite auch auf einem “realen” System zu testen. Wer die Möglichkeit hat oder schaffen kann einen Rechner mit MacOS oder Linux, bzw. (virtuelle) Rechner mit unterschiedlichen Windows- und Browser-Versionen zu nutzen, sollte dies aus Sicht der Qualitätssicherung tun.

Webseiten für Browser optimieren

Da jeder Browser eine Webseite bestehend aus HTML, CSS und JavaScript auf unterschiedliche Art und Weisen oder gar fehlerhaft rendert und interpretiert, und dabei gesetzte Standards mehr oder weniger einhält oder ergänzt, muss der Frontend-Entwickler erhebliche Anstrengungen unternehmen den eigenen Code so anzupassen, dass er tatsächlich auf allen Browsern gleich funktioniert und aussieht. Der steigende Anteil an JavaScript (Ajax) und die Einführung von CSS3 machen das nicht unbedingt einfacher, auch wenn die Browserhersteller mehr denn je versuchen Standards einzuhalten. (vergl. ACID-Test)

Als Frontend-Entwickler ist man fast schon gezwungen Standards zu umgehen und fehlerhaften Code zu erzeugen, um die Kompatibilität herzustellen.

Weitere Informationen zu diesem umfassenden Thema findet man im Internet mit der Suche nach u.A. diesen Stichwörtern: DOCTYPE, CSS-Hack, Browserweiche, Box-Modell.

Eine weitere Möglichkeit Webseiten im Sinne der Browser-Kompatibilität zu optimieren ist das Nutzen von Frameworks. Gerade im Bereich JavaScript haben sich in jüngster Vergangenheit etliche Frameworks entwickelt, die von Seiten derer Entwickler auf eine hohe Browser- und Plattformunabhängigkeit optimiert wurden. Beim Einsatz dieser Frameworks muss der Frontend-Entwickler sich also darüber kaum noch selbst Gedanken machen.

Auch andere Web-Frameworks für die unterschiedlichsten Bereiche und Programmiersprachen bringen meist ihre eigenen Lösungen mit, so dass der Frontend-Entwickler sich auf seine eigentliche Aufgabe konzentrieren kann und bei seiner Arbeit deutlich entlastet wird.