Discussion :

[scorplayer]

Bonjour à tous,

Je fais actuellement un site Internet avec une mise en page CSS (évidemment!). Je ne sais pas si c'est la même chose pour tout le monde mais le travail le plus difficile (et le plus long) est d'assurer la compatibilité IE/Firefox.
Enfin, malgré cela, tout marchait jusqu'à ce que j'utilise IE 6 et FF 3 Beta. Je me suis ainsi rendu compte que la mise en page n'était pas la même.

Je souhaiterai donc savoir s'il existe des astuces pour éviter de revenir à chaque fois sur le code afin d'assurer la compatibilité des différentes versions IE/Firefox.
Y a-t-il une manière de programmer pour être quasi sûr du bon fonctionnement quelque soit le navigateur?

Merci à tous

Scorplayer

[Erwan31]

Je souhaiterai donc savoir s'il existe des astuces pour éviter de revenir à chaque fois sur le code afin d'assurer la compatibilité des différentes versions IE/Firefox.
Y a-t-il une manière de programmer pour être quasi sûr du bon fonctionnement quelque soit le navigateur?

Bonsoir,
oui et non... il y a certains automatismes qui s'acquièrent au fur et à mesure
de l'apprentissage mais celui-ci n'est jamais vraiment terminé.
Connaitre la totalité des bugs de rendu et des différences de comportement de tous les navigateurs est pratiquement impossible tellement ceux-ci sont nombreux voire même non répertoriés.
Malheureusement tant qu'il n'existera pas de moteur de rendu unique (c-à-d probablement jamais), les test navigateurs seront le lot commun de tous ceux qui se lancent dans un travail d'intégration.
Ceci dit les écart se resserrent et les chose s'améliorent petit à petit...

Une méthode efficace consiste à afficher ses pages correctement sur un
navigateur relativement conforme aux standards comme Firefox ou Opera et
dans un second temps tester sur IE6 puis IE7 en appliquant des correctifs
CSS ciblés à placer dans une feuille de style IE appelée en commentaires
conditionnels.
Les test sur Safari ou Opera (entre autres) pourront se faire dans un troisième temps.

Je te conseil de jeter un oeil aux liens qui suivent :
> les principaux bugs liés au haslayout (concept spécifique à IE). Pour info IE8 a supprimé le haslayout.
> Les bugs IE6 les plus courant.
> Le mécanisme de fusion des marges
> Les bugs IE7
> float, clear et contexte de formatage
> Eviter surtout le mode Quirks.

[Er3van]

Une astuce toute bête : le design ( côté graphique pur ) se fait en une heure, deux, alors que le site peut se faire en 40.
Du coup, je te conseille, quand tu construit ton site, de ne commencer par mettre que des "border:1px solid #XXX" et ce sur tous tes blocs. Ca permet de bien voir au fur et à mesure que ton site avance son évolution et les problèmes qui risquent de venir en testant sur FF et IE à chaque avancée.
Si tu commences par mettre tout de suite le côté graphique en place tu vas perdre bcp de temps à faire des correctifs au fur et à mesure que tu rajoutes des blocs.

Autre conseil :
Si tu peux t'en passer, limite l'utilisation des margin/padding, du moins au début du développement, c'est aussi une source d'erreur, tu feras tes ajustement à la fin.

[Erwan31]

Hello,

Du coup, je te conseille, quand tu construit ton site, de ne commencer par mettre que des "border:1px solid #XXX" et ce sur tous tes blocs.

Oui et non, les border verticaux peuvent empêcher le mécanisme du fusion des marges dans certains cas de figure ou provoquer des décalages qui n'apparaitront pas en leur absence.
Les border de 1px servent provisoirement à repérer ou s'arrête les blocs mais pour ma part je conseil plutôt d'utiliser des background pour les raisons que j'ai citées.

Si tu peux t'en passer, limite l'utilisation des margin/padding, du moins au début du développement, c'est aussi une source d'erreur, tu feras tes ajustement à la fin.

Difficile de s'en passer parfois mais les marges (bien plus que les padding)
peuvent en effet être source de différences d'affichage notables
(dble float margin bug, fusion des marges, marge en % sous IE7...)
mais avec un peu d'expérience et de connaissances minimum cela devient
plus facilement anticipable.

[Er3van]

Oui et non, les border verticaux peuvent empêcher le mécanisme du fusion des marges dans certains cas de figure ou provoquer des décalages qui n'apparaitront pas en leur absence.
Les border de 1px servent provisoirement à repérer ou s'arrête les blocs mais pour ma part je conseil plutôt d'utiliser des background pour les raisons que j'ai citées.

Je l'ignorais, mais maintenant j'utiliserais des background ^^
Je n'ai jamais noté de problème de cet ordre ceci dit...
Pour autant ça ne serait pas étonnant :
Mozilla : bordure à l'extérieur
IE : bordure à l'intérieure
:S

Difficile de s'en passer parfois

Y a des situations où on n'a pas le choix, mais y a bcp de "margin-left:10px;" qui sont mis par esthétisme et qui finalement causent des problèmes.


Autre astuce pour le développement en général, mais qui peut s'avérer aussi utile : prendre en compte la loi de Murphy
Y a des enchainements d'actions qui réagissent pas toujours pareils sous les différents navigateurs, donc bien penser à tester un maximum de combinaison possibles et débiles !

[Erwan31]

Je l'ignorais, mais maintenant j'utiliserais des background ^^
Je n'ai jamais noté de problème de cet ordre ceci dit...
Pour autant ça ne serait pas étonnant :

Voir ces explication illustrées de l'ami Florent

[scorplayer]

Bonjour,

Merci à tous les deux pour vos conseils. Je ne manquerai pas d'aller voir les liens que Erwan31 m'a donné. Pour résumé, il faut connaître les bugs sous les différents navigateurs afin de les contourner ? Il n'y a donc pas d'astuces...

je conseil plutôt d'utiliser des background

C'est aussi ce que je conseille : j'utilise des background et ça marche nikel pour les corrections d'erreurs.

[Erwan31]

Bonjour,
Merci à tous les deux pour vos conseils. Je ne manquerai pas d'aller voir les liens que Erwan31 m'a donné. Pour résumé, il faut connaître les bugs sous les différents navigateurs afin de les contourner ? Il n'y a donc pas d'astuces...

Oh là non! Amha il vaut mieux fonctionner de manière heuristique:
tu apprends par l'erreur et la recherche. Tu essayes de trouver si ton
problème d'affichage vient d'un bug répertorié, c'est peut-être la meilleure
façon de retenir et de ne pas reproduire indéfiniment les mêmes erreurs.

Une astuce pour corriger des bugs d'IE consiste à donner le layout (je te
conseil d'aller sur les premiers liens en gras) à un bloc ou un élément inline
(via un zoom:1 provisoire) à chaque fois que tu as un bug sur IE dont tu
ne connais pas l'origine.

Ceci dit il a certains bugs qu'il est préférable de connaître comme le Double
float margin bug ou le 3 pixel jog bug (dans le 2ème liens que je t'ai donné) et
les principaux bugs de haslayout.
Et j'ai oublié aussi float, clear et contexte de formatage