HTML5 und CSS3 für ältere Browser ermöglichen über Feature Detection

Nachdem in diesem Blog schon einiges über die Unterstützung von HTML5-Tags in älteren Browsern - insbesondere für die älteren Versionen des Internet Explorers (IE6, IE7 und IE8) - beschrieben wurde, möchte ich heute einen anderen Ansatz vorstellen. Bis jetzt wurde immer über die jeweilige Browserversion auf die mögliche Unterstützung von HTML5-Tags geschlossen (Browser Detection). Eine weitaus elegantere und genauere, aber deutlich komplexere, Methode ist Feature Detection.

Bei der Feature Detection werden die konkreten Eigenschaften des Browsers abgefragt und entsprechend der Verfügbarkeit explizit für die benötigten Features Lösungen implementiert. So kann z.B. explizit abgefragt werden, ob ein Browser Geolocations unterstützt oder ob Canvas-Elemente möglich sind. Es können die passenden Video-Formate erkannt oder die internen Prüfmöglichkeiten von Formularfeldern abgefragt werden, um nur für die Input-Elemente, die nicht HTML5-tauglich sind, Ersatzlösungen zu implementieren.

Feature detection für html5 und css3

Feature Detection ist allerdings nicht nur auf HTML5-Tags beschränkt, sondern ebenso für CSS3-Features möglich. So lässt sich die Verfügbarkeit von Eigenschaften wie text-shadow, multiple backgrounds und border radius prüfen, um darauf zu reagieren.

Verwendung von Modernizr und Yepnope

Im Web findet man eine Vielzahl von Scripten, die Feature Detection realisieren. Meist basieren Sie auf verschiedene Javascript-Frameworks wie z.B. jQuery. Mein persönlicher Favorit ist Modernizr. Modernizer bietet im Downloadbereich die Möglichkeit, ganz individuell nur die benötigten Features auszuwählen, die man für seine Anwendung benötigt. Als Ergebnis wird das entsprechende Script generiert und zum Download angeboten. Modernizr enthält auch html5shiv und yepnope.js als conditional loader.

Muss immer jedes Feature in jedem Browser unterstützt werden?

Generell muss man aber diesen Trend auch kritisch hinterfragen. Man versucht durch den Einbau von zusätzlichen Scripten Features zur Verfügung zu stellen, die der jeweilige Browser eigentlich nicht unterstützt. Dadurch wir die Komplexität der Webseiten signifikant erhöht. Dies wirkt sich negativ auf die Performance aus, d.h. mehr Requests, es muss ein höheres Datenvolumen transferiert werden und der Seitenaufbau dauert natürlich länger, da die zusätzlich geladenen Scripte auch zusätzliche Laufzeit mit sich bringen. Im Endeffekt wirken sich längere Ladezeiten auch negativ auf das Ranking der Webseiten aus.
Und was passiert, wenn der Anwender Javascript deaktiviert hat oder sich einfach nur der Browser „verschluckt“? In diesem Fall nützt die beste Feature Detection nichts.
Insofern sei schon die Frage erlaubt, ob z.B. für die Eigenschaft text-shadow unbedingt ein zusätzliches Script notwendig sein muss. Wenn der Browser die Eigenschaft text-shadow nicht unterstützt, dann gibt es eben keinen text-shadow. Dann sieht die Webseite in den betroffenen Browsern etwas einfacher aus. Es muss nicht jede Webseite in jedem Browser identisch dargestellt werden. Sie muss lesbar und vor allem anwenderfreundlich sein.