Zum Inhalt wechseln

- - - - -

Modernizr und Polyfills: HTML5 Webseiten für alte und neue Browser

Jul 12 2012 01:00 | M.Bohlen in Webmaster
HTML5 JavaScript Modernizr Polyfill W3C

HTML5 ist der aktuelle Webdesigntrend. Auch wenn der Standard offiziell noch nicht verabschiedet ist, unterstützen aktuelle Browser bereits HTML5 Funktionen. Durch sogenannte Polyfills müssen alte Browser bei HTML5 Webseiten nicht außen vor bleiben. Bei der Umsetzung von Polyfills hilft Modernizr, das auf Basis von JavaScript in der Lage ist, die Unterstützung von HTML5 Features browserübergreifend zu prüfen. Was Polyfills sind und wie Modernizr hilft, professionelle HTML5 Webseiten zu erstellen, erklärt dieser Artikel.
Keine einheitliche HTML5 Unterstützung bei Browsern
HTML5 löst HTML 4,  XHTML 1.0 sowie den Standard DOM HTML Level 2 ab und schafft tolle Möglichkeiten beim Entwurf von Webseiten. Viele Features, die bei HTML 4.01 noch per Plugins oder externen JavaScript-Bibliotheken ergänzt werden müssen, sind bei HTML5 bereits integriert. Verabschiedet ist der neue HTML Standard offiziell noch nicht, nach dem Zeitplan des W3C soll dies 2014 erfolgen. Viele Browserhersteller und Webseitenbetreiber sind schneller und nutzen HTML5 schon heute. Allerdings unterstützen nicht alle Browser sämtliche Features. Webseiten, die HTML5 einsetzen, müssen deshalb vorsorgen wenn die Seiten browserübergreifend wunschgemäß funktionieren sollen. Das gilt insbesondere für alte Browser, die kein HTML5 unterstützen. Dabei werden HTML5 Polyfills eingesetzt, welche nicht unterstützte HTML5 Features einfach durch gängige Browser-Plugins (zum Beispiel Flash-Plugin) oder mittels Javascript nachbauen.

HTML5 Features erkennen
Was sich vielleicht erstmal gar nicht so kompliziert anhört, bedarf jedoch etwas Aufwand. Die Programmierung der Webseite muss nämlich erkennen, welche Features der Browser des aktuellen Besuchers unterstützt. Eine Liste mit unterstützten Funktionen kann von dem Browser in der Praxis nicht angefordert werden. Diese Aufgabe löst die Javascript Bibliothek Modernizr. Das Tool kann unter http://modernizr.com/download/ heruntergeladen werden. Dabei ist es ratsam, die Downloaddatei individuell zu konfigurieren und nur die benötigten Funktionen der Downloaddatei hinzuzufügen. So werden die Datenmenge der Webseite und der Traffic des eigenen Servers nicht unnötig vergrößert und die Performance der Webpage optimiert. Auf der Webseite ist die Konfiguration des Downloadpaketes über einfache Checkboxen möglich. Anschließend muss diese Datei noch auf den Webserver übertragen werden.

Modernizr einbinden
Die Downloaddatei wird dann per

<script src="modernizr-2.5.min.js"></script>


vor dem schließenden Head-Tag </head> in die Webseite eingebunden. Dabei ist darauf zu achten, dass der Dateiname – im Codebeispiel „modernizr-2.5.min.js“ mit dem Dateinamen und dem Pfad der auf den eigenen Server aufgespielten Version übereinstimmt.

Das HTML-Tag muss dann noch so aussehen:
<html class="no-js">

Wenn Modernizr dann aktiv ist, wird ein Java-Script Objekt erzeugt und die Klasse no-js im HTML-Tag durch die Klasse js ersetzt. Der HTML-Tag kann dann zum Beispiel so aussehen:

<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d video audio localstorage sessionstorage applicationcache fontface">

Diese erzeugte Klasse liefert nun die Informationen, dass der Browser zum Beispiel canvas, canvastext, rgba und hsla unterstützt. Durch no-geolocation ist jetzt auch bekannt, das Geolocation nicht unterstützt wird.

Damit diese Informationen in den Webseiten eingesetzt werden können, bietet Modernizr Funktionen zum Abfragen der Features an. Über einen yepnope.js (yepnopejs.com) basierenden Scriptloader werden entsprechende Skripte ausgeführt.

Eine Abfrage kann dann so implementiert werden:

Modernizr.load({
test:Modernizr.geolocation,
yep:'../js/UseHTML5Geolocation.js',
nope:'../js/geolocationFallback.js'
});
Unterstützt der Browser geolocation, dann wird ein Javascript-File mit dem Namen UseHTML5Geolocation.js geladen. Wird das Feature nicht unterstützt, so wird der Polyfiller – in diesem Beispiel die Datei geolocationFallback.js – geladen.

Polyfills implementieren
Die passende Implementierung liefert Modernizr selbst allerdings nicht mit. Diese muss jeder Webentwickler selbst implementieren. Es gibt aber umfangreiche Polyfiller Lösungen, wie zum Beispiel Webshims Lib, durch die viel Arbeit entfallen kann.


0 Kommentare

Allgemeines:

Wem die auf Neandertaler.net angebotene Hilfe nicht ausreicht und sich professionelle Angebote einholen möchte, wird hier fündig: Software in Hannover.

Seit 2003 bietet Neandertaler.net Services für Webmaster an. Völlig kostenlos sind unsere Scripte für Webmaster und alle die es werden wollen:
Kontaktscript und Newsscript.

Login mit Facebook oder Twitter

Du hast bereits einen Facebook oder Twitter Account? Dann kannst du dich mit diesem beim registrieren auf unserer Seite einloggen.



Neueste Forenbeiträge


Neueste Kommentare


  1. Neandertaler.net - Die Webmastercommunity
  2. → Artikel
  3. → Startseite
  4. → Webmaster
  5. → Artikel: Modernizr und Polyfills: HTML5 Webseiten für alte und neue Browser