Browser- und Feature-Detection

Das Internet besteht aus ~600-700 Millionen Webseiten (Quelle) die tagtäglich von Milliarden von Menschen auf einer unglaublichen Menge an verschiedenen Devices und damit Browsern geöffnet werden. Neben den großen Browsern Chrome, Internet Explorer, Firefox, Safari und Opera gibt es eine unglaubliche Vielzahl an Webbrowsern – oft enorm exotische Programme mit vielen Einschränkungen und Eigenheiten.
Dem nicht genug verhält sich fast jede neue „Major“-Version eines Browsers anders als dessen ältere Vorgänger – Support für neue Features werden hinzugefügt oder wieder weggenommen. Um diese unglaubliche Diversität in Bahnen lenken zu können und um sicher zu gehen, dass eine Webseite auf allen oder zumindest einer Vielzahl der Browsern gut dargestellt werden kann, gibt es schon seit langem zwei verschiedene Ansätze: Feature-Detection und Browser Detection.

Browser Detection

Browser Detection bezeichnet den Vorgang, Regeln (z.b. CSS-Werte) basierend auf dem eingesetzten Browser zu schreiben. Ein Beispiel: Im IE7 ist eine Box zu breit. Im Header kann mittels Conditional-Comments ein zusätzliches CSS Skript für den den IE7 eingebunden werden, welches das Problem behebt:

<!--[if IE 7]>
CSS oder andere Angaben können hier stehen.
<![endif]-->

Der Aufwand für Browser Detection hält sich in überschaubaren Grenzen. Wird die Webseite auf dem spezifischen Browser getestet kann parallel dazu ein CSS geschrieben werden, dass die gefundenen Fehler ausbessert. Dabei wird das Haupt-CSS meist durch einfache Ausrichtungs- und Größenregeln überschrieben.
Browser Detection hat leider auch einige Nachteile. Zwar funktioniert die Webseite nach der Implementierung der Fixes auf den getesteten Browsern, die unglaubliche Vielzahl an Browsern, Geräten und Render-Engines macht einen Test auf allen gängigen und exotischen Setups aber nicht möglich und vor allem kaum bezahlbar. Weiters kann mit dieser Methode nicht gewährleistet werden, dass auch zukünftige Generationen von Browsern und Devices die Webseite wie gewünscht darstellen werden.

Feature Detection

Der zweite Ansatz, die Feature Detection, zielt auf spezifische Unterstützung (oder Nicht-Unterstützung) des jeweiligen Browsers ab. Dementsprechend ist der Ansatz auch ein anderer: Statt nur das Problem mittels einfacher Änderung von CSS Regeln zu beheben muss man bei der Feature Detection die Frage gestellt werden: Warum verhält sich der Browser wie er sich verhält? Ist dieses Verhalten auf ein spezifisches Feature zurückzuführen, welches der Browser nicht unterstützt, kann mit Feature Detection gearbeitet werden.
Ein konkretes Beispiel dafür ist z.B. das CSS Attribut box-sizing. Wird die Webseite unter Einsatz des Attributs box-sizing entwickelt kann das signifikante Auswirkungen in Browser haben, die dieses Attribut nicht unterstützen (z.B. IE7). Das Layout verrutscht und sprengt dadurch das Aussehen der Webseite. Ein Fix für den jeweiligen Browser ist zwar schnell geschrieben, andere Browser die box-sizing nicht verstehen können damit aber auch leider wenig anfangen. Hier kommt die Feature Detection ins Spiel. Anstatt einen Browser anzuvisieren kann mittels verschiedener Methoden (z.B. über Modernizr) die generelle Fähigkeit des Browsers abgefragt werden, bestimmte Attribute zu verstehen. Für alle Browser die dies nicht tun, kann damit eine globale Ausnahmeregelung gefunden werden.

//Beispielhaftes CSS
html.no-boxsizing .elementA {
  Angaben für Browser ohne Box-Sizing
}
.elementA {
   Generelle CSS-Attribute
}

Diese Herangehensweise hat wie beschrieben einige Vorteile: Zukünftige und exotische Browser die durch Tests nicht abgedeckt werden können, werden ebenfalls erfasst und zeigen die Webseite richtig bzw. wie gewünscht an.
Natürlich ist diese Methode nicht immer anwendbar. Darstellungsunterschiede oder sonstige Fehler müssen auf spezifische CSS-Regeln rückführbar sein. Handelt es sich um einen simplen Bug bzw. einer Abweichung vom Standard ohne erkennbaren Grund muss auf die gewohnte Browser Detection zurückgegriffen werden.

Browser vs. Feature Detection

Welche der beiden Methoden besser ist, kommt natürlich immer auf den Fall an. Generell sollte man natürlich den Feature Detection Approach bevorzugen  wo er anwendbar ist, weil dadurch generell größere Kompatibilität mit Browsern gesichert werden kann. Bei vielen Problemen kommt man um den Einsatz von Browser Detection aber sowieso nicht herum.
Eine generelle Regel gibt es dabei zu beachten: Da das Web so unglaublich vielseitig ist und von jedem Menschen anders aufgerufen wird, sollte man nicht (und braucht auch nicht) versuchen, Webseiten in ein Korsett zu stecken. Pixelgleiches Rendering über alle Systeme, Devices und Engines ist und bleibt unmöglich (und oft auch nicht wünschenswert).

Browser-Check

Um Darstellungs- und anderen Fehlern besser auf die Spur zu kommen, haben wir für unsere neue Webseite ein Tool entwickelt, das Statistiken über den eigenen Browser sowie die darin unterstützten Features bereitstellt und im Bedarfsfall an uns übermittelt. Der Browser-Check ist über www.liechtenecker.at/browsercheck erreichbar.

Bild