Erstellen von Anwendungen mit HTML5

Kein Browser bleibt unberücksichtigt: Eine Strategie für die Einführung von HTML5

Brandon Satrom

Beispielcode herunterladen.

Es gibt viele faszinierende neue Funktionen in HTML5. Mit einem neuen Markup, neuen CSS-Funktionen und neuen JavaScript-APIs nimmt die Menge an Möglichkeiten im Web sprunghaft zu. Fügen Sie den ständigen Wettbewerb unter den Browseranbietern hinzu, und die Liste der faszinierenden neuen Funktionen wächst beinahe täglich. Angefangen bei nächtlichen Builds über Versionen für Entwicklerkanäle bis hin zu regelmäßigen Plattformvorschauen unterliegen Browser schnellen Änderungen, und die Webentwickler folgen diesen Trends.

Entwickler- und Browsercommunitys unterstützen zwar das neue HTML5 und sorgen nach besten Kräften für einen Hype. Die Mehrzahl der Internetbenutzer verwenden die brandneuen Browser und Versionen jedoch nicht, die wir verwenden. Wenn Sie Webentwickler in einem großen Entwicklungsunternehmen oder in einem Unternehmen mit einer großen Benutzerbasis sind, dann wissen Sie dies wahrscheinlich bereits. Auch wenn Sie in einem kleinen Unternehmen oder in einem Startupunternehmen arbeiten, das einige Dienste über das Web bereitstellt, verbringen Sie wahrscheinlich eine Menge Zeit damit, sicherzustellen, dass Ihre Website mit so vielen Browsern und Browserversionen wie möglich kompatibel ist.

Angesichts dieser Wirklichkeit lässt sich HTML5 leicht anhand der Frage betrachten, ob es für die Verwendung durch Sie bereit ist, sondern ob Sie für seine Verwendung bereit sind. Nehmen wir beispielsweise an, dass Sie eine Seite mit einigen der neuen semantischen Tags erstellt haben (wie <header> und <article>) und einige neue CSS-Funktionen (wie border-radius and box-shadow) sowie ein <canvas>-Element hinzugefügt haben, um das HTML5-Logo auf Ihrer Seite zu zeichnen.

In neueren Browsern wie Internet Explorer 9, Firefox 4 oder höher oder Google Chrome wird diese Seite wie in Abbildung 1 gezeigt gerendert. Wenn Sie diese Seite jedoch in Internet Explorer 8 oder einer früheren Version laden, wird die Seite ähnlich wie in Abbildung 2 gezeigt aussehen: eine stark beschädigte Seite.

Abbildung 1 Semantische Seite mit Styles und einem HTML5-<canvas>-Element in Internet Explorer 9

Abbildung 2 Die gleiche semantische Seite ohne Styles und ohne <canvas> in Internet Explorer 8

Ich würde Ihnen keinen Vorwurf machen, wenn Sie sich all die großartigen Funktionen in HTML5 ansehen und nach einer Erfahrung wie dieser sagen, dass es am besten ist, etwas abzuwarten. Es ist leicht, zu dem Schluss zu kommen, dass HTML5 noch nicht für Sie oder Ihre Benutzer bereit ist, ob es an und für sich bereit ist oder nicht.

Bevor Sie nun die Entscheidung treffen, sich HTML5 das nächste Mal im Jahr 2022 anzusehen, sollten Sie den Rest dieses Artikels lesen. Mein Ziel in diesem Monat besteht darin, Ihnen einige praktikable Strategien für die Einführung von HTML5-Strategien heute an die Hand zu geben, ohne die in Abbildung 2 gemachten Erfahrungen zu machen. In diesem Artikel werde ich die folgenden Themen behandeln:

1. Funktionserkennung im Vergleich zur Benutzeragentenerkennung (User Agent Sniffing, UA Sniffing)
2. Polyfillverfahren mit JavaScript
3. Sinnvolle Herabstufung

