Comme vous le savez il existe plusieurs navigateurs internet qui analysent de façon différente les fichiers CSS (entre autre). Je pense à Internet Explorer 6 qui n’obéit même pas à la norme W3C! Parfois votre design est décalé, et dans certains cas il manque des images.

Vous me direz: « Personne n’utilise IE6! On est tous passé à IE7! » Et bien non je connais des gens qui ont encore ce navigateur (au boulot par exemple, il est parfois interdit de télécharger des updates et programmes).

• Comment savoir si votre design est compatible avec IE, ainsi qu’avec les autres navigateur, sans pour autant tous les installer?

Browsershots est un service web qui prend des screenshots de votre site dans différents navigateurs et différents systèmes d’exploitation. Vous pouvez ainsi tester le design de votre site.

Quelques minutes sont nécessaires avant de recevoir les screenshots. (environ 5 minutes pour moi)

• Comment corriger ces petits bugs de design?

J’ai dû utiliser des hacks CSS pour le thème de ce blog. Ce sont des petits bouts de codes qui permettent par exemple de donner une instruction uniquement à IE, et une autres à tous les autres navigateurs. C’est grâce à eux qu’un design devient compatible avec tous les navigateurs. Il en existe beaucoup comme par exemple:

Avec « !important »:

.header {
background-image:url(header.gif);
margin-left: 20px !important; //pour firefox et les autres
margin-left: 15px; //pour IE
}

Dans ce cas-ci, IE va mettre le header à 15px de la marge de gauche.

Dans tous les cas, les hacks sont déconseillés. L’alternative aux hacks serait de reconstruire tout son site, ce qui devient lassant quand on sait qu’uniquement IE pose des problèmes. Voici quelques liens concernant Internet Explorer, ses limites, et les hacks CSS:

Contourner les défauls et limitations d’Internet Explorer
Quelques hacks CSS utiles

Abonnez-vous aux RSS !