(modifié le 8 mars 2013 à 23:13)

Tout développeur sait (ou doit savoir) que les différents navigateurs internet n'interprètent pas de la même façon les propriétés de mise en forme CSS. Je ne parle pas là des "hacks" pour pallier aux fonctionnalités non supportées par les moteurs graphiques des navigateurs, mais bien des attributs CSS de base : margin, padding, etc...

Pour visualiser le rendu de votre navigateur je vous propose cet outil de Julien Royer :

Prenons par exemple l'élément "blockquote" :

  • Mozilla Firefox, margin : 16px 40px
  • Internet Explorer, margin : 19px 40px

3px de différence ! Peut-être allez-vous me dire que je suis perfectionniste ? Mais sur un design ou tout est millimétré cette différence peut avoir son importance.

En complément d'information de ce billet je vous conseille (si nous n'étions pas en démocratie je vous y forcerai 😛 ) de lire un billet de Gilles Vauvarin sur les (ré)initialisations CSS (reset) qui permettent de pallier à ses différences d'interprétation. En effet, il existe de nombreuses (mauvaises) méthodes de "reset", vous comprendrez les rouages et éviterez de reproduire ces erreurs dont certaines sont argumentées par le W3C.

A lire également : "Rendu par défaut des éléments HTML" et "Reset CSS, une technique à manier avec précaution", deux billets Alsacreations dont le créateur n'est autre que Raphael Goetter, cador des temps moderne du CSS 🙂

Vous souciez-vous de ces différences (avant de lire ce billet) ? ou bien préferiez vous négliger les utilisateurs qui n'utiliseraient pas votre navigateur favoris ? Les commentaires sont ouverts.

Auteur : Mr Xhark

Fondateur du blog et passionné par les nouvelles techno, suivez-moi sur twitter