Was ist die beste Technik für eine einheitliche Form und Funktion zwischen allen Webbrowsern (einschließlich Google Chrome)?

StackOverflow https://stackoverflow.com/questions/45239

  •  09-06-2019
  •  | 
  •  

Frage

Kurzfassung:Was ist die sauberste und wartbarste Technik für eine konsistente Präsentation und AJAX-Funktion in allen Browsern, die sowohl von Webentwicklern als auch von Endbenutzern der Webentwickler verwendet werden?

  • IE 6, 7, 8
  • Firefox 2, 3
  • Safari
  • Google Chrome
  • Oper

Lange Version:Ich habe ein geschrieben Web-App für andere Webentwickler.Ich möchte, dass meine App die wichtigsten Webbrowser (plus Google Chrome) sowohl bei der Präsentation als auch beim AJAX-Verhalten unterstützt.

Ich begann mit Firefox/Firebug und fügte dann bedingte Kommentare für ein einheitliches Design unter IE 6 und 7 hinzu.Als nächstes stellte ich zu meinem Erstaunen fest, dass sich jQuery im IE nicht identisch verhält;also ich habe mein Javascript so geändert, dass es auf FF und IE portierbar ist Verwendung von Bedingungen und weniger reinem jQuery.

Heute habe ich mit dem Testen auf Webkit und Google Chrome begonnen und festgestellt, dass nicht nur die Stile nicht mit FF und IE übereinstimmen, sondern dass Javascript auch überhaupt nicht ausgeführt wird, wahrscheinlich aufgrund eines Syntax- oder Analysefehlers.Ich habe etwas CSS-Arbeit erwartet, aber jetzt muss ich mehr Javascript-Debugging durchführen!An dieser Stelle möchte ich einen Schritt zurücktreten und nachdenken, bevor ich Stapel von Sonderfällen für alle Situationen schreibe.

Ich bin Wir suchen nicht nach einer Wunderwaffe, sondern nur nach Best Practices um die Dinge so verständlich und wartbar wie möglich zu halten.Ich bevorzuge es, wenn dies ohne serverseitige Intelligenz funktioniert.Wenn es jedoch einen Vorteil gibt, beispielsweise den Benutzeragenten zu überprüfen und dann verschiedene Dateien an verschiedene Browser zurückzugeben, ist das in Ordnung, wenn die Gesamtverständlichkeit und Wartbarkeit der Web-App geringer ist.Danke euch allen!

War es hilfreich?

Lösung

Ich befinde mich in einer ähnlichen Situation und arbeite an einer Web-App, die sich an IT-Experten richtet und dieselben Browser, außer Opera, unterstützen muss.

Einige allgemeine Dinge, die ich bisher gelernt habe:

  • Testen Sie häufig und in so vielen Ihrer Zielbrowser wie möglich.Stellen Sie sicher, dass Sie in Ihrem Entwicklungsplan dafür Zeit haben.
  • Toolkits können Ihnen einen Teil des Weges zur browserübergreifenden Unterstützung erleichtern, aber bei manchen Browsern wird Ihnen irgendwann etwas entgehen.Planen Sie etwas Zeit zum Debuggen und Recherchieren von Fehlerbehebungen für bestimmte Browser ein.
  • Wenn Sie etwas benötigen, das nicht in einem Toolkit enthalten ist, und kein kostenloses Code-Snippet finden können, investieren Sie etwas Zeit, um Hilfsfunktionen zu schreiben, die das browserabhängige Verhalten kapseln.
  • Informieren Sie sich über bekannte Browserfehler, damit Sie diese bei Ihrer Implementierung umgehen können.