Diese drei Themen sollten Ihnen viel darüber erklären, wie Sie Websites für ein breites Spektrum von Browsern erstellen können. Am Ende dieses Artikels werden Sie über eine solide Strategie für die zuverlässige und umgehende Einführung von HTML5-Technologien verfügen. Sie werden außerdem über einige Tools verfügen, mit denen Sie Websites progressiv für neuere Browser optimieren können, während Sie die gleichen Websites für ältere Browser sinnvoll herabstufen können.

Die Bedeutung der Funktionserkennung

Um eine stabile und konsistente Umgebung über mehrere Browser bereitzustellen, müssen Entwickler häufig Informationen über die Browser der Benutzer erhalten. Historisch war es üblich, diese Informationen mittels JavaScript wie folgt zu erhalten:

var userAgent = navigator.userAgent;
 
if (userAgent.indexOf('MSIE') >= 0) {
  console.log("Hello, IE user");
} else if (userAgent.indexOf('Firefox') >= 0) {
  console.log("Hello, Firefox user");
} else if (userAgent.indexOf('Chrome') >= 0) {
  console.log("Hello, Chrome user");
}

Diese Technik wird Benutzeragentenerkennung (User Agent Sniffing, UA Sniffing) genannt und wird verbreitet zur Erkennung der Browser verwendet, die eine Seite abrufen. Die Logik ist, dass Sie durch die Ermittlung der Browser der Benutzer (z. B. Internet Explorer 7) Entscheidungen zur Laufzeit treffen können, welche Merkmale der Website aktiviert oder deaktiviert werden sollen. Das UA Sniffing läuft darauf hinaus, dass Sie den Browser fragen: "Wer ist du?" (Eine detaillierte Analyse des UA Sniffing und anderer Erkennungstechniken finden Sie unter bit.ly/mlgHHY.)

Das Problem bei diesem Ansatz ist, dass Browser lügen können. Die UA-Zeichenfolge ist eine durch den Benutzer konfigurierbare Information, die kein zu 100 % korrektes Bild des betreffenden Browsers bereitstellt. Darüber hinaus fügten mit zunehmender Verbreitung dieser Technik zahlreiche Browseranbieter den eigenen UA-Zeichenfolgen Inhalte hinzu, die Skripts zu falschen Annahmen zum verwendeten Browser führten, sodass die Erkennung umgangen wurde. Einige Browser enthalten nun sogar die Möglichkeit, die Benutzern mit wenigen Mausklicks das Ändern der UA-Zeichenfolge ermöglichen.

Ziel des UA Sniffing war jedoch nie, den Browser eines Benutzers sowie dessen Version zu ermitteln. Und diese Technik dient mit Sicherheit nicht dazu, Ihnen eine Möglichkeit zu geben, Ihren Benutzern mitzuteilen, einen anderen Browser herunterzuladen, wenn Sie einen bestimmten Browser nicht mögen, auch wenn diese Technik von einigen Websites hierfür verwendet wurde. Benutzer können den verwendeten Browser frei wählen. Unsere Verantwortung als Entwickler besteht darin, Benutzern eine möglichst zuverlässige und konsistente Umgebung bereitzustellen, und nicht darin, ihnen einen bevorzugten Browser aufzuzwingen. Ziel des UA Sniffing war stets, Ihnen ein korrektes Bild der Funktionen oder Merkmale bereitzustellen, die Sie innerhalb des aktuellen Browsers des Benutzers nutzen können. Die Kenntnis des Browsers selbst ist nur das Mittel für den Erhalt dieser Informationen.

Heute gibt es Alternativen zum UA Sniffing. Eine zunehmend verbreitetere Alternative, teilweise dank jQuery und Modernizr ist die Objekt- oder Funktionserkennung. Diese Begriffe sind beinahe austauschbar. Für diesen Artikel werde ich jedoch den Begriff "Funktionserkennung" verwenden.

