En théorie, un site doit être compatible sur les principaux navigateurs (Internet Explorer, Firefox, Chrome, Safari et Opéra). En pratique, c’est beaucoup moins simple.
En effet, chaque navigateur interprète de manière différente le CSS. Par exemple, pour le calcul des marges, le pixel n’est pas pris en compte de la même manière sur les différents navigateurs. Les OS ou systèmes d’exploitation (Windows, Mac ou Linux) peuvent également être la cause de ces bugs. Firefox sous Windows et Firefox sous Mac n’ont pas la même interprétation !
Dans ce cas, il faut connaître le public « cible » du futur site et/ou le pourcentage d’utilisation de chaque navigateur.
Pour vous y repérer, vous trouverez ci-dessous quelques chiffres représentant les parts de marché des principaux navigateurs :
Statistiques par navigateurs – Juin 2012 (référence : http://www.w3counter.com/globalstats.php)
Statistiques d’utilisation par version sur 10 navigateurs
- Chrome 19 => 24.39 % d’utilisation
- Internet Explorer 9 => 12.58 % d’utilisation
- Internet Explorer 8=> 11.37 % d’utilisation
- Firefox 13 => 8.24 % d’utilisation
- Firefox 12 => 8.14 % d’utilisation
- Safari 5 => 5.47 % d’utilisation
- Internet Explorer 7 => 5.03 % d’utilisation
- Ipad 5.1 => 2.01 % d’utilisation
- iOS 5.1 => 1.70 % d’utilisation
- Firefox 3.6 => 1.67% d’utilisation
Les navigateurs les plus « capricieux », à l’heure actuelle, sont toujours IE6 et IE7.
IE6 est principalement utilisé par les entreprises. D’après le site PCINpact, les parts de marché en fonction de chaque pays diminuent énormément sauf en Chine où 25.2% d’utilisateurs continuent à l’utiliser. Microsoft souhaite réellement le supprimer mais cela est difficile au vu du taux d’utilisation très important en Chine.
IE7 est, quant à lui, le navigateur le plus utilisé par des particuliers. Beaucoup de personnes supposent qu’il ne devrait plus rester longtemps sur le marché des navigateurs étant donné la difficulté à adapter un site internet qui soit 100% identique aux autres navigateurs.
Les autres IE (8 et 9) ressemblent beaucoup à Mozilla Firefox en termes d’interprétation. Vous aurez beaucoup moins de problèmes à les gérer.
L’avantage grâce à ces dernières versions, c’est que Microsoft a intégré un plugin de debug comme « firebug » (cf ci-après) pour voir le code de votre site. Ce plugin permet également de vérifier votre site sur les 3 dernières versions d’IE (IE7, IE8, IE9)
Outil de débug d’Internet Explorer
D’ailleurs les autres navigateurs ont également leur propre « firebug » intégré.
Chrome et Safari fonctionnent de la même manière : si vous en débugguez un, le deuxième le sera automatiquement (pratique non !).
Outil de débug de Chrome
Outil de débug de Safari
Opéra quant à lui peut rajouter des scroll-bars un peu partout…
Outil de débug d’Opéra : Dragonfly
Mozilla Firefox est toujours très pratique pour une bonne intégration notamment grâce à ses outils de debug intégrés : comme le fameux plugin « Firebug », le plus adapté et le plus facile à utiliser, comparé aux autres, pour coder ou débuguer en live. Quelques fonctionnalités : la barre « web developer tools » qui offre de nombreux outils pour aider au développement ; le « firepicker » qui permet dans l’outil de « firebug » d’avoir une palette de couleurs pour changer à volonté sans repasser par Photoshop… et tant d’autres à découvrir !
Le plugin Firebug
Voici la méthode conseillée pour générer un minimum de bugs et avoir une compatibilité tous navigateurs dès le début :
- Créer une structure HTML ou XHTML en respectant les standards W3C et en utilisant la sémantique. Tout cela, sans CSS et sans scripts ! Le HTML ou XHTML doit pouvoir être lu et affiché sans souci.
- Création des CSS dans le respect des standards et de l’accessibilité.
- Adapter son/ses CSS en fonction des navigateurs (qu’il soit capricieux ou non
;) ).
Pour cela, plusieurs méthodes sont possibles :- La simplification du CSS
- L’ajout de commentaires conditionnels (en respectant les standards, bien évidemment)
- L’utilisation de script permettant de différencier l’OS et les navigateurs
