Quelles sont les meilleures pratiques pour les sites Web inter-navigateurs?
(J'aimerais que ce soit le wiki définitif de la communauté. Je l'ai tiré de ma propre réponse à cette question .)
Tout spécifier
Un grand nombre de problèmes inter-navigateurs se résument à ceci: vous n’avez rien spécifié, et différents navigateurs émettent des hypothèses différentes. Donc:
Déclarer un doctype valide
Votre doctype indique au navigateur les règles que vous utiliserez dans votre code. Si vous ne spécifiez pas, le navigateur doit deviner, et différents navigateurs devineront différemment.
D'après mon expérience, un doctype "strict" rend mieux IE (permet des choses comme CSS: les sélecteurs de survol sur les divs dans IE7).
Cet article donne une bonne base sur les doctypes.
Utiliser les standards Web
Évitez les balises spécifiques au navigateur ou utilisez-les uniquement lorsque sa défaillance sur d'autres navigateurs n'a aucune incidence sur l'expérience du site.
Validez votre HTML et CSS
Il n'est pas nécessaire que tout soit parfait, mais la validation est un bon retour. Comme Jeff a dit :
Connaître les règles et les limites vous aide à définir ce que vous faites et vous donne des munitions légitimes pour être d'accord ou non. Vous pouvez faire un choix éclairé au lieu d'un choix aléatoire: "Je viens de faire ceci et ça marche".
Imaginez que vous avez ouvert une balise de paragraphe sans jamais la fermer. Si vous ouvrez ensuite une balise de liste, vouliez-vous dire qu'elle se trouvait ou non dans le paragraphe? La validation vous aidera à détecter ce problème, à fermer le tag et à éliminer les ambiguïtés.
Envisager une réinitialisation CSS
Différents navigateurs supposent différentes règles CSS de base. Vous pouvez les aider tous à agir de la même manière en réglant explicitement les différences dès le départ. Eric Meyer, qui a écrit CSS: Le Guide définitif , utilise cette réinitialisation . Un autre choix populaire est YUI Reset CSS .
Utiliser une bibliothèque Javascript pour les interactions DOM
Lorsque votre code Javascript doit fonctionner avec des éléments de votre page, il est préférable d’utiliser une bibliothèque telle que jQuery, Prototype ou MooTools. Ces bibliothèques sont utilisées par plusieurs milliers de développeurs et traitent la plupart des incohérences entre l'interprétation du Javascript par les navigateurs, leur gestion interne et vous fournissent un ensemble cohérent de commandes qui fonctionnent. Essayer de trouver et de résoudre vous-même toutes ces incohérences est une perte de temps et est susceptible de créer des bugs.
Testez dans plusieurs navigateurs, traitez avec IE last
Testez dans plusieurs navigateurs au fur et à mesure. En règle générale, vous constaterez que les navigateurs non-IE se comportent de manière similaire et que IE constitue un cas particulier, surtout si vous suivez les conseils ci-dessus. Si nécessaire, vous pouvez ajouter IE hacks dans une feuille de style distincte et ne le charger que pour les utilisateurs IE.
Quirksmode.com est un bon endroit pour rechercher des différences aléatoires entre navigateurs.
Browsershots.org peut vous aider à montrer comment votre page sera affichée dans un assortiment de navigateurs et de systèmes d’exploitation.
Échouer gracieusement
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 souhaitez que votre site soit utilisable. Concevez dans cet esprit:
Vérifiez le HTML nu
Essayez de charger votre site avec du HTML nu - pas de styles, pas de scripts. Les options de menu sont-elles disponibles? Le contenu principal précède-t-il le contenu secondaire? Le site est-il utilisable, même si moche?
Envisagez une amélioration progressive au moyen de tests
Décrite dans cet article , cette technique utilise javascript pour vérifier si un navigateur a une capacité donnée, telle que la prise en charge d'une propriété CSS donnée, avant de l'utiliser sur la page. Il diffère du navigateur car il teste les fonctionnalités plutôt qu'un navigateur spécifique.
Utilisez une bibliothèque telle que jQuery abstract pour éliminer les différences entre le DOM, AJAX et JavaScript.
Assurez-vous de conserver autant que possible HTML, CSS et Javascript dans des fichiers séparés. Le fait de mélanger la structure, la présentation et le comportement dans votre fichier HTML simplifie la recherche et la résolution des problèmes.
Utilisez Firebug dans Firefox pour:
- Déboguer/parcourir votre JS.
- Voir comment vos feuilles de style sont interprétées et les pirater à la volée pour voir comment résoudre votre problème.
- Voyez combien d'appels vous effectuez pour des ressources distantes et combien de temps ils prennent.
- Profil de votre code.
Chrome et IE8 ont des outils similaires intégrés qui peuvent être utilisés pour la même chose.
Opera et Safari (et IE) ont Firebug Lite .
Ma règle n ° 1 est utilise un doctype strict . HTML ou XHTML, c'est bien, mais l'utilisation du doctype strict supprime pratiquement toutes les bizarreries de navigateur, en particulier dans IE7 +.
Imaginez que vous avez ouvert une balise de paragraphe sans jamais la fermer. Si vous ouvrez ensuite une balise de liste, vouliez-vous dire qu'elle se trouvait ou non dans le paragraphe?
En réalité, vous ne pouvez pas insérer d'autres balises de bloc dans une balise <p>, c'est pourquoi la spécification vous permet d'omettre la balise de fermeture. Si vous commencez une liste sans fermer un paragraphe, celui-ci est implicitement fermé. Et le validateur ne se plaindra pas.
Cela ne veut pas dire que vous ne devriez pas fermer les balises, car cela rend généralement le code plus facile à parcourir (vous n'avez pas besoin de vous souvenir des règles ci-dessus).