Ziel der Funktionserkennung ist es, zu ermitteln, ob ein bestimmtes Merkmal oder eine bestimmte Funktion durch den aktuellen Browser des Benutzers unterstützt wird. Wenn das UA Sniffing auf die Frage "Wer bist du" hinausläuft, dann läuft die Funktionserkennung auf die Frage "Was kannst du" hinaus. Dies ist eine viel direktere Frage und eine zuverlässigere Möglichkeit, wie Sie Ihren Benutzern konditionale Funktionalität bereitstellen können. Es ist viel schwieriger für Benutzer und Browser, die Funktionsunterstützung zu fälschen oder falsche Berichte hierzu zu erstellen, wenn die Skripts zur Funktionserkennung korrekt implementiert werden.

Manuelle Funktionserkennung

Wie sieht die Funktionserkennung im Vergleich zum UA Sniffing aus? Um diese Frage zu beantworten, betrachten wir die Probleme, die bei der Anzeige der in Abbildung 1 gezeigten HTML5-Seite in Internet Explorer 8 anstelle von Internet Explorer 9 entstanden. Das Markup für diese Seite wird in Abbildung 3 aufgelistet.

Abbildung 3 Eine Seite mit dem neuen semantischen HTML5-Markup

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>My Awesome Site</title>
      <style>
        body { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }
        header h1 { font-size: 36px; margin-bottom: 25px; }
        article 
        {
          background: lightblue;
          margin-bottom: 10px;
          padding: 5px;
          border-radius: 10px;
          box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
        }
        article h1 { font-size: 12px; }
      </style>
    </head>
    <body>
      <header><h1>My Awesome Site</h1></header>
      <article>
        <header><h1>An Article</h1></header>
        <p>Isn't this awesome?</p>
      </article>
      <canvas width="250" height="500"></canvas>
    </body>
    <script src="../js/html5CanvasLogo.js" type="text/javascript"></script>  
    </html>

Die Unterschiede zwischen Internet Explorer 9 und Internet Explorer 8 sind drastisch, wie in den Abbildungen 1 und 2 gezeigt. Der Seite fehlen sämtliche Styles, als ob das CSS für diese Seite nicht vorhanden ist. Darüber hinaus fehlt das HTML5-Logo unten auf der Seite. Jedes dieser Probleme kann einfach behoben werden, und die Funktionserkennung ist der erste Schritt zur Identifizierung des Problems.

Der Grund für beide Probleme ist einfach: <header>, <article> und <canvas> sind für Internet Explorer 8 keine gültigen HTML-Elemente und daher kann ich nicht mit ihnen arbeiten. Um das Problem mit <canvas> zu lösen, frage ich den Browser über JavaScript, ob das <canvas>-Element und dessen JavaScript-APIs unterstützt werden, statt UA Sniffing für die Ermittlung des verwendeten Browsers und der verwendeten Browserversion zu verwenden. Meine Funktionsprüfung für <canvas> sieht wie folgt aus:

!!document.createElement('canvas').getContext

Diese Anweisung führt einige Aufgaben durch. Zunächst verwendet sie die doppelte Negierung (!!), um durchzusetzen, dass nicht definierte Werte als "false" evaluiert werden. Anschließend wird ein neues Leinwandelement erstellt, das DOM angefügt wird. Schließlich ruft sie getContext auf, eine neue Funktion, die für <canvas>-Elemente verfügbar ist, um die Leinwand-API mittels JavaScript zu manipulieren. Bei Verwendung von Internet Explorer 9 gibt diese Anweisung "true" zurück. Bei Verwendung von Internet Explorer 8 gibt getContext "undefined" zurück, sodass der Wert als "false" evaluiert wird.

Dies sind die Grundlagen der Funktionserkennung. Mit dieser und ähnlichen Anweisungen steht mir nun eine zuverlässigere Möglichkeit bereit, die Funktionsunterstützung durch den Browser abzufragen. Weitere Informationen zur manuellen Funktionserkennung finden Sie unter diveintohtml5.info/everything.html.

Verwenden von Modernizr für die Funktionserkennung

