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

(Ich möchte, dass dies das definitive Community - Wiki ist. Ich habe es aus meiner eigenen Antwort aufdiese Frage.)

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 führt ein "strenger" Doctype dazu, dass sich der IE besser verhält (ermöglicht Dinge wie CSS: Bewegen Sie den Mauszeiger auf Divs in IE7).

Dieser Beitrag gibt einen guten Hintergrund über Doktypen.

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. WieJeff 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 schriebCSS: Der definitive Leitfaden, Verwendetdieser Reset. Eine andere beliebte Wahl istYUI CSS zurücksetzen.

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 eine konsistente Reihe 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 ein Sonderfall ist - 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 Browserunterschiede aufzuspüren.

Browsershots.org Hier können Sie zeigen, wie Ihre Seite in einer Reihe 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

Beschrieben inDieser BeitragBei dieser Technik wird JavaScript verwendet, um zu überprüfen, ob ein Browser über eine bestimmte Funktion verfügt, z. B. die Unterstützung einer bestimmten CSS-Eigenschaft, bevor er auf der Seite verwendet wird. Es ist anders als Browser-Sniffing, da es eher auf Funktionen als auf einen bestimmten Browser hin testet.

Antworten auf die Frage(7)

Ihre Antwort auf die Frage