10 septembre 2008

Google Chrome et les CSS

Cet article a pour but de partager les différences de comportement de styles rencontrés lors de nos développements sur Google Chrome par rapport aux autres navigateurs et notamment Firefox 3 qui restait jusqu’alors notre référence. Nous ferons évoluer le contenu au fur et à mesure de nos éventuelles découvertes.

NB : ces différences de comportement résultent uniquement de NOTRE façon de coder et sont basées sur notre seule expérience. Ainsi dit, il est tout à fait possible qu’auparavant nous ne codions pas tout à fait correctement dans le respect des standards : aux puristes de nous le dire.

Google Chrome est sorti mardi 2 septembre comme vous le savez tous et déjà quelques différences apparaissent :

  1. Prenez une couleur de fond associée au tag body.
    Si votre contenu ne remplit pas la hauteur de la zone utile de votre navigateur (pas de scroll vertical), le body qui l’encapsule, s’arrête aussi.
    Résultat sous Chrome : votre couleur de fond ne fait pas tout l’écran !
    Solution :
    appliquer les styles du body au tag html :
    html, body {background:#fff;} par exemple.
  2. Les filtres et transitions CSS habituellement utilisés sous Firefox ou IE ne fonctionnent évidemment plus.
    Exemple : -moz-opacity et filter
    Solution : Il conviendra d’utiliser les CSS 3 (opacity dans l’exemple) parfaitement implantées. Ce qui du reste vous fera un site compatible avec Safari 3.1. 

Si vous avez rencontré d’autres différences de ce type, n’hésitez pas à commenter ! On revient très vite avec d’autres découvertes… ou pas !

Laisser un commentaire