Ein paar spezifischere Dinge, die ich gelernt habe:

  • Verwenden Sie bedingten Code, der auf dem Benutzeragenten basiert, nur als letzten Ausweg, da verschiedene Generationen des „gleichen“ Browsers möglicherweise unterschiedliche Funktionen haben.Testen Sie stattdessen zunächst das standardkonforme Verhalten – z. B. if(node.addEventListener)..., dann allgemeine nicht standardmäßige Funktionen – z. B. if(window.attachEvent)..., und suchen Sie dann bei Bedarf im Benutzeragenten nach einem bestimmten Browsertyp und einer bestimmten Versionsnummer.
  • Zu wissen, wann das DOM für den Skriptzugriff „bereit“ ist, ist in nahezu jedem Browser unterschiedlich.Ein gutes Toolkit wird dies für Sie abstrahieren.
  • Event-Handler sind in nahezu jedem Browser unterschiedlich.Ein gutes Toolkit wird dies für Sie abstrahieren.
  • Das Erstellen von DOM-Elementen, insbesondere Formularsteuerelementen oder Elementen mit Attributen, kann mit document.createElement und element.setAttribute schwierig sein.Die Verwendung von node.innerHTML mit Zeichenfolgen, die HTML-Teile enthalten, ist zwar kein Standard (und irgendwie eklig), scheint aber bei allen Browsertypen zuverlässiger zu sein.Ich habe noch kein Toolkit gefunden, mit dem Sie element.setAttribute verwenden können, um einem Formularelement im IE einen „Namen“ hinzuzufügen.
  • CSS-Unterschiede (und Fehler) sind genauso wichtig wie JS-Unterschiede.
  • Die „Kern“-Javascript-Funktionen (String-, Datums-, RegExp- und Array-Funktionen) scheinen in allen Browsern ziemlich zuverlässig und konsistent zu sein, insbesondere im Vergleich zu den DOM/CSS/Window-Funktionen.Es ist eine kleine Freude, dass die Sprache nicht auf jeder Plattform völlig anders ist.:-)

Mir sind keine Chrome-spezifischen JS-Fehler aufgefallen, aber es ist immer einer der ersten Browser, die ich teste.

HTH

Andere Tipps

Chrome unterscheidet sich tatsächlich ein wenig von Safari, es verwendet eine völlig andere Javascript-Implementierung und es wurden Probleme sowohl mit Prototyp als auch mit JQuery gemeldet.Ich würde mir darüber im Moment keine allzu großen Sorgen machen, da es sich noch um eine frühe Beta-Version des Browsers handelt und solche Inkonsistenzen wahrscheinlich als Fehler behandelt werden.Hier ist die Fehlerbericht.

Eine „Wunderwaffe“, an die Sie sich vielleicht wenden könnten, ist: Google Web Toolkit (GWT).

Ich glaube, es unterstützt alle Browser, die Sie interessieren, und gibt Ihnen die Möglichkeit, Ihre Benutzeroberfläche in einer Java-kompatiblen IDE wie Eclipse zu programmieren.Dies hat den Vorteil, dass Sie IDE-Tools zur Codevervollständigung und zur Fehlerprüfung während der Kompilierung verwenden können, was die Entwicklung großer UI-Projekte erheblich verbessert.

Wenn Sie GWT-UI-Komponenten verwenden, wird eine Menge browserspezifischer Unannehmlichkeiten ausgeblendet, die nicht berücksichtigt werden müssen. Beim Kompilieren wird jedoch eine kompakte Bereitstellungsdatei für jede Browserplattform erstellt.Auf diese Weise laden Sie niemals IE-spezifischen Code herunter, wenn Sie die App in Firefox anzeigen.Außerdem wird ein clientseitiger Stub generiert, der das entsprechende kompilierte JS-Bundle lädt.Um das Ganze zu versüßen, sind diese Dateien zwischenspeicherbar, sodass die wahrgenommene Leistung für wiederkehrende Besucher im Allgemeinen verbessert wird.

Die Landschaft hat sich erheblich weiterentwickelt, um eine browserübergreifende Entwicklung zu ermöglichen. jQuery, Prototyp und es gibt andere Frameworks für browserübergreifendes Javascript. CSS wird zurückgesetzt eignen sich gut für den Start auf einer gemeinsamen leeren Leinwand für alle Browser. Entwurf Und 960 sind beides CSS-Frameworks, die bei der Verwendung von Layouts helfen CSS-Rasterlayouts Techniken, die heutzutage immer beliebter zu werden scheinen.

Was andere CSS-Macken in den verschiedenen Browsern betrifft, gibt es hier keinen heiligen Gral und die einzige Möglichkeit besteht darin, Ihre Website in verschiedenen Browsern zu testen und diese zu verwenden tolle Ressource und treten Sie auf jeden Fall einer Mailingliste bei, um etwas Zeit zu sparen.

