Pierre MARTIN

Dans un précédent article je vous avais redirigé vers une très bonne liste de conseils / astuces CSS pour être compatible avec tous les navigateurs.

Malgré tous les efforts que vous avez fait pour respecter les standards et faire un graphisme propre, vous vous rendez encore compte que IE6 n’affiche pas votre site correctement … en plus, vous avez vraiment du mal avec les hacks IE6 qui relèvent plus de la bidouille qu’autre chose ? Vous voulez mieux comprendre les différentes solutions existantes ?

Je vais donc essayer de vous indiquer quelques ressources qui m’ont récemment permis de supprimer la plupart des problèmes de compatibilité ! Le vieil IE6 reste quand même (beaucoup trop) utilisé à l’heure actuelle : environ 20% d’après diverses sources … ce qui rend encore obligatoire la prise en compte de celui-ci lorsque vous créez votre design !

Voici les ressources que je vais présenter ici :

1. La feuille de reset CSS
2. Une librairie Javascript qui résout la plupart des bugs d’IE6
3. Un logiciel pour simuler les anciennes versions d’IE (très pratique si vous êtes sous Windows Vista !)
4. Un site qui vous permet de voir des captures d’écran de votre site sous différents navigateurs / OS

1. La feuille de reset CSS

Tous ceux qui on un jour mis leurs mains dans des feuilles de styles CSS savent que la même « instruction » est comprise différemment par chacun des différents navigateurs internet existants. C’est tout simplement dû au fait que chacun d’entre eux propose une « feuille de style CSS de base » afin d’afficher d’une manière minimale les sites n’ayant aucun graphisme (texte sémantique pur) … ce qui n’existe quasiment pas hein !

Le problème est que cette « base graphique » est différente d’un navigateur à l’autre … ainsi, ce que l’on superpose (nos feuilles de styles et propriétés CSS) dépendra de ce qu’il y a en dessous, et l’affichage diffèrera en fonction du navigateur. Avouons que cela n’est pas pratique ! L’objectif ultime est donc de fixer un socle commun à tous ces navigateurs.

Pour cela, le W3C a proposé une feuille de style de base pour les navigateurs … mais vous savez comment il est difficile de faire bouger ceux-ci ! Nous en arrivons donc aux feuilles de reset CSS créées par les développeurs. Créées au fur et à mesure par des personnes expérimentées, elles vous permettent (par simple inclusion) de partir sur de bonnes bases. Ce n’est pas atteint à 100% (enfin à mon avis), mais bien à 95% … ce qui est déjà pas mal !!

Je vous invite à lire un article sur CSS4Design qui analyse les 5 principales feuilles de reset les plus populaires … à vous de choisir celle que vous préférez ! Pour ma part, voici celle que j’utilise :

/* =INITIAL
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com
   Addition by Christian Montoya - www.christianmontoya.net */
	/* Neutralize styling:
   Elements we want to clean out entirely: */
html,body,form,fieldset {
	margin: 0;
	padding: 0;
	font: 100%/ 120% Verdana, Arial, Helvetica, sans-serif;
}
 
/* Neutralize styling:
   Elements with a vertical margin: */
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {
	margin: 1em 0;
	padding: 0;
}
 
/* Apply left margin:
   Only to the few elements that need it: */
li,dd,blockquote {
	margin-left: 1em;
}
 
/* Miscellaneous conveniences: */
form label {
	cursor: pointer;
}
 
fieldset {
	border: none;
}
 
input,select,textarea {
	font-size: 100%;
	font-family: inherit;
}

A vous de l’adapter ensuite suivant vos besoins …

2. Le script Javascript qui rend IE6 compatible avec les standards

Après avoir intégré la feuille de reset à vos CSS, vous vous rendrez compte que certaines expressions de votre feuille de style ne sont pas comprises par IE6 ! Le bougre …

On serait alors tenté de ne pas en tenir compte car pour « nous les développeurs » IE6 est le mal à l’état pur et personne ne devrait l’utiliser. Malheureusement, à l’heure d’écriture de ce message un peu moins de 20% des surfeurs utilisent IE6 ! D’après les statistiques des sites que je gère, je peux confirmer en disant que pour le sites orientés « technos » (i.e ce site) on est à moins de 10%, mais à plus de 35% pour les sites orientés « professionnels / industriels » … de quoi réfléchir ! Certains ont donc passé le cap en créant le mouvement SaveTheDevelopers et poussent leurs visiteurs à mettre à jour leur navigateur en donnant les arguments qui vont bien. Ironie du sort, le site redirige actuellement vers une page de Microsoft proposant la mise à jour vers IE7 ! Fin de la parenthèse.

D’autre part, de valeureux développeurs (paix à leurs âmes) ont travaillé dur sur un script Javascript permettant de résoudre la plupart des bugs d’IE6 afin qu’il réagisse « comme » ses petits frères vis à vis des normes. Au programme des propriétés CSS reconnues, des HTML qui sont compris, et même la transparence des fichiers PNG rétablie (à condition de nommer vos images png de la manière suivante « *-trans.png »).

Bref, le rêve et la sérénité à portée de main en 3 lignes dans l’entête de vos pages :

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Si vous avez suivi ces deux premiers conseils, en moins de temps qu’il ne faut pour l’écrire vous vous êtes épargné de nombreuses nuits blanches et cheveux ! Maintenant, vérifions que tout va bien …

3. IETester vous permet de simuler Internet Explorer

Si vous êtes sous Windows Vista, vous devez avoir remarqué qu’il est impossible d’installer une version 6 d’IE … à moins de passer par une machine virtuelle XP, mais là c’est l’artillerie lourde ! Pas très pratique de tester vos pages sous les versions « embêtantes » d’IE.

La solution est donc d’utiliser ce petit logiciel nommé IETester qui vous permet sous Vista et XP de visualiser votre site de manière illimitée avec toutes les versions d’IE depuis la 5.5 ! Vraiment très pratique, vous pouvez changer de moteur de rendu en un clic et naviguer comme vos visiteurs. Notons également qu’il permet de simuler les versions bêta de IE8.

Pas grand chose d’autre à dire là-dessus … encore une fois : simple et efficace.

4. Browsershots.org un site pour visualiser le votre sous différents navigateurs

Une fois que votre design est terminé, malgré toutes les bonnes précautions prises rien ne vaut un dernier checkup pour s’assurer que tout fonctionne comme l’on veut. C’est pour cette raison que le site browsershots.org est un site à garder dans ses favoris !

En effet, un un clic et quelques (dizaines de) minutes d’attente vous pourrez avoir plus de 50 captures d’écran de votre site sous différentes résolutions (800×600 / 1024×768), OS (Windows 98 -> Vista, Mac OS, Linux ou BSD) et navigateurs (Firefox 1.5->3.1, IE > 4, Chrome, Safari, Opera …). Il suffit juste d’un peu de patience …

Ne pas en abuser car les captures d’écrans sont limitées à un lancement par jour (50 captures il me semble). En tout cas, c’est l’idéal pour montrer à un client (ou se persuader) que le travail que l’on a fait est propre et détecter les gros bugs sous certaines configurations.

Conclusion

Nous arrivons au bout de cet article marathon qui je l’espère vous aura apporté quelques outils supplémentaires. Je ne pense pas être expert en la matière, aussi je serai ravi de connaître d’autres outils que vous avez pu expérimenter. N’hésitez pas à commenter cet article !