Quelle est la meilleure technique constante de la forme, la fonction entre tous les navigateurs web (y compris Google Chrome)?

Question

Version courte:Ce qui est le plus propre et le plus facile à gérer technique pour consistante de la présentation et de l'AJAX fonctionnent dans tous les navigateurs utilisés par les deux développeurs web et les développeurs web des utilisateurs finals?

• IE 6, 7, 8
• Firefox 2, 3
• Safari
• Google Chrome
• Opéra

Version longue:J'ai écrit un web app destinés à d'autres développeurs web.Je veux que mon application pour appuyer les principaux navigateurs web (et de Google Chrome) à la fois la présentation et AJAX comportement.

J'ai commencé sur Firefox/Firebug, puis ajouté des commentaires conditionnels pour un uniforme de style sous IE 6 et 7.Ensuite, à mon grand étonnement, j'ai découvert que jQuery ne se comporte pas de manière identique dans IE;j'ai donc changé mon Javascript pour être portable sur FF et IE en utilisant les conditions et les moins pure jQuery.

Aujourd'hui, j'ai commencé à tester sur Webkit et Google Chrome, et a découvert que, non seulement les styles incompatible à la fois avec FF et IE, Javascript, mais n'est pas en cours d'exécution à tous, probablement en raison d'une syntaxe ou une erreur d'analyse.Je m'attendais à un peu de CSS de travail, mais maintenant j'ai plus de débogage Javascript pour le faire!À ce stade, je souhaite revenir en arrière et de réfléchir avant d'écrire des tas de cas particuliers, pour toutes les situations.

Je suis ne cherche pas une solution miracle, juste les meilleures pratiques pour garder les choses aussi compréhensible et maintenable que possible.Je préfère si cela fonctionne avec pas de serveur-côté de l'intelligence;cependant, si il y a un avantage, par exemple, de vérifier le user-agent et ensuite de retour à des fichiers différents pour les différents navigateurs, qui est très bien si le total de la lisibilité et la maintenabilité de l'application web est plus faible.Merci beaucoup à tous!

Answer 1

Je suis dans une situation similaire, de travailler sur une application web qui est destiné à des professionnels de l'informatique, et nécessaires à l'appui de la même série de navigateurs, moins d'Opéra.

Certaines choses que j'ai appris jusqu'à maintenant:

• Test souvent, comme beaucoup de vos navigateurs cibles que vous le pouvez.Assurez-vous que vous avez le temps pour cela dans votre agenda de développement.
• Boîtes à outils, vous pouvez obtenir en partie de la façon de la croix-prise en charge du navigateur, mais il finira par manquer quelque chose sur certains navigateurs.Planifiez du temps pour le débogage et la recherche de correctifs pour certains navigateurs.
• Si vous besoin de quelque chose qui n'est pas dans une trousse et ne pouvez pas trouver gratuitement un extrait de code, investir un peu de temps pour écrire les fonctions de l'utilitaire qui encapsulent le navigateur comportement dépendant.
• Renseignez-vous à propos de bogues de navigateur, de sorte que vous pouvez diriger vos mise en œuvre autour d'eux.

Un peu plus de choses spécifiques que j'ai appris:

• L'utilisation de code conditionnel basé sur le user-agent que comme un dernier recours, parce que les différentes générations de la "même" navigateur peut avoir des caractéristiques différentes.Au lieu de cela, essai conforme à la norme d'abord du comportement — par exemple, if(node.addEventListener)..., puis des non-fonctions standard — par exemple, if(window.attachEvent)..., et puis, si vous devez, regarder le user-agent pour un type de navigateur et le numéro de version.
• Sachant que lorsque le DOM est "prêt" pour l'accès au script est différent en chaque navigateur.Une bonne boîte à outils abstrait pour vous.
• Les gestionnaires d'événements sont différents dans à peu près tous les navigateurs.Une bonne boîte à outils abstrait pour vous.
• La création des éléments du DOM, en particulier les contrôles de formulaire ou des éléments avec des attributs, peut être difficile avec le document.createElement et l'élément.setAttribute.Tandis que non standard (et un peu sale), l'aide d'un noeud.innerHTML les chaînes qui contiennent des morceaux de HTML semble être plus fiable sur l'ensemble des types de navigateur.Je n'ai pas encore trouvé une boîte à outils qui vous permettra d'utiliser l'élément.setAttribute pour ajouter un nom à un élément de formulaire dans IE.
• CSS différences (et les bugs) sont tout aussi importantes que JS différences.
• Le "noyau dur" des fonctions Javascript (String, Date, RegExp, les fonctions de Tableau) semblent assez fiables et cohérentes sur tous les navigateurs, en particulier par rapport à la DOM/CSS/les fonctions de la Fenêtre.Il y a quelques petits la joie dans le fait que la langue n'est pas entièrement différent sur chaque plate-forme.:-)

