Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML5 und CSS3 Tipps
02.11.2012

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

Kategorie(n): HTML5 und CSS3 Tipps

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

51

Kommentare:

08.März2013

Hallo Harry,
mit dem letzten Absatz sprichst Du mir voll aus der Seele. Zumal ich den modernizer völlig falsch verstanden hatte am Anfang. Ich hatte gedacht, es werden Funktionen die die neuen Browser können, mit irgendwelchen Tricks nachgerüstet, so dass es auch im alten IE6/7 zB einen Box-Shadow und runde Ecken gibt. Dass aber nur abgefragt wird, ob der Browser das unterstützt und man dann selbst Alternativen anbieten muss, halte ich für völlig übertrieben. Klar bei solchen CI-Riesen wie Mercedes etc. muss das vielleicht sein, aber für das Gros der Webseiten dürfte es nicht weltbewegend sein, ob die Ecken nun rund oder eckig sind, ob es einen Schatten gibt oder nicht. Ich werde auch weiterhin so entwicklen, dass man es im IE6 *benutzten* kann und noch halbwegs aussieht und ansonsten die neuen Features ohne Fallback einsetzen ...
Danke für diesen Artikel!

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.