(J'aimerais que ce soit le wiki définitif de la communauté. Je l'ai semé à partir de ma propre réponse à cette question .)
Précisez tout
De nombreux problèmes liés à l'inter-navigation se résument à ceci : vous n'avez pas spécifié quelque chose, et les différents navigateurs font des suppositions différentes. Par conséquent :
Déclarer un doctype valide
Votre doctype indique au navigateur les règles que vous allez utiliser dans votre code. Si vous ne le spécifiez pas, le navigateur doit deviner, et les différents navigateurs deviendront différents.
D'après mon expérience, un doctype "strict" permet à IE de mieux se comporter (il permet des choses comme les sélecteurs CSS :hover sur les divs dans IE7).
Cet article donne de bons renseignements sur les doctypes.
Utiliser les normes du Web
Évitez les balises spécifiques aux navigateurs, ou ne les utilisez que si leur échec dans d'autres navigateurs n'a pas d'incidence sur l'expérience du site.
Validez votre HTML et votre CSS
Il n'est pas nécessaire que tout soit parfait, mais la validation est un bon retour d'information. Comme Jeff a dit :
Le fait de connaître les règles et les limites vous aide à définir ce que vous faites, et vous donne des munitions légitimes pour exprimer votre accord ou votre désaccord. Vous pouvez faire un choix éclairé, plutôt qu'un choix aléatoire du type "je fais ça et ça marche".
Imaginez que vous ayez ouvert une balise de paragraphe et que vous ne l'ayez jamais fermée. Si vous ouvrez ensuite une balise de liste, vouliez-vous qu'elle soit à l'intérieur du paragraphe ou non ? La validation vous aidera à le savoir, à fermer la balise et à éliminer toute ambiguïté.
Envisagez une réinitialisation CSS
Les différents navigateurs supposent des règles CSS de base différentes. Vous pouvez les aider à agir de la même manière en aplanissant explicitement les différences dès le départ. Eric Meyer, qui a écrit CSS : Le Guide Définitif , utilise cette remise à zéro . Un autre choix populaire est YUI Reset CSS .
Utiliser une bibliothèque Javascript pour les interactions DOM
Lorsque votre Javascript doit travailler avec des éléments sur votre page, il est préférable d'utiliser une bibliothèque comme jQuery, Prototype ou MooTools. Ces bibliothèques sont utilisées par des milliers de développeurs et elles prennent en compte la plupart des incohérences entre les interprétations de Javascript par les navigateurs, les gèrent en interne et vous fournissent un ensemble cohérent de commandes qui fonctionnent tout simplement. Essayer de trouver et de contourner toutes ces incohérences soi-même est une perte de temps et risque de créer des bogues.
Testé dans plusieurs navigateurs, traité en dernier lieu avec IE
Testez dans plusieurs navigateurs au fur et à mesure. En général, vous constaterez que les navigateurs autres que IE se comportent de la même manière et qu'IE est un cas particulier - surtout si vous suivez les conseils ci-dessus. Si nécessaire, vous pouvez ajouter les hacks IE dans une feuille de style distincte et ne la charger que pour les utilisateurs d'IE.
Quirksmode.com est un bon endroit pour traquer les différences aléatoires entre navigateurs.
Browshots.org peut aider à montrer comment votre page sera affichée dans un assortiment de navigateurs et de systèmes d'exploitation.
Échouer avec élégance
Aucun site ne sera parfait dans tous les navigateurs existants. Si un utilisateur ne dispose pas de Flash, de Javascript, de CSS avancé, etc., vous voulez que votre site soit utilisable de toute façon. Concevez en gardant cela à l'esprit :
Vérifiez le HTML brut
Essayez de charger votre site avec du HTML brut - pas de styles, pas de scripts. Des options de menu sont-elles disponibles ? Le contenu primaire précède-t-il le contenu secondaire ? Le site est-il utilisable, même s'il est laid ?
Envisager une amélioration progressive pilotée par les tests
Décrit dans cet article Cette technique utilise le javascript pour vérifier si un navigateur possède une capacité donnée, telle que la prise en charge d'une propriété CSS donnée, avant de l'utiliser sur la page. Elle est différente du reniflage de navigateur car elle teste les fonctionnalités plutôt qu'un navigateur spécifique.