Je n'ai pas vraiment courir en Chrome spécifiques JS bugs, mais il est toujours l'un des premiers navigateurs, je test.

HTH

Answer 2

Chrome est en fait un peu différent de Safari, il utilise un complètement différent de javascript mise en œuvre et les problèmes ont été signalés avec prototype et jquery.Je ne serais pas s'inquiéter trop pour l'instant, c'est encore une beta début de la version du navigateur, et de telles incohérences va probablement être traités comme des bugs.Voici l' rapport de bug.

Answer 3

Un "silver bullet", vous pouvez envisager de tourner à l'est Google Web Toolkit (GWT).

Je crois qu'il prend en charge tous les navigateurs qui vous intéresse, et vous donne la possibilité de code de votre INTERFACE utilisateur en Java compatible IDE comme Eclipse.L'avantage de ceci est que vous pouvez utiliser des outils IDE pour la complétion de code et l'erreur de compilation de vérification, ce qui améliore grandement le développement à grande échelle de l'INTERFACE utilisateur projets.

Si vous utilisez GWT composants de l'INTERFACE utilisateur, il va se cacher beaucoup de navigateur spécifique à la malveillance d'avoir à traiter avec, mais quand vous compilez, permettra de créer un compact, de déployer un fichier pour chaque plateforme de navigateur.De cette façon, vous ne jamais télécharger tout IE code spécifique si vous affichez l'application dans Firefox.Vous aurez également un côté client stub générées, ce qui vous permettra de charger approprié compilé ensemble de JS.Pour adoucir l'affaire, ces fichiers sont mis en cache, donc les performances perçues est généralement améliorée pour le retour des visiteurs.

Answer 4

Le paysage a considérablement évolué pour accueillir de développement de navigateurs. jQuery, Prototype et d'autres cadres de la croix-navigateur Javascript. Réinitialise CSS sont bonnes pour partir sur une toile vierge pour tous les navigateurs. Plan et 960 sont à la fois des frameworks CSS pour aider à la mise en page à l'aide de Grille CSS layouts les techniques qui semble être très populaire ces jours-ci.

Comme pour les autres CSS bizarreries dans les différents navigateurs, il n'y a pas de saint graal ici, et la seule option est de tester votre site sur différents navigateurs et de l'utilisation de ce ressource impressionnante et certainement rejoindre la liste de diffusion pour économiser jusqu'à un certain temps.

Si vous travaillez sur un volume élevé de production du site, alors vous pouvez utiliser un service comme browsercam.com dans la fin du jeu pour s'assurer que le site ne se casse pas horriblement dans certains navigateur.

Enfin, n'essayez pas de rendre le site le même aspect dans chaque navigateur.Votre conception principale devrait cible IE/FF et vous devez être d'accord avec les compromis raisonnables sur les autres.L'utilisation de la classé navigateur graphique à l'étroit sur la prise en charge du navigateur.

Comme pour les meilleures pratiques, en commençant à l'aide de maquettes sur papier blanc ou un service comme Balsamiq mockups.Je suis toujours surpris de voir comment de nombreux développeurs de commencer avec un éditeur de texte au lieu d'un fil de fer, mais là encore je ne tourne que d'un an en arrière avant de se rendre compte de comment grand un gain de temps il est.Ont propre séparation de mise en page (HTML), la présentation (CSS) et les comportements (Javascript).Il ne devrait pas être des éléments de style dans le HTML, pas de présentation en Javascript (utilisation .addClass('highlight') au lieu de .css({'background-color': 'red'});).

Si vous n'êtes pas familier avec les termes en gras ce post, Google devrait être fructueuse pour votre site web en développement de carrière et de la productivité.

Answer 5

Si vous êtes à partir d'une base de réinitialisation ou de cadre et ont compté pour IE et tout cela est encore bizarre, vous pouvez vérifier les éléments suivants:

• Tout valide?Le CSS et le HTML?
• Les liens rompus d'un fichier inclus (js, css, etc?).Dans google Chrome/Safari, si votre feuille de style lien est cassé, tous vos liens pourraient se retrouver rouge.(quelque chose à voir avec la 404 par défaut le style je pense)
• Toute bizarre exigences de votre js plugins que vous utilisez peut-être?(est-ce le fichier css doivent venir au fichier js comme jquery.thickbox?)

Answer 6

Pour l'INTERFACE utilisateur, découvrez Ext.

Il est grand comme une bibliothèque autonome, mais il peut également être utilisé avec jQuery, YUI, Prototype et GWT.

Échantillons: http://extjs.com/deploy/dev/examples/samples.html

Answer 7

J'ai trouvé quatre choses utiles dans le développement d'applications JavaScript:

