2

CSS のコーディング方法について質問があります。IE を正しく表示するには、ハックや回避策が必要になることがよくあります。これには、次の 2 つの方法があります。

  1. すべてを 1 つの大きな CSS ファイルに入れる
  2. 2 つの CSS ファイルを作成し、ユーザーが使用しているブラウザに応じてロードします。

2番目の方が理にかなっていると思いますが、これを行わない理由はありますか? どちらがより一般的ですか?

4

7 に答える 7

2

2 つの CSS ファイルに対する唯一の反論は、ページを最初に開いたときに、余分な HTTP リクエストが 1 つ生成されるということです。

ただし、ブラウザーのキャッシュにこれらのファイルのローカル コピーが読み込まれると、この懸念は解消されます。

一方、IE のスタイルを個別に持つということは、他のブラウザーのユーザーがそれらを読み込めないことを意味します。また、メイン スタイルとハックの間には明確な分離があります。つまり、IE9 の採用により、メインの CSS ファイルを変更する代わりに、そのファイルを削除するだけでハック CSS を簡単に非推奨にすることができます。 .

于 2010-11-05T02:54:01.180 に答える
2

すべてのプロジェクトの標準としての私の好みは、1 つの CSS ファイルを使用することです。これにより、後で管理および変更が容易になります (また、1 つの HTTP 要求のみ)。次に、条件を使用してボディ クラスを変更します。

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

これがどれほど一般的かはわかりませんが、HTML5Boilerplateでも使用されています

于 2010-11-05T02:56:40.380 に答える
1

2つ目をやらない理由はないと思います。式 like<!--[if IE]>は、適切な css がロードされていることを確認し、IE 以外のブラウザーが使用されているときに帯域幅を節約する価値があります。

于 2010-11-05T02:49:36.877 に答える
1

1 つのスタイルシートに対して作成できる唯一の引数は、1 つの HTTP 要求の削減です。平均して、Web トラフィックの 60% が IE ユーザーから発生することを考えると、それは取るに足らない影響ではありません。

ただし、Holly Hack のようなハックは単純に見苦しく、動作が保証されていません。また、スタイルシートがキャッシュされるため、影響はそれほど大きくないはずです。条件付きコメントは許容される慣行であり、IE の問題を回避するために使用する必要があります。標準に準拠したブラウザと標準に準拠していないブラウザのために、まったく別の 2 つのスタイルシートをロードする理由はありません。いくつかの問題のあるプロパティをオーバーライドするだけで十分です。

あるいは、IE7.js などの Javascript ソリューションを使用して同じ効果を得ることができます。

于 2010-11-05T02:52:48.927 に答える
1

私はどちらかを使用しますが、IE でページを正しく表示するために必要な変更の程度によって異なります。

IE で要素を 480 ピクセルではなく 500 ピクセルにする必要があるような小さな変更の場合は、スタイルシートで回避策を使用します。

しかし、多数の変更がある場合は、条件付きコメントを使用して、IE の場合は別のスタイルシートをロードしますが、これにより、同じスタイルシートの 2 つのコピーがなく、1 つは他のブラウザー用にコーディングされ、もう 1 つは IE 用にコーディングされています。常にメインのスタイルシートをロードし、必要に応じてIEスタイルシートをロードし、必要な要素のみを変更します(ファイルサイズを削減するためにスタイルシートに重複は必要ありません)

基本的に、私がそれを行う方法は次のとおりです。

いくつかの要素を変更する必要があります: 回避策に固執する

多くの要素を変更する必要があります: 条件付きコメントを使用してください

于 2010-11-05T02:53:50.860 に答える
0

ブラウザの「ハッキング」なしで、物事を正しく機能させることができるかもしれません。

可能な限り、ブラウザ固有の CSS の使用は避けてください。古いバージョンの IE では、条件付きコメントを使用することを好みます<--[if IE...]> ... <[endif]-->。

彼らがサーバーに別のリクエストを作成することは知っていますが、私の意見では、古いバージョンの ie (6 以下) を使用するほど愚かな人は、他のスタイルシートをダウンロードするのに数ミリ秒かかることに値しません。これにより、修正を一元化することもできます。

最初に標準に準拠したコードを使用してから、準拠していないブラウザーの問題を修正しますが、絶対に必要な場合にのみ修正してください。

于 2010-11-05T03:27:22.987 に答える
0

完全に新しい（そしておそらく重複する）スタイルシートではなく、IEのレイアウトを修正するために必要なものだけをIE CSSファイルに入れます。

HTML5要素を機能させるための簡単なスクリプトのように、javascriptのインポートにもこれをお勧めします（これは、whatwgのRemy Sharpのサンプルで見たものです）。

于 2010-11-05T03:32:36.217 に答える