Wenn Sie an einer Website mit hohem Produktionsaufkommen arbeiten, können Sie im Endspiel einen Dienst wie browsercam.com nutzen, um sicherzustellen, dass die Website in einigen Browsern nicht schrecklich abstürzt.

Versuchen Sie nicht, die Website in jedem Browser gleich aussehen zu lassen.Ihr primäres Design sollte auf IE/FF abzielen und Sie sollten mit angemessenen Kompromissen bei anderen einverstanden sein.Benutzen Sie die abgestuftes Browserdiagramm um die Browserunterstützung einzugrenzen.

Was Best Practices betrifft, beginnen Sie mit der Verwendung von Wireframes auf leerem Papier oder einem ähnlichen Dienst Balsamiq-Modelle.Ich bin immer noch überrascht, wie viele Entwickler mit einem Editor statt mit einem Wireframe beginnen, aber andererseits habe ich erst vor einem Jahr gewechselt, bevor mir klar wurde, wie viel Zeit das spart.Sorgen Sie für eine klare Trennung von Layout (HTML), Präsentation (CSS) und Verhalten (Javascript).Es sollten keine Styling-Elemente in HTML vorhanden sein, keine Darstellung in Javascript (verwenden Sie .addClass('highlight') anstatt .css({'background-color': 'red'});).

Wenn Sie mit den fett gedruckten Begriffen in diesem Beitrag nicht vertraut sind, dürfte es für Ihre Karriere als Webentwickler und Ihre Produktivität hilfreich sein, sie zu googeln.

Wenn Sie mit einem Basis-Reset oder einem Framework beginnen und den IE berücksichtigt haben und immer noch alles unruhig ist, sollten Sie Folgendes noch einmal überprüfen:

  • Alles validiert?CSS und HTML?
  • Gibt es defekte Links zu einer enthaltenen Datei (JS, CSS usw.?).Wenn Ihr Stylesheet-Link in Chrome/Safari kaputt ist, werden möglicherweise alle Ihre Links rot angezeigt.(hat meiner Meinung nach etwas mit dem standardmäßigen 404-Stil zu tun)
  • Gibt es seltsame Anforderungen an Ihre JS-Plugins, die Sie möglicherweise verwenden?(Muss die CSS-Datei vor der JS-Datei stehen, wie bei jquery.thickbox?)

Informationen zur Benutzeroberfläche finden Sie hier Ext.

Als eigenständige Bibliothek eignet sie sich hervorragend, kann aber auch mit jQuery, YUI, Prototype und GWT verwendet werden.

Proben: http://extjs.com/deploy/dev/examples/samples.html

Bei der Entwicklung von JavaScript-Anwendungen habe ich vier Dinge als hilfreich empfunden:

  • Merkmalserkennung
  • Bibliotheken
  • Iterative Entwicklung mittels Virtualisierung
  • JavaScript:Der endgültige Leitfaden, Douglas Crockford und John Resig

Merkmalserkennung

Fragen Sie mithilfe von Reflection, ob der Browser die gewünschte Funktion unterstützt.Wenn Sie wissen möchten, welche Ereignisbehandlung ein Browser unterstützt, können Sie if(el.addEventHandler) für W3C-Konformität, if(el.attachEvent) für den IE-Typ und schließlich auf el.['onSomeEvent'] zurückgreifen.

EIN GROSSES ABER!

Browser lügen manchmal darüber, welche Funktionen sie unterstützen.Ich kann mich nicht erinnern, aber ich bin auf ein Problem gestoßen, bei dem Firefox eine DOM-Funktion implementiert hat, aber false zurückgegeben hat, wenn Sie diese Funktion getestet haben!

Bibliotheken

Da Sie bereits mit jQuery arbeiten, speichere ich mir die Erklärung.Wenn Sie jedoch auf Probleme stoßen, sollten Sie YUI in Betracht ziehen, da es eine wunderbare Cross-Browser-Kompatibilität bietet.Sie arbeiten sogar zusammen.

Iterative Entwicklung mit Virtualisierung

