webentwicklung-frage-antwort-db.com.de

Was sind die Best Practices für browserübergreifende Websites?

(Ich möchte, dass dies das endgültige Community-Wiki ist. Ich habe es aus meiner eigenen Antwort auf diese Frage abgeleitet.)

Alles angeben

Viele browserübergreifende Probleme laufen darauf hinaus: Sie haben nichts angegeben, und verschiedene Browser gehen von unterschiedlichen Annahmen aus. Deshalb:

Deklarieren Sie einen gültigen Doctype

Ihr Doctype teilt dem Browser mit, welche Regeln Sie in Ihrem Code verwenden werden. Wenn Sie nicht angeben, muss der Browser raten, und verschiedene Browser raten unterschiedlich.

Meiner Erfahrung nach sorgt ein "strenger" Doctype dafür, dass sich IE besser verhält (ermöglicht Dinge wie CSS: Hover-Selektoren auf Divs in IE7).

Dieser Artikel gibt einen guten Hintergrund über Doctypes.

Verwenden Sie Webstandards

Vermeiden Sie browserspezifisches Markup oder verwenden Sie es nur, wenn der Fehler in anderen Browsern für die Website-Erfahrung nicht von Bedeutung ist.

Validieren Sie Ihr HTML und CSS

Sie müssen nicht alles perfekt machen, aber die Validierung ist ein gutes Feedback. Wie Jeff sagte :

Wenn Sie die Regeln und Grenzen kennen, können Sie besser definieren, was Sie tun, und Sie erhalten legitime Munition, wenn Sie zustimmen oder nicht zustimmen. Sie können eine informierte Auswahl treffen, anstatt eine zufällige "Ich mache das einfach und es funktioniert".

Stellen Sie sich vor, Sie haben ein Absatz-Tag geöffnet und nie geschlossen. Wenn Sie dann ein Listentag öffnen, haben Sie gemeint, dass es sich innerhalb des Absatzes befindet oder nicht? Durch die Validierung können Sie dies erkennen, das Tag schließen und Mehrdeutigkeiten beseitigen.

Betrachten Sie einen CSS-Reset

Verschiedene Browser setzen unterschiedliche CSS-Grundregeln voraus. Sie können allen helfen, das Gleiche zu tun, indem Sie die Unterschiede im Vorfeld explizit beseitigen. Eric Meyer, der CSS: The Definitive Guide geschrieben hat, verwendet diesen Reset . Eine andere beliebte Wahl ist YUI Reset CSS .

Verwenden Sie eine Javascript-Bibliothek für DOM-Interaktionen

Wann immer Ihr Javascript mit Elementen auf Ihrer Seite arbeiten muss, ist es am besten, eine Bibliothek wie jQuery, Prototype oder MooTools zu verwenden. Diese Bibliotheken werden von vielen Tausenden von Entwicklern verwendet. Sie berücksichtigen die meisten Inkonsistenzen zwischen der Interpretation von Javascript durch den Browser, behandeln diese intern und bieten Ihnen einen konsistenten Satz von Befehlen, die einfach funktionieren. Der Versuch, all diese Inkonsistenzen selbst zu finden und zu umgehen, ist Zeitverschwendung und führt wahrscheinlich zu Fehlern.

Testen Sie in mehreren Browsern, beschäftigen Sie sich zuletzt mit IE

Testen Sie unterwegs in mehreren Browsern. Im Allgemeinen werden Sie feststellen, dass sich Nicht-IE-Browser ähnlich verhalten, und IE ist ein Sonderfall - insbesondere, wenn Sie den obigen Hinweisen folgen. Bei Bedarf können Sie IE Hacks in einem separaten Stylesheet hinzufügen und nur für IE Benutzer laden.

Quirksmode.com ist ein guter Ort, um zufällige Browser-Unterschiede aufzuspüren.

Browsershots.org kann Ihnen zeigen, wie Ihre Seite in einer Auswahl von Browsern und Betriebssystemen angezeigt wird.

Würdevoll scheitern

Keine Seite wird in jedem existierenden Browser perfekt aussehen. Wenn ein Benutzer nicht über Flash, Javascript, erweitertes CSS usw. verfügt, soll Ihre Website trotzdem verwendet werden können. Entwerfen Sie in diesem Sinne:

Überprüfen Sie den HTML-Code

Versuchen Sie, Ihre Site mit reinem HTML zu laden - ohne Stile und ohne Skripte. Sind Menüoptionen verfügbar? Steht primärer Inhalt vor sekundärem Inhalt? Ist die Seite nutzbar, auch wenn sie hässlich ist?

Erwägen Sie eine testgetriebene progressive Verbesserung

In diesem Artikel beschrieben, verwendet diese Technik JavaScript, um zu überprüfen, ob ein Browser über eine bestimmte Funktion verfügt, z. B. die Unterstützung einer bestimmten CSS-Eigenschaft, bevor Sie sie auf der Seite verwenden. Es ist anders als Browser-Sniffing, da es eher auf Funktionen als auf einen bestimmten Browser hin testet.

39
Nathan Long

Verwenden Sie eine Bibliothek wie jQuery abstract, um die Unterschiede im DOM, AJAX und JavaScript zu beseitigen.

13
Jeffrey Hines

Stellen Sie sicher, dass Sie HTML, CSS und Javascript so weit wie möglich in separaten Dateien aufbewahren. Das Mischen von Struktur, Darstellung und Verhalten in Ihrer HTML-Datei macht es schwieriger, Probleme zu finden und zu beheben.

8
Psycho_Penguin

Verwenden Sie Firebug in Firefox für:

  • Debugging/Schritt durch Ihren JS.
  • Sehen Sie, wie Ihre Stylesheets interpretiert werden, und hacken Sie sie schnell ein, um zu sehen, wie Sie Ihr Problem beheben können.
  • Sehen Sie, wie viele Anrufe Sie für Remote-Ressourcen tätigen und wie lange sie dauern.
  • Profilieren Sie Ihren Code.

Chrome und IE8 verfügen über ähnliche Tools, die für dasselbe verwendet werden können.

Opera und Safari (und IE) haben Firebug Lite .

2
cdmckay
  1. CSS Reset beim Start Ihres Stylesheets verwenden ...

    Sie können ein hier bekommen ... 

  2. Bestätigen Sie Ihren Code mit w3c ...

    Sie können Ihren Code hier durch den Seitenlink validieren oder einfach das Seitenelement einfügen

1
Joydeep Roy

Meine Regel # 1 ist einen strengen Doctype verwenden. HTML oder XHTML ist in Ordnung, aber mit dem strengen doctype werden so ziemlich alle Browser-Eigenheiten entfernt, besonders in IE7 +.

Stellen Sie sich vor, Sie hätten ein Absatz-Tag geöffnet und es nie geschlossen. Wenn Sie dann einen Listentag öffnen, meinten Sie damit, dass er sich innerhalb des Absatzes befindet oder nicht?

Tatsächlich können Sie keine anderen Block-Tags in ein <p>-Tag einfügen. Aus diesem Grund können Sie das schließende Tag weglassen. Wenn Sie eine Liste starten, ohne einen Absatz zu schließen, wird der Absatz implizit geschlossen. Und der Prüfer beschwert sich nicht.

Das bedeutet nicht, dass Sie sollten nicht close-Tags sein, da Code in der Regel einfacher zu überfliegen ist (Sie müssen sich nicht an die oben genannten Regeln erinnern).

0
DisgruntledGoat