Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Die kurzfristige Lösung von heute ist der Müll von morgen

Browser und Webstandards

Die kurzfristige Lösung von heute ist der Müll von morgen

Mit der Veröffentlichung von Microsoft Edge als dem neuen Windows-Browser ist in diesem Jahr die letzte Bastion der nicht-standardbasierten Desktopbrowser gefallen. Zeit, die Besen rauszuholen, hinter die Ecken zu kucken und im Web aufzuräumen.

Es war sehr interessant, einen neuen, standardkonformen Browser auf das Web loszulassen, nur um herauszufinden, dass ein Großteil des WWW sich nicht dafür interessiert, was ein Browser kann, sondern sich auf dessen Namen verlässt.

Das Problem nennt sich User-Agent-Sniffing. Entwickler haben über Jahre hinweg Probleme bei der Darstellung von bestimmten Elementen in verschiedenen Webbrowsern gefunden. Um diese Probleme zu umgehen, wurden mit verschiedenen Techniken die User-Agents der Browser ausgelesen, um unterschiedlichen Browsern unterschiedlichen Code zu schicken – auch bekannt als Browserweiche.

Eine Website in drei mobilen Webbrowsern angezeigt
Browser sniffing im Web: eine Adresse, drei verschiedene Seiten

Ein notwendiges Übel aus alten Zeiten, das uns jetzt davon abhält, Webinhalte in Browsern zu sehen, die zu allem fähig sind, aber den falschen Namen haben. Dabei sind die übermittelten Browserkennungen schon seit Jahren nicht eindeutig. Jeder neue Browser muss sich nicht nur mit seinem eigenen Namen identifizieren, sondern auch alle anderen wiederholen, um überhaupt als Browser erkannt zu werden. Zum Beispiel:

  • Firefox: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
  • Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25
  • Chrome: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36
  • Microsoft Edge: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mittels Erweiterungen und Entwicklertools in Browsern kann einer Seite auch ohne Probleme vorgegaukelt werden, dass der derzeitige Browser ein anderer ist. Spambots haben sich jahrelang als IE6 ausgegeben, um nicht von Seiten geblockt zu werden. Patrick Lauke traf den Nagel auf den Kopf, als er User-Agent-Strings als »pack of lies« definierte.

Korrekte Darstellung bei falschem Code

Die größte Sünde eines Browsers ist es, das Web falsch anzuzeigen. Dabei ist es für Endnutzer irrelevant, ob der Browser einem Standard folgt oder nicht. Das Endergebnis sieht einfach falsch aus. Netscape 6 hatte das Problem, dass er weder document.layers noch document.all unterstützte, sondern document.getElementsByTagName, wie vom Standard definiert. Fast alle JavaScript-Lösungen funktionierten nicht mehr, und Schuld war der Browser.

Als Microsoft Edge entwickelt wurde, musste das Team dem Browser einen falschen User-Agent-String geben, um überhaupt moderne Webinhalte anzuzeigen. Der nächste Schritt war dann, zu analysieren, was andere Browser als experimentelle Lösungen anboten und was von Entwicklern ohne Alternative eingebunden wurde. Im Endeffekt musste der Browser nicht-standardkonformen Code anzeigen. Unter anderem ging es dabei um eine ganze Menge -webkit-CSS-Selektoren, aber auch aufwendigere Probleme wie Webfonts, die ohne CORS-Header an den Browser geschickt werden. Über 4.200 dieser »interoperability fixes« wurden Teil des Browsers und trugen damit zu seiner Größe und einer Verspätung der Veröffentlichung bei.

Das Web ist dick und rund und hat Probleme, sich schnell fortzubewegen. Die durchschnittliche Webseite ist 2,2 MB groß, mit 170 verschiedenen Inhalten und braucht 5 Sekunden zum Laden (siehe etwa die Statistiken auf httparchive.org). Viele Faktoren sind schuld an dieser Seitengröße, aber eine Menge liegt daran, dass wir das Web mit kurzfristigen Lösungen und Hilfsbibliotheken verstopfen, die wir niemals löschen oder uns überhaupt daran erinnern, wo sie verwendet wurden.

Wie die Familie Hoppenstedt haben wir unsere Verpackungsmaterialien in den Korridor geworfen, und nun darf jemand anderes aufräumen. Meist wird allerdings nichts aufgeräumt, sondern zu dem Berg hinzugefügt oder per Minifizierung oder mittels Task-Managern der Müll etwas verkleinert.

