Niveau : intermédiaire à avancé
Depuis le lancement de Google Chrome en septembre dernier, nous avons reçu un certain nombre de questions de la part des webmasters et des développeurs web nous demandant comment faire pour que leurs sites fonctionnent correctement sous Google Chrome. Ces questions ont été très instructives pour l’équipe de Chrome, et je souhaite y répondre ici par quelques astuces visant à améliorer le rendu de votre site dans Google Chrome.
Détecter Google Chrome
La plupart des sites auront la même apparence sous Safari et sous Chrome, car ils sont tous deux basés sur le moteur de rendu WebKit. Si votre site s’affiche parfaitement dans Safari, alors il devrait en être de même dans Chrome.
Chrome étant relativement récent, beaucoup de sites le confondent encore avec un autre navigateur. Si votre site ne s’affiche pas correctement dans Chrome, mais fonctionne dans Safari, il est possible qu’il ne reconnaisse tout simplement pas l’en-tête « User-Agent » de Chrome.
Alors que les plate-formes et les navigateurs adoptent le plus en plus le moteur de rendu WebKit, votre site peut les détecter automatiquement avec les vérifications JavaScript adéquates. Habituellement, les sites utilisent JavaScript pour reconnaître la propriété « thenavigateor.userAgent » pour Chrome ou Safari, mais vous devez si possible utiliser un protocole de détection d’objets correct. En fait, Gmail détecte correctement WebKit dans Chrome depuis le premier jour !
Si vous devez détecter la balise user-agent, vous pouvez utiliser ce code JavaScript basique pour détecter WebKit :
var isWebkit =
navigator.userAgent.indexOf("AppleWebKit") > -1;
Sinon, si vous voulez vérifier que la version de WebKit est ultérieure à une certaine valeur :
var webkitVersion =
parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) ||
undefined;
if (webkitVersion && webkitVersion > 500 ) {
// insérez la version WebKit ici
}
Pour référence, voici les navigateurs concernés et leur version WebKit :
| Navigateur | Version de WebKit |
|---|---|
| Chrome 1.0 | 525.19 |
| Chrome 2.0 beta | 530.1 |
| Safari 3.1 | 525.19 |
| Safari 3.2 | 525.26.2 |
| Safari 4.0 beta | 528.16 |
Nous ne conseillons pas d’ajouter « Google » ou « Apple » aux vérification de « navigator.vendor » pour détecter WebKit ou Google Chrome, cela ne détectera pas les autres navigateurs basés sur WebKit !
Vous trouverez davantage d’informations sur la détection WebKit sur webkit.org.
Autres astuces utiles :
- Google Chrome ne prend pas en charge les plug-ins ActiveX, mais les plug-ins NPAPI. En d’autres termes, vous pouvez afficher le contenu de plug-ins comme Flash et Java dans Google Chrome de la même façon que dans Firefox et Safari.
- Si les textes sur votre site sont un peu décalés, assurez-vous de spécifier le type de contenu et le codage des caractères dans l’en-tête HTTP, ou au début de vos pages, de préférence au début de la section <head>.
- Ne placez jamais d’éléments de type Block à l’intérieur d’éléments Inline.
Erreur : <a><div>Ce contenu ne s’affichera pas correctement.</div></a>
Bon : <div><a>Voilà comment faire !</a></div>
- Si votre JavaScript ne fonctionne pas sous Google Chrome, vous pouvez le déboguer en utilisant la console JavaScript intégrée dans Chrome, dans Menu -> Options pour les développeurs -> Déboguer JavaScript.
Pour aider les webmasters et les développeurs web, nous avons spécialement mis en place un site de support en ligne et un forum pour répondre à vos questions. Bien entendu, si vous pensez avoir trouvé un bug dans Google Chrome, reportez-le nous !
Aidez-nous à améliorer Google Chrome !
Si vous aimeriez contribuer davantage, nous cherchons des webmasters qui accepteraient de nous laisser utiliser leur site pour nos études internes de performance et de compatibilité. Si vous êtes intéressés pour nous fournir une version cache de votre site, merci de nous contacter à chrome-webmasters@google.com.
Continuez à nous faire part de vos commentaires, et nous continuerons à améliorer Google Chrome !
Par Glenn Wilson, Chef de projet, Google Chrome
![[Android] Google Chrome débarque en version beta sur Android ICS](http://www.goopilation.com/wp-content/uploads/2012/02/chrome-android-logo.jpg){kind=logo}
