Comment faire un site compatible avec tous les navigateurs ?

Le 07/07/2013

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

Le plus gros problème dans notre métier est sans aucun doute le grand nombre de navigateurs existants. De nombreuses versions de navigateurs et de moteurs de recherche sont à 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 sur Chrome et Firefox ?

Pour essayer de répondre à ces questions et vous simplifier la vie, voilà 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 l'un des trois sites suivants quels sont les outils que l’on peut utiliser.

HTML5please

Can I use

Modernizr

Modernizr est un peu plus avancé : il permet 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 les 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 besoin et qui permettront de fournir le support de la fonctionnalité demandée.

Homogénéiser son développement

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

Cet outil 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

Ce framework SCSS est encore plus avancé : il permet de spécifier des règles (ou d’en utiliser de nombreuses existantes) pour automatiser l’ajout de tous les préfixes.

Il ne faut pas sous-estimer les problèmes que peuvent attirer le langage 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 subtils ou dévastateurs (notez que la possibilité « pas de problème » n’existe pas). La solution est d'utiliser un framework, qui prendra en compte ces différences pour nous.