CSS クロスブラウザ スタイルのバグのデバッグについて

まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツールのためです。 Chrome でのデバッグが完了したら、Safari または Firefox でのデバッグに移ります。

これらの「適切な」ブラウザで期待どおりの結果が得られない場合は、コード自体が CSS ルールに違反している可能性があります。これらの「優れた」ブラウザで発生する問題を回避しようとするのではなく、問題の原因を特定するようにしてください。私は通常、次のようなバグの原因となる可能性のある箇所をチェックします。

• HTML コードの説明 – タグを閉じるのを忘れていませんか? ブロック要素をインライン要素で囲みますか? 標準に違反するコードは、ブラウザによって解釈およびレンダリングが異なる場合があります。
• CSS lint ツールを使用して CSS コードを確認します。検出されたエラーに注意してください。ほとんどの場合、警告よりもエラーの方がブラウザ間での違いを引き起こす可能性が高くなります。
• スタイルシートをリセットする代わりに、(別の) ブラウザのデフォルトの CSS スタイルに依存します。
• ブラウザのサポートの違い。高度な CSS3 プロパティまたは HTML5 要素を使用していますか?ブラウザのサポートドキュメントをチェックして、すべての視聴者のブラウザがカバーされていることを確認してください。古いブラウザをサポートするには、「機能フォールバック」を設計する必要があります。たとえば、影の境界線を境界線にダウングレードしたり、丸い角を四角形にダウングレードしたりします。
• スペースがあってはならない場所にスペースを追加すると、余白が奇妙に見えることがあります。
• 絶対位置が使用されますが、垂直オフセットと水平オフセットは設定されません。この場合、絶対位置に配置された要素は、position: static と同じ位置にレンダリングされます。ただし、上、右、下、または左の値を変更しようとすると、要素は、最も近い相対位置にある親を基準とした位置にすぐに「ジャンプ」します。
• 異なる表示モードの要素が「珍しい」方法で組み合わされています。たとえば、W3C 標準では、テーブル セルがフローティング要素の隣にある場合に、そのテーブル セルをどのようにレイアウトするかについては規定されていません。そのため、このように記述されたコードは間違っているわけではありませんが、ブラウザ間でレンダリング効果が異なるバグが発生する可能性があります。
• スペースがレイアウトに影響するかどうか。タイポグラフィが空白スペースに依存しないようにする必要があります。
• 小数ピクセル値はブラウザ間で異なる効果を引き起こす可能性があります。

次にテキストが続きます

覚えておくべき最も重要なことは、W3C 標準ではエラーの動作が定義されていないということです。したがって、仕様に従わないと、ブラウザ間で異なる効果が生じる可能性があります。また、「奇妙な」プロパティ (マージンやインライン要素など) を組み合わせると、ブラウザ間でバグが発生する可能性もあります。

画面

CSS を書くことは旅を選択することだと私は考えています。いくつかの決定を行う必要があります。たとえば、まず、ブロック、インライン、インライン ブロック、テーブルなど、さまざまな表示モードで使用する要素を選択する必要があります。選択が完了したら、いくつかの特定の方法を使用して実際の表示を変更できます。

ブロック要素では、マージン、パディング、高さ、幅を使用する必要があります。ただし、line-height は適用されません。

インライン要素では、行の高さ、垂直方向の配置、間隔を使用する必要があります。ただし、マージン、パディング、高さ、幅は適用されません。

まず、テーブルには垂直方向と水平方向の配置があります。第二に、表内の要素を 1 つでも見逃すと、表全体がおかしく見えることがあります。最後に、マージンは表の行と列には適用されず、パディングは表や表の行には適用されません。

ポジショニング

ブロックレベル要素を使用する場合は、次に配置方法を選択する必要があります。

• フロート – フロートを使用すると、要素はブロックレベル要素になり、要素に以前適用された vertical-align プロパティと line-height プロパティは無効になります。
• 絶対 – オフセットは、最も近い相対位置にある親ノードを基準に計算されます。絶対位置に配置された要素は、親ノードと兄弟ノードが変更されてもリフローを引き起こしません。この機能はアニメーション効果を作成するのに役立ちます。ただし、絶対配置が使用され、コンテンツが動的に変化すると、表示上の問題が発生する可能性があります。典型的な例は、絶対配置された丸いボックスです。
• 静的 – デフォルトの配置方法。
• 固定 – 要素の位置はブラウザ ウィンドウを基準とします。あまり使用されません。
• 相対的 – 通常、この要素のスタイルには影響しません。絶対位置に配置された従属子ノードのみが、このノードに対してオフセットされます。

ここでは、すべての表示と位置の組み合わせをリストしません。要約すると、注意すべき点が 2 つあります。

1. 他のプロパティ (余白や行の高さなど) は、選択した表示方法や配置方法に適していますか?
2. 兄弟ノードの配置方法は一貫していますか?

たとえば、フロート、テーブルセル、インライン要素を組み合わせるのは適切でしょうか?ブラウザはレンダリングをどのように解釈するのでしょうか? W3C 標準には定義がありますか?そうでない場合、クロスブラウザバグが発生するリスクがあります。もちろん、このような組み合わせは不可能ではありませんが、なぜそうするのかについて明確に考え、十分なクロスブラウザテストを行う必要があります。

インターネットエクスプローラー

「優れた」ブラウザの問題を解決したら、次は IE プラットフォームに移行します。私のアドバイスとしては、サポートしたい IE の最も古いバージョンから始めることです。古いバージョンの IE の問題の多くは、新しいバージョンにも引き継がれるからです。

IE の場合でも、ハックに頼るのではなく、問題を切り分けるようにしてください。 * と _ のハックを盲目的に使用することは、アルゴリズムのエラーを識別するのではなく、誤った値を返す関数に修正 (以下を参照) を追加するようなものです。

もちろん、IE6 や IE7 でハックを使用する必要がある場合もあります。 IE8 の場合、ハックは通常、CSS3 互換性が必要な場合にのみ使用されます。通常、IE6/7 でハックが必要となる場所は次のとおりです。

• レイアウトの問題があります。ズーム:1 を使用してください。
• 相対的な配置により要素が消える
• 3px フローティングバグ
• 引き伸ばされたコンテナのフローティング エラーは、多くの場合、overflow:hidden によって誤ってマスクされます。

2 つのフローティング要素の間にコメント コードがある場合など、重複コンテンツのバグを引き起こすような、ハックが必要となるあまり一般的ではない状況もあります。 IE でのみ発生する CSS の問題の場合、表示される内容を注意深く説明し、対応する解決策を Google で検索することをお勧めします。バグの原因が見つかる前に、盲目的にハックを使用してバグを隠さないでください。 IE に組み込まれているデバッグ ツールはひどいので、ページ上の実際のレイアウトを確認しやすくするために、要素に背景色を追加する必要がある場合があります。

ソリューションの実装

バグの原因を見つけて修正方法がわかったら、正常に動作する既存のコードを破壊せずにコードを変更する方法も知っておく必要があります。私の提案は次のとおりです:

1. 依存型カスケーディング

2. ブラウザ固有のプレフィックスを使用する

3. IE6/7の場合は*と_を使用する

4. IE8では\9を使わない

5. IEハックをやめるべきタイミングを知る

6. Firefox、Chrome、Safariの最新バージョンではハックを使用しないでください。

1. 依存型カスケーディング

まず、可能な限りスタイル カスケードを利用するようにしてください。ブラウザは常に、理解できる最後の宣言されたスタイルを採用します。したがって、ブラウザが理解できる最新のスタイルを読み取って使用できるように、古いブラウザ用のスタイルを記述することから始める必要があります。例えば：

2. ブラウザ固有のプレフィックスを使用する

特にまだ広く採用されていないプロパティの場合は、ブラウザ固有のプレフィックスを使用します。例えば：

このコードには、WebKit の異なるバージョン用の 2 つの構文があることに注意してください。プレフィックス コードの順序も、ブラウザーの古いバージョンから順に記述する必要があります (最初のものを参照)。
W3C 標準で定義された構文がある場合は、それを最後に置く必要があります (上記のコードの最後の行など)。こうすることで、ブラウザがこれらの新機能の標準構文をサポートし始めても、コードは堅牢になります。

3. IE6/7の場合は*と_を使用する

古いバージョンの IE に固有のバグについては、* と _ を使用して修正してください。例えば：

すべての IE ハックは、次のような特定のバージョンと以前のすべてのブラウザを対象としています。

_ IE6以前の場合

* IE7以前の場合

IE8 およびそれ以前のバージョンでは \9 (IE9 も一部の CSS プロパティでこのハックの影響を受けることに注意してください)

したがって、ハックコードの順序も、古いバージョンのブラウザ用に書くことから始める必要があります（最初の項目を参照）。

4. IE8では\9を使わない

IE8 のスタイル バグを回避するために \9 を使用することは決してありません。ブラウザのサポートを補うための「フォールバック」としてのみ \9 を使用します。たとえば、box-shadow (より高度なブラウザでは問題なく動作します) を使用しましたが、IE8 では見栄えが悪かったため、\9 を使用して新しい境界線を追加しました。この状況は、既存のスタイルを変更するのではなく、新しいスタイルを追加するため、スタイル カスケード (最初の項目を参照) では処理できません。

5. IEハックをやめるべきタイミングを知る

IE でまったく同じ効果を得ようとしないでください。 IE6-8 で同じ丸い角のボックス効果を実現するためだけに、余分な HTTP リクエストと複雑な HTML/JS/CSS コード スニペットを無駄にするつもりですか?私個人としては、答えは「いいえ」です。

機能のためにハックを放棄するタイミングを知っておく必要があります。たとえば、CSS3 でグラデーション効果をシミュレートするためにフィルターを使用しないでください。パフォーマンスの問題や印刷上のバグが発生する可能性があります。最も簡単な方法は、ページがすべてのブラウザでまったく同じように動作することを期待しないことです。 IE 6 ～ 8 のユーザーにとって、最善のアプローチは、簡素化されたユーザー エクスペリエンスを提供することです (簡素化されているのであって、不完全ではないことに注意してください)。

次の不適切なコードでは、フィルターを使用して CSS3 グラデーションをシミュレートしています。

6. Firefox、Chrome、Safariの最新バージョンではハックを使用しないでください。

Firefox、Chrome、Safari のスタイル バグについては、慎重に確認することが最善策です。これは、コードが CSS のルールに違反していることが原因である可能性が非常に高いです。