Zeit, aufzuräumen! Der erste Schritt ist es, unbekannte Browser nicht als Übel zu sehen, sondern zu erwarten, das sie standardkonform sind. Das bedeutet, wenn navigator.userAgent zur Lösung eines Problems verwendet wird, dann sollte auch die Browserversion und das OS abgefragt werden. Damit wird ein Problem umzingelt, statt auch in der Zukunft Browser zu blocken.

Am Besten ist natürlich, zu testen was ein Browser kann, bevor man eine Technik verwendet. Progressive Enhancement ist ein alter Hut, aber leider vergessen wir immer wieder, wie praktisch diese Art zu arbeiten ist.

Entrümpeln mit dem Site Scanner

Derzeit arbeitet das Microsoft-Edge-Team mit Partneragenturen und der Community daran, das Web von altem Müll zu befreien. Zu diesem Zweck gibt es einen Service, der eine Seite scannt, Probleme erkennt und einen Report erstellt.

Screenshot des Microsoft Site Scanners
Screenshot des Microsoft Site Scanners

Wenn ihr dem sogenannten Site Scanner zum Beispiel die Webkrauts-Seite gebt, findet ihr heraus, was verbesserungswürdig ist. In diesem Fall:

  • jQuery ist in der Version 1.4.4 und könnte 1.6.4 sein
  • navigator.userAgent wurde gefunden, was bedeuten kann, das die Seite Browser blockt (in diesem Fall ist es ein Teil der veralteten jQuery-Version).
  • prerender und prefetch werden nicht verwendet, obwohl sie einfach zu benutzen sind und dem Endnutzer eine Menge Zeit ersparen können.

Alles in allem eine gute Seite mit wenigen Problemen, was natürlich zu erwarten war. Andere sehen um Einiges schlechter aus.

Der Scanner testet verschiedene Probleme:

  • Veraltete IE-Rendering-Modi
  • Unnötige Wiederholung von Markup für verschiedene, moderne Browser
  • Plugins
  • Veraltete Bibliotheken
  • Browser-Sniffing
  • Unnötige CSS-Präfixe (-ms-, -moz- usw.)

Weiterhin zeigt der Scanner an, ob moderne Webdesign-Praktiken verwendet wurden:

  • Responsive Web Design
  • Moderne input-Varianten (tel, date …)
  • prerender und prefetch

Barrierefreiheit ist ein weiteres Kriterium:

  • alt-Attribute
  • ARIA-Kennzeichnungen

Der Scanner ist Open Source und als auf node.js basierende Lösung auch auf GitHub erhältlich. Das erlaubt Partnern, ihre Webseiten auch hinter einer Firewall oder auf einem Testserver zu scannen. Natürlich freut sich das Team auch über Pull-Requests, um mehr Tests in den Scanner einzubauen.

Es ist Zeit, hinter uns aufzuräumen. Es gibt viele Tools, die uns dabei helfen. Wir haben nun den Vorteil, dass die Gespenster der alten, nicht-standardkonformen Browser ausgetrieben wurden. Und es ist ein gutes Gefühl, unnötigen Code zu löschen. Also, weg damit!

Kommentare

Gunnar Bittersmann

Gunnar Bittersmann
am 22.12.2015 - 09:00

Jeder neue Browser muss sich nicht nur mit seinem eigenen Namen identifizieren, sondern auch alle anderen wiederholen, um überhaupt als Browser erkannt zu werden.

Immer wieder gern gelesen: History of the browser user-agent string. (Gibt’s auch auf deutsch.)

Permanenter Link

Thomas Meinike
am 22.12.2015 - 11:27

Nur zur historischen Einordnung: Wer damals™ schon DOM-konform entwickelt hat, setzte bereits ab IE 5 (1999) auf getElementsByTagName("…") und hatte somit auch kein Problem mit Netscape 6 (2000).

Permanenter Link

Internetagentur...
am 17.02.2016 - 13:47

Microsoft hat mit seinem neuen Browser wirklich einen enormen Schritt nach vorne gemacht! Als Entwickler gibt es nichts schlimmeres, als wenn eine Seite überall funktioniert - dann kommt der IE und es sieht einfach sch**** aus, weil viele Webstandards nicht unterstützt wurden. Ich bin froh, dass Microsoft doch noch zur Vernunft kam (besser spät, als nie!)

Permanenter Link

Die Kommentare sind geschlossen.