Die manuelle Funktionserkennung ist mit Sicherheit eine Verbesserung im Vergleich zum UA-Sniffing. Bei diesem Ansatz müssen Sie jedoch weiterhin die Schwerstarbeit der Erkennung der Verfügbarkeit einer Funktion und der Entscheidung leisten, was Sie tun, wenn die Funktion nicht vorhanden ist. Das Leinwandbeispiel war ein einfaches Beispiel, das nur eine einzige Codezeile erforderte. Dies ist jedoch nicht für alle Funktionen der Fall, die Sie möglicherweise erkennen möchten. Außerdem ist der Erkennungscode nicht für alle Browser gleich. Das Erkennen der Unterstützung für CSS3-Module, die ich zuvor verwendet habe (Rahmen-Radius und Feld-Schattierung) kann etwas aufwendiger sein.

Dankenswerterweise bietet Modernizr (modernizr.com) einen besseren Ansatz. Modernizr ist eine JavaScript-Bibliothek, die "… die Verfügbarkeit systemeigener Implementierungen für Webtechnologien der nächsten Generation erkennt, d. h. von Funktionen, die aus den HTML5- und CSS3-Spezifikationen stammen." Das Hinzufügen eines Verweises auf Modernizr in Ihren Seiten stellt Ihnen vier wichtige Funktionen bereit:

1. Eine umfassende Liste der unterstützen Funktionen, die Ihrem Markup auf intelligente Weise hinzugefügt wird, sodass konditionale CSS-Bedingungen ermöglicht werden.
2. Ein JavaScript-Objekt, das die skriptbasierte Funktionserkennung unterstützt.
3. Hinzufügung aller neuen HTML5-Tags zu DOM zur Laufzeit, sodass Internet Explorer 8 und frühere Versionen von Internet Explorer diese nutzen können (mehr dazu später).
4. Ein Skriptladeprogramm, um Polyfills bedingungsabhängig in Ihre Seiten laden zu können.

Wir werden den ersten Punkt in diesem Artikel nicht weiter behandeln. Ich empfehle Ihnen jedoch, sich auf der Website modernizr.com in der Dokumentation über dieses und die anderen Merkmale zu informieren.

Das zweite Element unterstützt Sie dabei, diese Codezeile:

!!document.createElement('canvas').getContext

In diese Codezeile zu ändern:

Modernizr.canvas

Dadurch wird ein boolescher Wert zurückgegeben, der anzeigt, ob das Leinwandelement auf der Seite unterstützt wird. Der große Vorteil der Verwendung von Modernizr im Vergleich zur Implementierung einer eigenen Funktionserkennung besteht darin, dass es sich bei Modernizr um eine gut getestete, stabile und weit verbreitete Bibliothek handelt, die die Schwerstarbeit für Sie leistet. Twitter, Google, Microsoft und zahlreiche weitere Anbieter verwenden Modernizr, und Sie können dies auch. Mit dem ASP.NET MVC 3 Tools Update (April 2011) liefert Microsoft Modernizr sogar im Paket mit den neuen ASP.NET MVC-Anwendungen aus. Natürlich habe ich zu diesem Zeitpunkt bisher nur erkannt, ob das Leinwandelement unterstützt wird. Ich habe noch nichts dazu gesagt, was als nächster Schritt erfolgen soll. Da ich anhand der Funktionserkennung nun weiß, ob eine Funktion für einen Browser verfügbar ist oder nicht, besteht ein häufig angewendeter nächster Schritt darin, eine konditionale Logik zu erstellen, die die Ausführung eines bestimmten Codes verhindert, wenn eine Funktion nicht vorhanden ist, oder einen alternativen Pfad ausführt, wie in diesem Beispiel:

 

if (Modernizr.canvas) {
  // Execute canvas code here.
}

