PHPGangsta - Der praktische PHP Blog

PHP Blog von PHPGangsta


Der Stand von HTML5

with 4 comments

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:

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:

Written by Michael Kliewe

August 10th, 2011 at 9:44 am

4 Responses to 'Der Stand von HTML5'

Subscribe to comments with RSS or TrackBack to 'Der Stand von HTML5'.

  1. http://www.findmebyip.com/litmus noch als Ergänzung zu der Liste mit Webseiten. Von Modernizr bin ich persönlich wenig überzeugt. Ich hab mir da ne Alternative zu head.js geschrieben, wo ich einfach weitere Tests rein laden kann wenn nötig. 🙂

    Oliver

    10 Aug 11 at 11:22

  2. Noch schöner gehen die Abfragen mit yepnope.js (http://yepnopejs.com/), dieses Testingframework hat modernizr schon integriert und man kann auf die Testergebnise reagieren, zum Beispiel durch nachladen von JS Dateien die die gewünschte Funktionalität nachimplementieren…

    newLoki

    11 Aug 11 at 14:32

  3. Solange man folgenden Code:

    in den Head jeder HTML 5 Seite schreibt, gehen alle Browser von IE6 bis IE8. IE9 hat ja HTML5 bereits enthalten.

    Robbyn

    22 Aug 11 at 15:15

  4. http://html5shiv.googlecode.com/svn/trunk/html5.js

    Sorry habe nicht gesehen das man kein Code einfügen kann.

    Robbyn

    22 Aug 11 at 15:16

Leave a Reply

You can add images to your comment by clicking here.