• La détection de fonctionnalité
• Les bibliothèques
• Le Développement itératif à l'aide de la Virtualisation
• JavaScript:Le Guide Définitif, Douglas Crockford & John Resig

La Détection De Fonctionnalité

Utiliser la réflexion à demander si le navigateur prend en charge la fonction de votre choix.Si vous voulez savoir ce que la gestion des événements un navigateur prend en charge, vous pouvez si(el.addEventHandler) conformément à la norme W3C, si(el.attachEvent) pour l'IE-type, et retombe enfin sur el.['onSomeEvent'].

UN GROS MAIS!

Certains navigateurs peuvent mentir au sujet de ce que les caractéristiques qu'ils soutiennent.Je ne me souviens pas, mais j'ai couru dans un problème où Firefox a mis en œuvre un DOM, mais serait de retour faux si vous avez testé pour cette fonction!

Les bibliothèques

Depuis que vous travaillez déjà avec jQuery, je vais économiser de l'explication.Mais si vous êtes en cours d'exécution dans les problèmes que vous pourriez envisager de YUI pour c'est merveilleux de compatibilité inter-navigateur.Ils travaillent même ensemble.

Le Développement itératif avec la Virtualisation

Peut-être mon meilleur conseil:Courir tous de votre environnement de test à la fois.Obtenir une distribution Linux, Compiz Fusion et un tas de RAM.Télécharger une copie de VMWare VMWare Server ou de Sun Virtual Box et installer quelques systèmes d'exploitation.Obtenir les images pour Windows XP, Windows Vista et Mac OS X.

L'idée de base est ceci:Compiz Fusion vous offre 4 postes de travail mappé sur un Cube.1 de ces postes de travail est de votre ordinateur Linux, la prochaine votre Virtutual Windows XP boîte, l'un après que Vista, le dernier Mac OS X.Après l'écriture de code, vous alt-tab en ordinateur virtuel et admirez votre travail.En Plus, c'est génial.

JavaScript:Le Guide Définitif, Douglas Crockford & John Resig

Ces trois sources de fournir la plupart de mes informations pour le développement JavaScript.Le guide Définitif est peut-être le meilleur livre de référence pour le JavaScript.

Douglas Crockford est un JavaScript gourou (je déteste le mot) à Yahoo.Recherche de sa série "Douglas Crockford Théorie des DOM", "Douglas Crockford Avancés JavaScript", "Douglas Crockford Théorie des Dom", et ""Douglas Crockford Les Bonnes Parties" sur Yahoo!Vidéos.

John Resig (comme vous le savez) a écrit jQuery.Son site web à l'ejohn.org contient une mine de JavaScript de l'information, et si vous chercher sur Google, vous trouverez qu'il a donné un certain nombre de présentations sur la défensive, JavaScript techniques.

...Bonne chance!

Answer 8

Juste pour que vous en avez moins de navigateur vous inquiétez pas, google Chrome utilise le même moteur de rendu que Safari.Donc, si il fonctionne dans Safari, il devrait fonctionner exactement la même dans Chrome.

Voir ce post sur Matt Cutts blog.

Google Chrome utilise WebKit pour le rendu, qui est le même moteur de rendu que Apple Safari navigateur, donc si votre site est compatible avec Safari, il doit travailler beaucoup dans Chrome.

Mise à jour:Il semble que ce soit désormais daté info.Veuillez voir Vox commentaire de cette réponse.

Answer 9

Si votre priorité est exactement conforme à la présentation sur tous les navigateurs listés avec pas de disparités, vous devriez probablement être à la recherche à l'AS3 et Flex.

Answer 10

Personnellement, j'utilise Mootools comme un simple léger framework javascript.Il est simple à utiliser et prend en charge tous les navigateurs ci-dessus (à l'exception de Chrome, mais qui semble trop de travail pour autant que je puisse dire).

Aussi, pour assurer la cohérence entre les navigateurs, je reçois une fonctionnalité/style/comportement/etc.pour travailler dans un navigateur en premier (généralement de Firefox 3 avec firebug), puis immédiatement vérifier pour s'assurer qu'il fonctionne dans tous les autres navigateurs (en laissant IE6 pour le dernier).Si ça ne marche pas, je inveset le temps de corriger tout de suite, parce que sinon je sais que je n'aurai pas le temps plus tard (dans mon expérience, obtenir des choses à travailler de la croix-navigateur prend environ 50% de mon dev.de temps ;-) )

Answer 11

La validation de votre javascript avec un bon "parties" + navigateur sur JsLint.com rend moins susceptibles d'avoir des JavaScripts se comporter différemment dans les FF, Safari, etc.

Sinon, en utilisant des standards et de la validation de votre code ainsi que la construction sur les techniques existantes comme jQuery devrait rendre votre site se comportent de la même dans tous les navigateurs sauf IE - et il n'y a pas de recette magique pour IE - c'est juste des bugs de partout...