HTML5 in älteren Browsern mit Google Chrome Frame rendern

Einleitung

HTML5 erweitert die Toolbox für Webentwickler um eine Vielzahl neuer Tools, darunter:

  • Neue, leistungsstärkere JavaScript APIs
  • SVG für Vektorgrafiken
  • Canvas für 2D und mit WebGL-3D-Grafiken
  • CSS3 für abgerundete Ecken, Farbverläufe usw.
  • Ausdrucksstärkere Markups

Diese Liste ist natürlich nicht umfassend. Die Webplattform hat sich enorm weiterentwickelt und die Lücke zwischen alten und modernen Browsern wird immer größer.
Alle großen Desktop-Browser unterstützen mittlerweile einen wesentlichen Teil von HTML5 in der neuesten Version, aber alte Browser, die noch nicht verwendet werden, erschweren die Implementierung der neuesten und besten Funktionen.

Mit Google Chrome Frame können Sie hochmoderne HTML5-Seiten erstellen und gleichzeitig Nutzern mit älteren Browsern die Anzeige Ihrer Inhalte ermöglichen.

Was ist Google Chrome Frame?

Google Chrome Frame ist ein Plug-in für Internet Explorer, das das Rendern des gesamten Browser-Canvas mithilfe des Rendering-Moduls von Google Chrome ermöglicht. Es unterstützt alle HTML5-Funktionen von Chrome, die nahtlos in Internet Explorer integriert sind. Chrome Frame ist für Internet Explorer 6, 7, 8 und 9 verfügbar. Chrome Frame ist auf jeden Fall nützlicher, wenn ältere Browser wie IE6 bis IE8 unterstützt werden. Wenn Sie jedoch beispielsweise WebGL für Ihre Anwendung benötigen, kann es auch nützlich sein, Chrome Frame für IE9-Nutzer zu verwenden.

HTML5-Polyfills bieten eine weitere Möglichkeit, den Wechsel zu neueren Browsern zu erleichtern. Leider können sie nicht jede Funktion emulieren, und sie verlangsamen deine Seite in alten Browsern, die bereits jetzt langsamer sind als die neue Generation.

Auch wenn Ihre Website keine HTML5-Funktionen benötigt, können Sie mit Chrome Frame eine bessere Nutzererfahrung bieten. Für Nutzer, die die Software bereits installiert haben, ist das Rendering in der Regel schneller und sie können auf Funktionen zugreifen, die von älteren Browsern nicht unterstützt werden. Natürlich können Sie sich auch dafür entscheiden, alte Browser für Nutzer zu unterstützen, die Chrome Frame nicht auf ihrem Computer haben.

Aktivieren

Sie können festlegen, dass Chrome Frame eine Seite rendert, indem Sie ein HTML-Meta-Tag hinzufügen oder einen HTTP-Header verwenden. Das ist sehr wichtig. Das bedeutet, dass die Website nicht funktioniert, wenn ein Nutzer Chrome Frame installiert hat, da die Website die vollständige Kontrolle über die Verwendung des Plug-ins oder das Standard-Rendering hat. Die folgenden Code-Snippets zeigen, wie eine Website das Rendern durch Chrome Frame aktivieren kann.

Option 1: HTTP-Header (Sie können dies zu Ihrer HTTP-Serverkonfiguration (z.B. Apache) hinzufügen:

X-UA-Compatible: chrome=1

Option 2: Meta-Tag (einfach in den HTML-Abschnitt <head> einfügen)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Sobald Sie eine dieser Funktionen zu Ihrer Website hinzugefügt haben, werden die Seiten mithilfe von Chrome Frame gerendert, sofern diese auf dem Computer des Nutzers installiert ist.

Aufforderung für Google Chrome Frame

Sie können sich aus folgenden Gründen dafür entscheiden, die Unterstützung für alte Browser vollständig einzustellen:

  • Für Ihre Website sind moderne Funktionen wie HTML5-Video, Canvas, WebGL oder CSS3 erforderlich
  • Die Entwicklungszeit der alten Browser ist zu lang
  • Beschleunigte Entwicklung neuer Funktionen

Chrome Frame bietet Ihnen möglicherweise eine Strategie, um Nutzern mit alten Browsern die Möglichkeit zu geben, Ihre Website weiterhin zu verwenden.

Chrome Frame überträgt seine Verfügbarkeit, indem der User-Agent-Header des Hosts mit der Zeichenfolge „chromeframe“ erweitert wird. Weitere Informationen finden Sie unter Chrome Frame-User-Agent.

Verwenden Sie die serverseitige Erkennung, um nach diesem Token zu suchen und zu ermitteln, ob Chrome Frame für eine Seite verwendet werden kann. Wenn Chrome Frame vorhanden ist, können Sie das erforderliche Meta-Tag einfügen. Ist dies nicht der Fall, können Sie die Nutzer auf eine Seite weiterleiten, auf der die Installation von Chrome Frame erläutert wird. Als Alternative zum serverseitigen Sniffing können Sie das Skript CFInstall.js verwenden, um Chrome Frame zu erkennen und Nutzer zur Installation des Plug-ins ohne Neustart ihres Browsers aufzufordern. Die Verwendung des Skripts ist unkompliziert. Fügen Sie Ihrer Seite einfach die Skript-Tags und optionalen Stile hinzu, wie im folgenden Beispiel gezeigt:

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

Frage selbst beantworten

Sie können auch selbst eine Landingpage erstellen oder die Ebene selbst erstellen. Nutzer zu dieser URL weiterleiten

http://www.google.com/chromeframe/

die in einen IFRAME eingefügt werden können.

Hängen Sie einen Weiterleitungsparameter an, um Nutzer nach Abschluss der Installation zurück auf Ihre Website zu leiten:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Anstatt die Chrome Frame-Landingpage aufzurufen, können Sie die Nutzer auch direkt zur Endnutzer-Lizenzvereinbarung (EULA) weiterleiten. Dadurch entfällt ein Schritt des Installationsvorgangs. http://www.google.com/chromeframe/eula.html

Keine Administratorrechte erforderlich

Nutzer können Chrome Frame installieren, ohne Administratorberechtigungen auf ihren Computern zu haben.

Hängen Sie den Parameter user=true an, um die Installation von Chrome Frame auf Nutzerebene zu ermöglichen:

http://www.google.com/chromeframe/?user=true

Installation für Unternehmen

Mithilfe des MSI-Installationsprogramms können Unternehmen Chrome Frame unternehmensweit bereitstellen: http://www.google.com/chromeframe/eula.html?msi=true.

Weitere Informationen zu Chrome und Unternehmensbereitstellungen finden Sie unter http://www.chromium.org/administrators.

Adoption

Viele große Websites wie yahoo.com, wordpress.com sowie mehrere Google-Produkte nutzen Google Chrome Frame. Mit Chrome Frame haben Nutzer nicht nur Zugriff auf eine modernere Weberfahrung auf vielen Websites, sondern auch eine deutliche Verbesserung der anfänglichen Ladezeit. Sie können prüfen, ob Ihre Website mit Chrome Frame schneller gerendert wird, indem Sie webpagetest.org aufrufen und Chrome Frame als Browser auswählen.

Mehr Informationen

Weitere Informationen finden Sie im Startleitfaden oder in diesem Video der Google I/O 2011.