Comment imposer une expérience full HTML5 / CSS3 à vos visiteurs [Dictator mode]

Image illustrant l'article : Comment imposer une expérience full HTML5 / CSS3 à vos visiteurs [Dictator mode]

Comment imposer une expérience full HTML5 / CSS3 à vos visiteurs [Dictator mode]

par Korben -

Décidément, ils ont toujours de bonnes idées chez Google… Afin de faire la nique à Internet Explorer et surtout de permettre aux Webmasters de proposer une expérience full HTML5 / CSS 3 à leurs visiteurs sous IE, le géant des Internetz a mis en ligne Google Chrome Frame.

Google Chrome Frame ou GCF est un plugin pour IE qui permet d’utiliser le moteur de Chrome (webkit) sans devoir installer Chrome. Pratique pour ceux qui ont leurs petites habitudes ou des contraintes professionnelles.


Ce qu’il faut savoir, c’est que ce plugin peut être activé et proposé par les webmasters grâce au code suivant, à placer dans le head de votre site :

>
`<``script` `type``=``"text/javascript"` `src``=``"[http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js](http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js)"``>``script``>`
Et à placer juste après la balise de fermeture :
>
`<``script``>`
`  ``CFInstall.check({`
`  ``mode: "overlay"`
`  ``});`
```script``>`
Ainsi, en arrivant sur votre site, vos visiteurs IE qui ne disposent pas encore de Chrome Frame verront la popup suivante :

Capture d’écran de la page d’accueil en full HTML5 / CSS3

Ok, y’a plus sexy et moins intrusif, mais dans certains cas, ça peut servir.

Ensuite, pour décider quelles seront les pages qui utiliseront le moteur de Chrome et quelles seront les pages qui continueront d’utiliser le moteur d’IE, il suffit de placer un .htaccess / ou de modifier le .htaccess à la racine de votre site avec le code suivant :

>
`BrowserMatch chromeframe gcf`
`Header append X-UA-Compatible "chrome=1" env=gcf`
Puis pour chaque page où vous souhaitez que la Chrome Frame s'active, il vous suffira de placer le code suivant dans le head des pages concernées :
>
`<``meta` `http-equiv``=``"X-UA-Compatible"` `content``=``"chrome=1"``>`
Et voilà !

Maintenant que vous maitrisez les bases, si vous souhaitez vous pencher un peu plus sur les possibilités de la Chrome Frame, je vous invite à lire ces 2 sites :

Amusez-vous bien !

Source