fév

Tester et corriger les bugs de design de son site web

par GiZmo | vu 764 fois

!important, Browsershots, bugs de design, Chrome, corriger, CSS, design, design compatible, feuille de style CSS, Firefox, hacks, hacks CSS, IE, internet explorer, limitations Internet Explorer, navigateur internet, Opera, Safari, service web, tester, W3C

Comment tester la compatibilité des navigateurs web

Il existe de nombreux navigateurs internet. Et malheureusement pour nous, chacun analyse à sa sauce nos feuilles de style CSS. Notamment, Internet Explorer 6 qui ne respecte pas la norme W3C! Votre design est décalé, ou il manque des images…
C’est un vrai casse tête que de rendre accessible son design sur tous les navigateurs web.
Alors, comment savoir si votre design est compatible avec IE, Opéra, Chrome, Firefox, Safari et consors, sans pour autant avoir à tous les installer?

La solution s’apelle Browsershots, c’est un service web qui réalise des screenshots de votre site dans différents navigateurs et sur différents systèmes d’exploitation.
Vous pouvez ainsi tester le design de votre site en quelques minutes seulement.

Comment corriger les bugs de design?
Il faut généralement utiliser des hacks CSS. 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 ».
Exemple dans votre feuille de style CSS :

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

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

Malgré tout, les hacks sont déconseillés. L’alternative aux hacks serait de reconstruire tout son site, ce qui peut être fastidieux quand on sait qu’Internet Explorer pose à lui seul la plupart des problèmes.
Voici quelques liens concernant Internet Explorer, ses limitations, et les hacks CSS :

Contourner les défauts et limitations d’Internet Explorer

Quelques hacks CSS utiles