Rendu HTML5 dans les navigateurs plus anciens avec Google Chrome Frame

Introduction

HTML5 ajoute une multitude de nouveaux outils performants à la boîte à outils des développeurs Web, y compris les suivants:

  • Nouvelles API JavaScript plus puissantes
  • SVG pour les graphiques vectoriels
  • Canvas pour 2D et graphismes WebGL 3D
  • CSS3 pour les angles arrondis, les dégradés, etc.
  • Un balisage plus expressif

Cette liste n'est évidemment pas exhaustive. La plate-forme Web a considérablement évolué, et l'écart entre les anciens navigateurs et les navigateurs récents s'élargit de jour en jour.
Tous les principaux navigateurs pour ordinateur sont désormais compatibles avec une partie significative du langage HTML5 dans la dernière version. Cependant, il est difficile d'adopter les fonctionnalités les plus récentes et les plus performantes avec les anciens navigateurs.

Google Chrome Frame peut vous aider à créer des pages HTML5 à la pointe de la technologie tout en permettant aux utilisateurs d'anciens navigateurs de voir votre contenu.

Qu'est-ce que Google Chrome Frame ?

Google Chrome Frame est un plug-in pour Internet Explorer qui permet d'afficher l'intégralité du canevas du navigateur à l'aide du moteur de rendu de Google Chrome. Il est compatible avec toutes les fonctionnalités HTML5 de Chrome et s'intègre parfaitement à l'expérience utilisateur d'Internet Explorer. Chrome Frame est disponible pour Internet Explorer 6, 7, 8 et 9. Chrome Frame est certainement plus utile lorsqu'il est compatible avec d'anciens navigateurs comme IE6 vers IE8, mais si, par exemple, vous avez besoin de WebGL pour votre application, vous pouvez également exiger Chrome Frame pour les utilisateurs d'IE9.

Les polyfills HTML5 constituent un autre moyen d'optimiser la transition vers les navigateurs plus récents. Malheureusement, elles ne peuvent pas émuler toutes les fonctionnalités et elles ralentissent l'affichage des pages dans les anciens navigateurs, qui sont déjà plus lents que la nouvelle génération.

Même si votre site ne nécessite pas de fonctionnalités HTML5, l'utilisation de Chrome Frame peut tout de même offrir une meilleure expérience utilisateur. Pour les utilisateurs qui l'ont déjà installé, l'affichage est généralement plus rapide et ils peuvent accéder à des fonctionnalités qui ne sont pas compatibles avec les anciens navigateurs. Vous pouvez, bien sûr, accepter les anciens navigateurs pour les utilisateurs qui n'ont pas Chrome Frame sur leur ordinateur.

Activation

Vous pouvez activer Chrome Frame pour afficher une page en ajoutant une balise Meta HTML ou en utilisant un en-tête HTTP. C'est très important. Cela signifie qu'aucun site ne fonctionnera si un utilisateur a installé Chrome Frame, car le site contrôle totalement l'utilisation du plug-in ou du rendu par défaut. Les extraits de code suivants montrent comment un site peut activer l'affichage par Chrome Frame.

Option 1: En-tête HTTP (vous pouvez ajouter ceci à votre configuration de serveur HTTP (par exemple, Apache)) :

X-UA-Compatible: chrome=1

Option 2: Balise Meta (collez simplement cette URL dans votre section <head> HTML)

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

Une fois que vous avez ajouté l'un de ces éléments à votre site, les pages sont affichées à l'aide de Chrome Frame si celui-ci est installé sur l'ordinateur de l'utilisateur.

Invite pour Google Chrome Frame

Vous pouvez décider d'abandonner complètement la prise en charge des anciens navigateurs pour de nombreuses raisons, notamment:

  • Votre site nécessite des fonctionnalités modernes telles que la vidéo HTML5, le canevas, WebGL ou CSS3
  • Le temps de développement passé sur les anciens navigateurs est trop long
  • Accélérer le temps de développement de nouvelles fonctionnalités

Chrome Frame peut vous proposer une stratégie pour continuer à permettre aux utilisateurs d'anciens navigateurs de continuer à utiliser votre site.

Chrome Frame transmet qu'il est disponible en ajoutant la chaîne "chromeframe" à l'en-tête user-agent de l'hôte. Pour plus d'informations, consultez la page Agent utilisateur Chrome Frame.

Utilisez la détection côté serveur pour rechercher ce jeton et déterminer si Chrome Frame peut être utilisé pour une page. Si Chrome Frame est présent, vous pouvez insérer la balise Meta requise. Sinon, vous pouvez rediriger les utilisateurs vers une page expliquant comment installer Chrome Frame. Au lieu de renifler côté serveur, vous pouvez utiliser le script CFInstall.js pour détecter Chrome Frame et inviter les utilisateurs à installer le plug-in sans redémarrer leur navigateur. L'utilisation du script est simple. Il vous suffit d'ajouter les balises de script et les styles facultatifs à votre page, comme dans l'exemple suivant:

<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>

Demandez-vous

Vous pouvez également décider de créer vous-même une page de destination ou une couche. Rediriger les utilisateurs vers cette URL

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

qui peut être placé dans un IFrame.

Ajoutez un paramètre de redirection pour renvoyer les internautes vers votre site une fois l'installation terminée:

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Au lieu d'accéder à la page de destination de Chrome Frame, vous pouvez également diriger les utilisateurs directement vers le CLUF, ce qui vous évitera une étape du processus d'installation. http://www.google.com/chromeframe/eula.html

Aucun droit d'administrateur nécessaire

Les utilisateurs peuvent installer Chrome Frame sans disposer de droits d'administrateur sur leur ordinateur.

Ajoutez le paramètre user=true pour activer l'installation de Chrome Frame au niveau de l'utilisateur, comme suit:

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

Installation pour les entreprises

Les entreprises peuvent déployer Chrome Frame à l'échelle de l'entreprise à l'aide du programme d'installation MSI, que vous pouvez télécharger ici : http://www.google.com/chromeframe/eula.html?msi=true.

Pour en savoir plus sur le déploiement de Chrome et sur celui d'une entreprise, consultez la page http://www.chromium.org/administrators.

Adoption

De nombreux sites Web de premier plan tels que yahoo.com, wordpress.com et plusieurs propriétés Google ont adopté Google Chrome Frame. En plus d'offrir aux utilisateurs une expérience Web plus moderne pour de nombreux sites, Chrome Frame offre également une amélioration significative du temps de chargement initial. Pour vérifier si Chrome Frame permet d'accélérer l'affichage de votre site, accédez à webpagetest.org et sélectionnez Chrome Frame comme navigateur.

Plus d'infos

Pour en savoir plus, consultez le guide de démarrage ou regardez cette vidéo publiée par Google IO 2011