PHPGangsta - Der praktische PHP Blog

Da viele von uns wahrscheinlich bereits HTML5 Webseiten erstellen oder ältere Seiten um HTML5-Features erweitern ist es wichtig zu wissen welcher Browser welches Feature unterstützt, um abschätzen zu können wieviel Prozent der Besucher das neue Feature nutzen können und wie viele nicht.

Die wohl korrekteste Methode das herauszufinden ist auf die aktuelle Webseite ein paar Javascript-Zeilen hinzuzufügen die die entsprechende Feature-Unterstützung testet, die sogenannte Feature Detection. Die Liste mit unterstützten bzw. nicht unterstützten Features schickt man via AJAX zum Server zurück. Nur so hat man aktuelle und auf die eigenen Besucher abgestimmte Zahlen.

Man müßte also ähnlich wie hier für das canvas-Element einen Test schreiben:

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

Aber es gibt schon große Bibliotheken, die hunderte von solchen Tests kennen und wo man einfach eine Funktionalität testen kann, wie hier beispielsweise mit Modernizr:

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

Modernizr ist der bekannteste Vertreter, es ist auch möglich die unterstützten Codecs des <video> und <audio> Tags abzufragen und vieles mehr.

Es gibt aber auch Webseiten und Tabellen, die allgemein darstellen welche Browser-Versionen welche Features unterstützen. Wenn man diese Tabellen nimmt und ungefähr mit der Browser-Verteilung der eigenen Besucher verrechnet kommt man auch zu einem Ergebnis.

Die bekanntesten Seiten sind:

• http://html5demos.com

• http://www.caniuse.com

• http://html5test.com/results.html bzw. http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBiBsqYGDA

Wenn man nun das Ergebnis erhält dass bereits 85% der Besucher das Feature X unterstützt gilt es Entscheidungen zu treffen. Ist es noch zu früh, das Feature einzubauen? Was macht man mit denjenigen, die noch einen alten Browser haben? Versucht man das fehlende Feature nachzubilden? Für diese Nachbildungen gibt es Sammlungen von sogenannten Polyfills und Shims. Wenn der Browser also beispielsweise das placeholder-Attribut noch nicht unterstützt ist trotzdem möglich, sie mittels Javascript hinzuzufügen. Das geht natürlich nicht für alle neuen Features, aber für viele gibt es Nachbauten. Aber dieses zusätzliche Javascript bläht natürlich die Webseite auf und es ist auch nicht so schnell wie die native Unterstützung des Browsers. Aber was tut man nicht alles dafür, neue Features nutzen zu können ohne einen Teil seiner Besucher zu verärgern.

Hier eine schöne Liste der aktuell verfügbaren Polyfills und Shims:

• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills