web-dev-qa-db-ja.com

クロスブラウザWebサイトのベストプラクティスは何ですか?

(私はこれが決定的なコミュニティwikiになりたいです。私は この質問 への自分の答えからそれをシードしました。)

すべてを指定

ブラウザー間の問題の多くはこれに相当します。何かを指定しなかったため、ブラウザーごとに想定が異なります。したがって:

有効なdoctypeを宣言してください

Doctypeは、コードで使用するルールをブラウザに指示します。指定しない場合、ブラウザは推測する必要があり、ブラウザによって推測は異なります。

私の経験では、「厳密な」DoctypeはIEの動作を改善します(IE7のdiv上のCSS:hoverセレクターなどを有効にします)。

この記事 はdoctypeの良い背景を提供します。

Web標準を使用する

ブラウザー固有のマークアップを回避するか、他のブラウザーでの失敗がサイトエクスペリエンスにとって重要でない場合にのみ使用してください。

HTMLとCSSを検証する

すべてを完璧にする必要はありませんが、検証は良いフィードバックです。 ジェフが言ったように

ルールと境界を知ることは、あなたが何をしているのかを定義するのに役立ち、同意または不同意の正当な弾薬を提供します。ランダムな「私はこれを行うだけで機能します」ではなく、情報に基づいた選択を行うことができます。

段落タグを開いて、決して閉じなかったとします。次にリストタグを開くと、それが段落の内部にあるかどうかを意味しますか?検証すると、それを把握し、タグを閉じ、あいまいさをなくすのに役立ちます。

CSSリセットを検討する

ブラウザーが異なれば、ベースラインCSSルールも異なります。違いを前もって明確に解決することで、すべてが同じように行動するのを助けることができます。 CSS:The Definitive Guide を作成したEric Meyerは、 this reset を使用しています。もう1つの一般的な選択肢は YUI Reset CSS です。

DOMインタラクションにJavaScriptライブラリを使用する

JavaScriptがページ上の要素を処理する必要がある場合は、jQuery、Prototype、MooToolsなどのライブラリを使用するのが最善です。これらのライブラリは何千人もの開発者によって使用されており、ブラウザのJavascriptの解釈間のほとんどの不一致を取り、それらを内部的に処理し、機能する一貫した一連のコマンドを提供します。これらすべての不整合を自分で見つけて回避しようとすると、時間の無駄になり、バグが発生する可能性があります。

複数のブラウザでテストし、IE最後に対処する

複数のブラウザーでテストしてください。一般に、IE以外のブラウザも同様に動作し、IEは特別なケースです-特に上記のアドバイスに従えば、そうです。必要に応じて、IE別のスタイルシートをハッキングし、IEユーザーのみにロードします。

Quirksmode.com は、ランダムなブラウザーの違いを見つけるのに適した場所です。

Browsershots.org は、さまざまなブラウザーやオペレーティングシステムでページがどのように表示されるかを示すのに役立ちます。

優雅に失敗する

存在するすべてのブラウザで完璧に見えるサイトはありません。ユーザーがFlash、JavaScript、または高度なCSSなどを使用していない場合でも、サイトを使用可能にする必要があります。それを念頭に置いた設計:

裸のHTMLを確認する

裸のHTMLでサイトをロードしてみてください-スタイルもスクリプトもありません。メニューオプションはありますか?プライマリコンテンツはセカンダリコンテンツの前にありますか?醜くてもサイトは使えますか?

テスト駆動型のプログレッシブ拡張を検討する

この記事 で説明されているように、この手法では、JavaScriptを使用して、ページでブラウザを使用する前に、ブラウザに特定のCSSプロパティのサポートなどの特定の機能があるかどうかを確認します。特定のブラウザではなく機能をテストするため、ブラウザスニッフィングとは異なります。

39
Nathan Long

JQueryのようなライブラリを使用して、DOM、AJAXおよびJavaScriptの違いを抽象化します。

13
Jeffrey Hines

HTML、CSS、JavaScriptをできるだけ別々のファイルに保存するようにしてください。 HTMLファイルに構造、表示、動作を混在させると、問題の発見と修正が難しくなります。

8
Psycho_Penguin

FirefoxでFirebugを使用する:

  • JSのデバッグ/ステップ実行。
  • スタイルシートがどのように解釈されているかを確認し、その場でハックして問題を修正する方法を確認します。
  • リモートリソースに対して行っている呼び出しの数とそれらにかかる時間を確認します。
  • コードをプロファイリングします。

ChromeとIE8には、同じものに使用できる類似のツールが組み込まれています。

OperaとSafari(およびIE)には Firebug Lite があります。

2
cdmckay
  1. スタイルシートの開始時にCSSリセットを使用...

    あなたは1つを得ることができます ここ ...

  2. W3cでコードを検証する...

    あなたはあなたのコードを検証することができます ここ ページリンクによって、または単にページ要素をコピーして貼り付けます

1
Joydeep Roy

私の#1ルールは厳密なdoctypeを使用です。 HTMLまたはXHTMLで問題ありませんが、厳密なdoctypeを使用すると、特にIE7 +のブラウザの癖がほとんどなくなります。

段落タグを開いて、決して閉じなかったとします。次にリストタグを開くと、それが段落の内部にあるかどうかを意味しますか?

実際、<p>タグ内に他のブロックタグを配置することはできません。そのため、仕様では終了タグを省略できます。段落を閉じずにリストを開始すると、段落は暗黙的に閉じられます。そしてバリデーターは文句を言わないでしょう。

これは、タグを閉じるべきではないと言っているわけではありません。これにより、コードを簡単に読み飛ばせるようになります(上記のルールを覚えておく必要はありません)。

0
DisgruntledGoat