Introduction
HTML5 ajoute une multitude de nouveaux outils à la boîte à outils des développeurs Web, y compris les suivants:
- Nouvelles API JavaScript plus puissantes
- SVG pour les graphiques vectoriels
- Canevas pour les graphiques 2D et 3D WebGL
- CSS3 pour les coins arrondis, les dégradés, etc.
- Balisage plus expressif
Cette liste n'est bien sûr pas exhaustive. La plate-forme Web a énormément progressé, et l'écart entre les anciens navigateurs et les navigateurs modernes se creuse chaque jour.
Tous les principaux navigateurs pour ordinateur prennent désormais en charge des parties importantes de HTML5 dans leur dernière version, mais les anciens navigateurs qui persistent rendent difficile l'adoption des dernières fonctionnalités.
Google Chrome Frame peut vous aider à créer des pages HTML5 de pointe dès aujourd'hui, tout en permettant aux utilisateurs de navigateurs plus anciens 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 le canevas complet du navigateur à l'aide du moteur de rendu de Google Chrome. Il est compatible avec toutes les fonctionnalités HTML5 que vous trouverez dans Chrome, et est parfaitement intégré à 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 pour prendre en charge les anciens navigateurs tels qu'IE6 à IE8, mais si vous avez besoin de WebGL pour votre application, il peut également être utile d'exiger Chrome Frame pour les utilisateurs d'IE9.
Les polyfills HTML5 offrent un autre moyen de faciliter la transition vers les navigateurs plus récents. Malheureusement, ils ne peuvent pas émuler toutes les fonctionnalités et ralentissent encore plus votre page dans les anciens navigateurs, qui sont déjà plus lents que la nouvelle génération.
Même si votre site n'a pas besoin de fonctionnalités HTML5, l'utilisation de Chrome Frame peut améliorer l'expérience utilisateur. Pour les utilisateurs qui l'ont déjà installé, le rendu 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 continuer à prendre en charge les anciens navigateurs pour les utilisateurs qui ne disposent pas de Chrome Frame sur leur ordinateur.
Activation
Vous pouvez activer Chrome Frame pour qu'il affiche 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 sera endommagé si un utilisateur a installé Chrome Frame, car le site contrôle entièrement l'utilisation du plug-in ou du rendu par défaut. Les extraits de code suivants montrent comment un site peut activer le rendu par Chrome Frame.
Option 1: En-tête HTTP (vous pouvez l'ajouter à la configuration de votre serveur HTTP (par exemple, Apache)) :
X-UA-Compatible: chrome=1
Option 2: Balise Meta (il vous suffit de la coller dans la section HTML <head>)
<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 s'il est installé sur l'ordinateur de l'utilisateur.
Inviter à utiliser Google Chrome Frame
Vous pouvez décider d'abandonner complètement la prise en charge des anciens navigateurs pour de nombreuses raisons, par exemple:
- Votre site nécessite des fonctionnalités modernes telles que la vidéo HTML5, le canevas, WebGL ou CSS3
- Le temps de développement consacré aux anciens navigateurs est trop élevé
- Accélérer le temps de développement des nouvelles fonctionnalités
Chrome Frame peut vous permettre de continuer à proposer aux utilisateurs d'anciens navigateurs un moyen d'utiliser votre site.
Chrome Frame indique qu'il est disponible en ajoutant la chaîne "chromeframe" à l'en-tête User-Agent de l'hôte. Pour en savoir plus, consultez User-Agent 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 méta requise. Si ce n'est pas le cas, vous pouvez rediriger les utilisateurs vers une page expliquant comment installer Chrome Frame. Au lieu d'utiliser l'analyse du trafic 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>
Vous poser des questions
Vous pouvez également 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 utilisateurs 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 rediriger les utilisateurs directement vers le CLUF, ce qui leur fait gagner une étape dans le processus d'installation. http://www.google.com/chromeframe/eula.html
Aucun droit d'administrateur requis
Les utilisateurs peuvent installer Chrome Frame sans disposer d'autorisations 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 Enterprise
Les entreprises peuvent déployer Chrome Frame à l'échelle de l'entreprise à l'aide du programme d'installation MSI, téléchargeable sur http://www.google.com/chromeframe/eula.html?msi=true.
Pour en savoir plus sur Chrome et les déploiements d'entreprise, consultez http://www.chromium.org/administrators.
Adoption
De nombreux sites Web majeurs tels que yahoo.com, wordpress.com et plusieurs propriétés Google ont adopté Google Chrome Frame. En plus de permettre à ses utilisateurs d'accéder à une expérience Web plus moderne pour de nombreux sites, Chrome Frame améliore également considérablement le temps de chargement initial. Pour vérifier si Chrome Frame accélère le rendu 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 de la conférence Google IO 2011.