Développer un site accessible sur tous les navigateurs

C’est le calvaire de tout développeur web, développer un site dont le comportement sera identique sur l’ensemble des navigateurs de la toile.

Il y a aujourd’hui de plus en plus de navigateurs disponibles, même Google s’y est mis, et il y en aura demain encore plus.

Cependant, il existe trois grandes familles de navigateurs sur Internet:

• Microsoft Internet Explorer (Version 6 et 7 principalement)
• Gecko (Mozilla Firefox et Netscape)
• Khtml (Safari)

Bien sûr, et ce serait trop facile sinon, chaque navigateur interprète de manière différente le contenu html de chaque site internet. Il devient donc très difficile de développer un site sans tenir compte de ces différences d’interprétation.

Il existe deux solutions principales pour parer à ces problèmes:

• Détecter le navigateur en Javascript et appliquer une feuille de Style (CSS) particulière pour chaque navigateur.
• Utiliser la puissance du CSS et appliquer un style en ciblant le navigateur.

Pour ma part, je recours toujours à la deuxième solution, qui me semble plus pratique (les feuilles de style ne sont pas dupliquées).

Pour cibler un navigateur dans une feuille de style, il faut appliquer une règle particulière, également appelée « Hack ».

Ainsi les règles suivantes permettent d’appliquer un style à des éléments et seront interprétées correctement par leur navigareurs respectifs:

Internet Explorer 6

*html #mon_div{ color:#888; } ou #mon_div { color:#fff; _color:#000; }

*+html #mon_div{ color:#777; } Pour IE 6 et IE 7: #mon_div { color:#fff; *color:#000; }

#mon_div { color:#999 }

@media screen and (-webkit-min-device-pixel-ratio:0) { #mon_div { color:#eee } }

Ces astuces permettent de bien calibrer l’affichage des sites internet et maximiser les chances d’interprêtation par les navigateurs.

Il faut savoir que Firefox est le navigateur à l’heure actuelle qui interprête le mieux le code HTML (selon les standards W3C). Alors soyez gentils, facilitez nous la vie et abandonnez Internet Explorer!