HTML5 in älteren Browsern mit Google Chrome Frame rendern

Einführung

HTML5 bietet Webentwicklern eine Vielzahl neuer großartiger Tools, darunter:

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

Diese Liste ist natürlich nicht vollständig. Die Webplattform hat sich enorm weiterentwickelt und die Lücke zwischen alten und modernen Browsern wird jeden Tag größer.
Alle gängigen Desktop-Browser unterstützen in der neuesten Version wichtige Teile von HTML5. Da aber immer noch alte Browser verwendet werden, ist es schwierig, die neuesten und besten Funktionen zu nutzen.

Mit Google Chrome Frame können Sie moderne 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 den Internet Explorer, mit dem das gesamte Browser-Canvas mit der Rendering-Engine von Google Chrome gerendert werden kann. Er unterstützt alle HTML5-Funktionen, die Sie in Chrome finden, und ist nahtlos in die Benutzeroberfläche des Internet Explorers integriert. Chrome Frame ist für Internet Explorer 6, 7, 8 und 9 verfügbar. Chrome Frame ist natürlich 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 sinnvoll sein, Chrome Frame für IE9-Nutzer zu verwenden.

HTML5-Polyfills bieten eine weitere Möglichkeit, die Umstellung auf neuere Browser zu erleichtern. Leider können sie nicht alle Funktionen emulieren und verlangsamen Ihre Seite in alten Browsern, die ohnehin schon langsamer als die neue Generation sind, noch weiter.

Auch wenn für Ihre Website keine HTML5-Funktionen erforderlich sind, kann die Verwendung von Chrome Frame die Nutzerfreundlichkeit verbessern. Bei Nutzern, die den Browser bereits installiert haben, ist das Rendering in der Regel schneller und sie können auf Funktionen zugreifen, die in älteren Browsern nicht unterstützt werden. Sie können natürlich weiterhin ältere Browser für Nutzer unterstützen, die Chrome Frame nicht auf ihrem Computer installiert haben.

Aktivieren

Sie können Chrome Frame zum Rendern einer Seite aktivieren, indem Sie ein HTML-Meta-Tag hinzufügen oder einen HTTP-Header verwenden. Das ist sehr wichtig. Das bedeutet, dass keine Website beschädigt wird, wenn ein Nutzer Chrome Frame installiert hat, da die Website die Verwendung des Plug-ins oder des Standard-Renderings vollständig steuern kann. Die folgenden Code-Snippets zeigen, wie eine Website so konfiguriert werden kann, dass sie von Chrome Frame gerendert wird.

Option 1: HTTP-Header (kann der Konfiguration des HTTP-Servers (z.B. Apache) hinzugefügt werden):

X-UA-Compatible: chrome=1

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

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

Sobald Sie Ihrer Website eine dieser Optionen hinzugefügt haben, werden Seiten mit Chrome Frame gerendert, sofern dieser auf dem Computer des Nutzers installiert ist.

Aufforderung zum Aktivieren von Google Chrome Frame

Es kann viele Gründe geben, die Unterstützung für alte Browser vollständig einzustellen, z. B.:

  • Ihre Website erfordert moderne Funktionen wie HTML5-Video, Canvas, WebGL oder CSS3
  • Der Entwicklungsaufwand für alte Browser ist zu hoch
  • Entwicklungszeit für neue Funktionen verkürzen

Chrome Frame könnte eine Strategie sein, um Nutzern älterer Browser weiterhin die Möglichkeit zu geben, Ihre Website zu verwenden.

Chrome Frame gibt seine Verfügbarkeit an, indem der User-Agent-Header des Hosts mit dem String „chromeframe“ erweitert wird. Weitere Informationen finden Sie unter Chrome Frame-User-Agent.

Verwenden Sie die serverseitige Erkennung, um nach diesem Token zu suchen und festzustellen, ob Chrome Frame für eine Seite verwendet werden kann. Wenn Chrome Frame vorhanden ist, können Sie das erforderliche Meta-Tag einfügen. Andernfalls können Sie Nutzer auf eine Seite weiterleiten, auf der erklärt wird, wie Chrome Frame installiert wird. Als Alternative zum serverseitigen Sniffen können Sie das Script „CFInstall.js“ verwenden, um Chrome Frame zu erkennen und Nutzer zum Installieren des Plug-ins aufzufordern, ohne ihren Browser neu starten zu müssen. Die Verwendung des Scripts ist ganz einfach. Fügen Sie Ihrer Seite einfach die Script-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>

Sich selbst Ideen geben

Sie können auch selbst eine Landingpage oder Ebene erstellen. Nutzer an diese URL weiterleiten

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

die in einen IFRAME eingefügt werden kann.

Fügen Sie einen Weiterleitungsparameter an, um Nutzer nach Abschluss der Installation zurück zu Ihrer Website zu leiten:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Anstatt zur Chrome Frame-Startseite zu gehen, können Sie die Nutzer auch direkt zur Endnutzer-Lizenzvereinbarung weiterleiten und so einen Schritt beim Installationsprozess sparen. http://www.google.com/chromeframe/eula.html

Keine Administratorrechte erforderlich

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

Fügen Sie den Parameter user=true an, um die Installation von Chrome Frame auf Nutzerebene zu aktivieren, wie im folgenden Beispiel:

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

Enterprise-Installation

Unternehmen können Chrome Frame unternehmensweit mit dem MSI-Installationsprogramm bereitstellen, das hier heruntergeladen werden kann: http://www.google.com/chromeframe/eula.html?msi=true.

Weitere Informationen zu Chrome und Bereitstellungen für Unternehmen finden Sie unter http://www.chromium.org/administrators.

Akzeptanz

Viele große Websites wie yahoo.com, wordpress.com und mehrere Google-Produkte verwenden Google Chrome Frame. Chrome Frame bietet Nutzern nicht nur Zugriff auf eine modernere Weboberfläche für viele Websites, sondern auch eine deutlich kürzere anfängliche Ladezeit. Ob Chrome Frame das Rendern Ihrer Website beschleunigt, können Sie unter webpagetest.org prüfen. Wählen Sie dazu Chrome Frame als Browser aus.

Weitere Informationen

Weitere Informationen finden Sie im Einstiegsleitfaden oder in diesem Video von der Google IO 2011.