Comment faire un site compatible pour tous les navigateurs ?

Aujourd’hui sur le Blog du Webdesign, découvrez différentes ressources pour faire des sites web compatibles sur tout les navigateurs

Le plus gros problème dans notre métier est sans aucun doute le parc navigateurs. Trop trop de versions de navigateurs, trop de moteurs différents à prendre en compte. Comment savoir si ce magnifique mot-clé qui résoudrait parfaitement notre problème est compatible IE8 ? Comment faire en sorte que l’affichage soit identique sour Chrome et Firefox ?

Pour essayer de répondre à ces questions et vous simplifier la vie, voila une petite liste d’outils et ressources.

Savoir ce que l’on peut utiliser sans risque

La première chose pour se simplifier la vie est bien cibler les navigateurs principalement utilisés par la cible. Avec cette information en main, il ne reste plus qu’à regarder sur un des deux sites suivant quels sont les outils dont l’on peut disposer.

HTML5please

Can I use

Modernizr est un peu plus radicale : Il permettra d’utiliser des conditions dans le CSS et le JS pour savoir si le navigateur du client supporte tel ou tel comportement (support des bords ronds, des ombres, …)

Palier aux problèmes de navigateurs obsolètes

Si notre segment utilise fortement IE8, par exemple, doit-on réellement abandonner tout espoir de bord rond ? Heureusement, non. Il existe de nombreux outils pour pallier les manques de ses ancêtres. HTML5 shiv contient de nombreux « polyfills » qui ne se chargeront que si besoins, et qui permettront de fournir le support de la fonctionnalité demmandée.

Homogeneiser son developpement

Pour éviter de trop perdre de temps lors du développement, il est important d’utiliser divers outils pour simplement « oublier » la différence entre les navigateurs.

Prefix-free, par exemple, permet d’écrire toutes les règles CSS3 sans préfixe. Un petit JS détectera ensuite le navigateur, et ajoutera le bon préfixe coté client.

Compass, le framework SCSS, est encore plus radicale: Il permet de specifier des règles (ou d’en utiliser de nombreuses refaites) pour automatiser l’ajout de tous les préfixes, ou l’ajout de zoom: 1 sur tout les display: inline-block.

Enfin, il ne faut pas sous-estimer les problèmes que peut attirer le Javascript. En effet, ce dernier ne se comporte pas réellement de la même façon sur tous les navigateurs, ce qui peut introduire des problèmes allant de subtiles à dévastateurs (notez que la case « pas de problèmes » n’existe pas). Solution: utiliser un framework, qui prendra en compte ces différences pour nous.

Tester dans de bonnes conditions

Enfin, il est évidemment important de tester son projet sous le plus de configurations possible, ce qui comprend de nombreuses combinaisons OS Navigateur. Pour cela, pas de secrets, le mieux reste la VM.

Microsoft a d’ailleurs mis à notre disposition de nombreuses VMs pour tester leurs navigateurs sur la plupart des OS. Sympa