Das Hinzufügen von Funktionen zu Ihrer Website auf der Basis des Vorhandenseins zusätzlicher Browserfunktionen wird als "progressive Optimierung" bezeichnet, da Sie die Umgebung für einen funktionsreicheren Browser optimieren. Am anderen Ende des Spektrums befindet sich die "sinnvolle Herabstufung", sodass das Fehlen bestimmter Funktionen nicht zu Fehlern oder einem Absturz des Browsers führt, sondern dem Benutzer eine reduzierte oder alternative Funktionalität bereitstellt. Im Fall älterer Browser muss die sinnvolle Herabstufung nicht die vordefinierte Option darstellen. In vielen Fällen ist es noch nicht einmal die beste Option. Stattdessen können Sie mithilfe von Modernizr häufig einen der vielen verfügbaren Browser-Polyfills verwenden, um Browsern HTML5-ähnliche Funktionen hinzuzufügen, die kein HTML5 unterstützen.

Was sind Polyfills?

Nach der Modernizr-Website ist ein Polyfill ein "JavaScript-Shim, das die Standard-API für ältere Browser repliziert". Der Begriff "Standard-API bezieht sich auf eine HTML5-Technologie oder -Funktion, wie z. B. die Leinwand. Der Begriff "JavaScript-Shim" impliziert, dass Sie dynamisch Java-Code oder -Bibliotheken laden können, die diese APIs in Browsern nachahmen, die diese nicht unterstützen. Beispielsweise würde das Polyfill "Geolocation" dem Navigatorobjekt das globale Geolozierungsobjekt hinzufügen. Außerdem würde es die Funktion getCurrentPosition und das das Rückrufobjekt "Cords" hinzufügen, wie in der World Wide Web Consortium (W3C)-Geolozierungs-API definiert. Da das Polyfill eine Standard-API nachahmt, können Sie auf der Basis dieser API für alle Browser zukunftssicher entwickeln. Das Polyfill wird entfernt, wenn die Unterstützung eine kritische Menge erreicht hat. Es ist keine zusätzliche Arbeit erforderlich.

Durch das Hinzufügen eines Verweises auf Modernizr auf meiner Seite erhalte ich für das Bespiel in Abbildung 3 sofort einen Vorteil durch das Polyfillverfahren. Die Seite wurde ohne Styles gerendert, da Internet Explorer 8 Tags wie <article> und <header> nicht erkennt. Da diese nicht erkannt wurden, wurden sie DOM nicht hinzugefügt. Dies ist das Verfahren, wie CSS Elemente für das Anwenden von Styles auswählt.

Wenn ich das Tag <script> hinzufüge und auf meiner Seite auf Modernizr verweise, werden auf meiner Seite Styles angewendet, wie in Abbildung 4 gezeigt. Ich erziele diesen Vorteil, da Modernizr DOM manuell alle neuen HTML5 mittels JavaScript (document.CreateElement(‘nav’)) hinzufügt. Dadurch können die Tags ausgewählt und Styles auf der Basis von CSS angewendet werden.

Abbildung 4 Eine HTML5-Seite in Internet Explorer 8, die mittels Modernizr angezeigt wird

Außer zur Unterstützung neuer HTML5-Elemente stellt die Modernizr-Bibliothek keine weiteren Polyfills bereit. Diese müssen Sie selbst bereitstellen, entweder über eigene Skripts oder anhand der ständig wachsenden Liste von Optionen, die auf der Modernizr-Website dokumentiert sind. Mit der Version 2.0 stellt Modernizr ein konditionales Skriptladeprogramm bereit (auf der Basis von yepnope.js – yepnopejs.com), mit dessen Hilfe Sie Polyfillbibliotheken dann asynchron herunterladen können, wenn diese benötigt werden. Die Verwendung von Modernizr mit einer oder mehreren Polyfillbibliotheken, die die von Ihnen benötigten Funktionen bereitstellen, stellt eine leistungsfähige Kombination dar.

Verwenden von Polyfills zur Simulierung von HTML5-Funktionalität