Vielleicht mein bester Rat:Führen Sie alle Ihre Testumgebungen gleichzeitig aus.Holen Sie sich eine Linux-Distribution, Compiz Fusion und eine Menge RAM.Laden Sie eine Kopie von VMWare Server oder Sun Virtual Box herunter und installieren Sie einige Betriebssysteme.Holen Sie sich Bilder für Windows XP, Windows Vista und Mac OS X.

Die Grundidee ist folgende:Compiz Fusion bietet Ihnen 4 Desktops, die einem Cube zugeordnet sind.Einer dieser Desktops ist Ihr Linux-Computer, der nächste Ihr virtueller Windows XP-Rechner, der übernächste Vista, der letzte Mac OS X.Nachdem Sie etwas Code geschrieben haben, gehen Sie bei gedrückter Alt-Tab-Taste in den virtuellen Computer und sehen sich Ihre Arbeit an.Außerdem sieht es fantastisch aus.

JavaScript:Der endgültige Leitfaden, Douglas Crockford und John Resig

Diese drei Quellen liefern die meisten meiner Informationen für die JavaScript-Entwicklung.Der Definitive Guide ist vielleicht das beste Nachschlagewerk für JavaScript.

Douglas Crockford ist ein JavaScript-Guru (ich hasse das Wort) bei Yahoo.Suchen Sie seine Serien „Douglas Crockford Theory of the DOM“, „Douglas Crockford Advanced JavaScript“, „Douglas Crockford Theory of the Dom“ und „Douglas Crockford The Good Parts“ auf Yahoo!Videos.

John Resig hat (wie Sie wissen) jQuery geschrieben.Seine Website unter ejohn.org enthält eine Fülle von JavaScript-Informationen, und wenn Sie sich bei Google umsehen, werden Sie feststellen, dass er eine Reihe von Präsentationen zu defensiven JavaScript-Techniken gehalten hat.

...Viel Glück!

Damit Sie sich um einen Browser weniger kümmern müssen, verwendet Chrome dieselbe Rendering-Engine wie Safari.Wenn es also in Safari funktioniert, sollte es in Chrome genauso funktionieren.

Sehen dieser Beitrag auf Matt Cutts‘ Blog.

Google Chrome verwendet zum Rendern WebKit, die gleiche Rendering-Engine wie der Safari-Browser von Apple. Wenn Ihre Website also mit Safari kompatibel ist, sollte sie in Chrome hervorragend funktionieren.

Aktualisieren:Es sieht so aus, als ob diese Informationen mittlerweile veraltet sind.Bitte lesen Sie den Kommentar von Vox zu dieser Antwort.

Wenn Ihre oberste Priorität eine exakt konsistente Darstellung in allen aufgeführten Browsern ohne Unterschiede ist, sollten Sie sich wahrscheinlich AS3 und Flex ansehen.

Persönlich verwende ich Mootools als einfaches, leichtes Javascript-Framework.Es ist einfach zu verwenden und unterstützt alle oben genannten Browser (außer Chrome, aber soweit ich das beurteilen kann, scheint das auch zu funktionieren).

Um die Konsistenz zwischen den Browsern sicherzustellen, erhalte ich außerdem eine Funktion/einen Stil/ein Verhalten/etc.um zuerst in einem Browser zu funktionieren (normalerweise Firefox 3 mit Firebug), und prüfen Sie dann sofort, ob es in allen anderen Browsern funktioniert (und lassen Sie IE6 als letztes übrig).Wenn dies nicht der Fall ist, investiere ich die Zeit, um das Problem sofort zu beheben, da ich sonst weiß, dass ich später keine Zeit mehr habe (meiner Erfahrung nach nimmt es etwa 50 % meiner Entwicklungsarbeit in Anspruch, Dinge browserübergreifend zum Laufen zu bringen.Zeit ;-) )

Validieren Sie Ihr Javascript mit einem „guten Teil“ + Browser JsLint.com verringert die Wahrscheinlichkeit, dass sich JavaScripts in FF, Safari usw. anders verhalten.

Ansonsten – die Verwendung von Standards und die Validierung Ihres Codes sowie der Aufbau auf vorhandenen Techniken wie jQuery sollte dazu führen, dass sich Ihre Website in allen Browsern außer dem IE gleich verhält – und es gibt kein Zauberrezept für den IE – es gibt einfach überall Fehler …

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top