Browser- und Feature-Detection

14. Mai 2013, von lieAdmin2019

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.
Screenshot vom Browsercheck


        

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
4 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
26. Juni 2013 um 16:16

Mich wurde interesieren wie euer Tool funktioniert? Werden die Browser-Moglichkeiten uber PHP oder JS emittelt?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Stephan Schimpf
    26. Juni 2013 um 17:02

    Hallo Dorijan,
    alle Browser-Möglichkeiten werden mittels JavaScript ermittelt. Wie im Artikel beschrieben ist Modernizr (http://modernizr.com/) eine große Hilfe dabei.
    Alles was nicht über Modernizr läuft, geht über das Navigator-Object, welches von jedem Browser mehr oder weniger gut unterstützt. Weitere Infos z.B. hier: http://www.javascriptkit.com/javatutors/navigator.shtml
    Schöne Grüße,
    Stephan

    26. Juni 2013 um 17:26

    Hallo Stephan,
    Und die Browser-Freatures werden uber die gesetzten HTML Klassen ausgelesen oder?

    Stephan Schimpf
    26. Juni 2013 um 17:29

    Genau, wenn du dir den html-Tag (auf der BrowserCheck-Seite) ansiehst werden dort mehrere Klassen hinzugefügt. Z.b. wenn der Browser SVG unterstützt die Klasse .svg. Wenn er SVG nicht unterstützt: .no-svg. Danach haben wir CSS Regeln erstellt die das jeweilige Icon neben dem Feature auf Blau oder Grau schalten.
    Schöne Grüße,
    Stephan

Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Susanne Liechtenecker und Christiane Bertolini
Inspiration – Podcasts

Folge #52 mit Christiane Bertolini

27. September 2019

Christiane Bertolini ist Betriebswirtschafterin und seit der Jahrtausendwende unternehmerisch tätig. Als Entwicklerin, Inkubatorin, hands-on Trendexpertin und Sparringspartner agiert sie cross industries, immer mit einem speziellen Twist.

Jetzt anhören
Close