Im Fall der Leinwand können Sie die Polyfillunterstützung für Internet Explorer 8 und frühere Versionen mittels Modernizr und einer JavaScript-Bibliothek namens excanvas erzielen. Diese fügt Internet Explorer 6, Internet Explorer 7 und Internet Explorer 8 Leinwandunterstützung auf API-Ebene hinzu. Sie können excanvas von bit.ly/bSgyNR herunterladen. Nachdem Sie die Bibliothek dem Skriptordner hinzugefügt haben, können Sie einem Skriptblock auf Ihrer Seite Code hinzufügen, wie in Abbildung 5 gezeigt.

Abbildung 5 Verwendung von Modernizr für die Polyfillunterstützung der Leinwand

 

Modernizr.load({
  test: Modernizr.canvas,
  nope: '../js/excanvas.js',
  complete: function () {
    Modernizr.load('../js/html5CanvasLogo.js');
  }
}]);

Hier verwende ich das Modernizr-Skriptladeprogramm, um drei Dinge anzugeben:

1. Einen Booleschen Ausdruck zum Testen
2. Einen Pfad zu einem Skript, das geladen werden soll, wenn der Ausdruck als "False" evaluiert wird
3. Einen Rückruf, der ausgeführt werden soll, wenn die Prüfung oder das Laden des Skripts abgeschlossen sind

Im Zusammenhang mit der Leinwand ist dies alles, was ich benötige, um meiner Anwendung etwas Intelligenz und Polyfillfunktionalität hinzuzufügen. Modernizr lädt excanvas.js asynchron nur für Browser, die die Leinwand nicht unterstützen. Anschließend wird meine Skriptbibliothek geladen, um das HTML5-Logo auf der Seite zu zeichnen.

Betrachten wir ein weiteres Beispiel, um die Vorteile von Modernizr zu unterstreichen. Die detailorientierten Entwickler unter Ihnen haben vielleicht bemerkt, dass die Seite in Abbildung 4 nicht genau der ursprünglichen Seite entspricht, die in Internet Explorer 9 gerendert und in Abbildung 1 gezeigt wurde. Auf der Seite fehlt in Internet Explorer 8 die Feldschattierung und die abgerundeten Ecken. Ich kann diese großartige Website jedoch nicht ohne diese Merkmale veröffentlichen und wende mich daher erneut an Modernizr, um Unterstützung zu erhalten.

Wie im Fall der Leinwand teilt mir Modernizr auch in diesem Fall mit, dass die CSS3-Module nicht unterstützt werden und es meine Aufgabe ist, eine Polyfillbibliothek bereitzustellen. Glücklicherweise gibt es eine Bibliothek namens PIE (css3pie.com), die beide Module in einer einzigen Bibliothek bereitstellt.

Um Unterstützung für Rahmen-Radius und Feld-Schattierung bereitzustellen, kann ich meinem Skript den Code aus Abbildung 6 hinzufügen, nachdem ich PIE heruntergeladen habe. Dieses Mal teste ich, ob Rahmen-Radius oder Feld-Schattierung unterstützt werden (und nehme nicht an, dass beide Merkmale stets unterstützt oder stets nicht unterstützt werden). Wenn eines der beiden Merkmale nicht unterstützt wird, lade ich dynamisch PIE.js herunter. Nachdem PIE geladen wurde, führe ich eine jQuery aus, um alle meine <article>-Tags auszuwählen, und rufe die Funktion PIE.attach auf. Diese fügt Unterstützung für die Styles Rahmen-Radius und Feld-Schattierung hinzu, die in meinem CSS bereits definiert sind. Das Endergebnis wird in Abbildung 7 gezeigt.

Abbildung 6 Verwendung von Modernizr und PIE für das Hinzufügen von CSS3-Unterstützung

Modernizr.load({
  test: Modernizr.borderradius || Modernizr.boxshadow,
  nope: '../js/PIE.js',
  callback: function () {
    $('article').each(function () {
      PIE.attach(this);
    });
  }
});

Abbildung 7 CSS3-Unterstützung mit Modernizr und PIE

Verwendung von Polyfills zur Unterstützung der sinnvollen Herabstufung

Zusätzlich zu der hier besprochenen Verwendung der Polyfilltechniken können Sie Modernizr auch zur Unterstützung von Fällen verwenden, in denen Sie Ihre Anwendung sinnvoll herabstufen möchten, anstatt Polyfillunterstützung für eine andere Bibliothek bereitzustellen.

Nehmen wir an, ich habe auf einer Webseite ein Bing Maps-Steuerelement und möchte Geolocation verwenden, um den aktuellen Standort des Benutzers zu erfahren und dann diesen Standort als Stecknadel auf dem Kartenelement anzuzeigen. (Ich werde Geolocation in einem zukünftigen Artikel ausführlich behandeln.)

Die Geolozierung wird in den aktuellen Versionen aller Browser unterstützt, jedoch nicht in älteren Browsern. Es ist außerdem etwas aufwendiger, vollständige Unterstützung für eine Geolozierungs-API nur über JavaScript bereitzustellen. Obwohl es Polyfills für Geolocation gibt, habe ich mich entschieden, meine Anwendung sinnvoll herabzustufen. Wenn der Browser eines Benutzers die Geolozierung nicht unterstützt, stelle ich ein Formular bereit, in das der Benutzer den Standort manuell eingeben kann. Diese Angaben verwende ich für die Positionierung auf der Karte.

Mit Modernizr handelt es sich um einen einfachen Ladeaufruf für eines von zwei Skripts, die von mir erstellt wurden, wie in Abbildung 8 gezeigt. In diesem Fall teste ich die Eigenschaft Modernizr.geolocation. Wenn "true" ("ja"), lade ich das Skript fullGeolocation.js script, das die Geolozierungs-API verwendet, um den Standort zu ermitteln (mit der Genehmigung des Benutzers) und diesen auf einer Karte anzuzeigen, wie in Abbildung 9 gezeigt. Wenn der Test "false" ("nein") zurückgibt, lade ich ein Rückversicherungsskript, das ein Adressenformular auf der Seite anzeigt. Wenn der Benutzer dieses Formular übermittelt, verwende ich die angegebene Adresse, um dessen Position auf der Karte anzuzeigen, wie in Abbildung 10 gezeigt. Auf diese Weise bietet meine Seite die vollständige Funktionalität der modernen Browser und eine sinnvoll herabgestufte Funktionalität im Fall älterer Browser.

Abbildung 8 Verwendung von Modernizr für die sinnvolle Herabstufung

Modernizr.load({
  test: Modernizr.geolocation,
  yep: '../js/fullGeolocation.js',
  nope: '../js/geolocationFallback.js'
});

Abbildung 9 Standortanzeige mittels Geolocation

Abbildung 10 Rückversicherungsunterstützung für Geolocation

Es ist einfach, sich angesichts der Tatsache, dass viele Benutzer noch ältere Browser verwenden, gegen die Verwendung der erweiterten Funktionen von HTML5 für Ihre Website zu entscheiden. Es sind jedoch bereits einige hervorragende Lösungen verfügbar, die Sie nicht nur bei der sinnvollen Herabstufung, sondern auch bei der Verfügbarmachung der neuen Funktionen in älteren Browsern unterstützen, sodass Ihre Benutzer bereits jetzt die Vorteile von HTML5 nutzen können. In diesem Artikel habe ich Ihnen gezeigt, wie Sie mittels Funktionserkennung, Modernizr und des Pofyfillverfahrens für die wachsende Zahl von Benutzer mit modernen Browsern bereits jetzt HTML5 einführen können und gleichzeitig nicht die Benutzer mit älteren Browsern vernachlässigen müssen.

Brandon Satrom arbeitet als Developer Evangelist für Microsoft in Austin. Texas. Sie finden seinen Blog unter UserInexperience.com. Sein Twitterkonto ist twitter.com/BrandonSatrom.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Damian Edwards, Scott Hunter und Clark Sell.