-1

ほとんどのブラウザーでサポートされているスタイルの例を次に示します。

.class {
     background: rgba(0,0,0,0.3);
 }

古い IE (IE 6-8) はサポートしていませんrgba。これをサポートするために使用できる可能性のある方法が少なくとも 3 つあります。

  1. 同じクラス

    .class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

  2. モダニズム

    .class {
     background: rgba(0,0,0,0.3);
}

.no-rgba .class {
     background: grey;
}

  3. スターハック

    .class {
     background: rgba(0,0,0,0.3);
     background: grey\9; /*IE8 and below*/
 }

方法 1 と 2 は IE ブラウザー以外にも対応しているため、私は方法 1 と 2 を使用することを好みますが、どちらの方法を使用すればよいかわかりません。

方法 1 は、JS が無効になっていても機能するため、優れています。ただし、最新のすべてのブラウザーでレンダリングする追加の属性があります。

方法 2 は、悪いブラウザーを独自のクラスに分離するため、優れています。最新のブラウザーはこのクラスをレンダリングしないため、レンダリング時間が数ミリ秒短縮されます。

たぶん、私が考えていない他の何かがもっと良いかもしれませんか？PIE.htc やフィルターの使用は避けたいです。最適化と読み込み時間の最適な方法は何ですか?

4

2 に答える 2

2

この種のスタイルの場合、正解は最初にリストしたものです。

.class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

最初にフォールバック オプションを指定し、次に優先オプションを指定します。

IE は をgreyサポートしていないため、背景を に設定しrgbaます。他のブラウザはrgba意図したとおりにバージョンを使用します。

これが最良の答えである理由は次のとおりです。

  1. これは、まさにこのシナリオに対する標準的な「正しい」答えです。CSS は、まさにこの種の状況を念頭に置いて、このように動作するように設計されています。

  2. これは、ブラウザーが余分なレンダリングやスクリプトを実行する必要がないため、最も安価なオプションです。IE は 2 番目の を完全に無視するbackgroundため、そこでは何も起こりません。他のブラウザは両方を解析しますが、2 番目を解析すると最初に解析されたものが上書きされるため、唯一のオーバーヘッドは解析であり、どのオプションを選択しても解析を行う必要があります。

他の可能なソリューションの中で、Modernizr は優れていますが、このシナリオではやり過ぎです。スクリプトを使用しないソリューションがある場合は、スクリプト ソリューションを使用する必要はありません。また、CSS ハッキングは絶対に避けるべきです。使用する価値がある場合もあるかもしれませんが、私は IE6 のサポートをやめて以来、個人的に正当な使用法を見たことがありません。

利用可能であるが言及しなかった他の解決策は、条件付きコメントです。つまり、IEの<!--[if IE]>構文を使用して、IEの代替スタイルシートをロードします。ただし、可能であればこれも避けたいと思います。繰り返しになりますが、IE6 と IE7 がより遠い記憶になるにつれて、この種のソリューションの必要性は薄れつつあります。

最後に、少し異なるオプションがあります。古い IE を無視するだけです。IE8 によっては、思いどおりにレンダリングされない場合があり、そのようにするのは面倒です。このような場合、失敗させるのは完全に正当な戦略です。質問の例では、完全に優れた CSS ソリューションがあるため、これは必要ありませんが、他のより複雑なスタイルの場合、IE が正しく処理しない場合にサイトの外観がどれほど悪くなるかを検討してください。それでも使用できる場合は、単にスライドさせるだけの場合があります。このオプションは、影響を受けるユーザーの数、ユーザーに与える問題の程度、および作業中の要件と比較検討する必要がありますが、オプションとして考慮する必要があります。

于 2013-03-05T20:37:41.383 に答える
1

メソッド＃1は、IEを処理するだけでなく、問題のCSS （この場合はRGBA）をサポートしていないブラウザーも処理するため、一般的に受け入れられている方法です。ブラウザが従うことになっているCSSの規則は、行を認識しない場合、それを無視して先に進むというものです。より高性能なブラウザに関しては、このようなCSSは安価であり、ブラウザはフォールバックCSSをまったくレンダリングしない可能性があります（ほとんどの場合、画像ベースのフォールバック用に画像をダウンロードしないことを知っています）。

方法2は、クラス（重みを追加する）を追加するだけでなく、JavaScriptライブラリ全体を追加します。他のCSS3タイプのもの（特にそのような簡単なフォールバックがないもの）を扱っている場合、それは大したことではありませんが、これらのようなフォールバックを処理するために使用している場合、または1つだけまたは2つ目は、多くの追加のメリットをもたらさないために、多くのオーバーヘッド（場合によっては別のHTTPリクエストを含む）を追加することです。最新のブラウザがクラスをレンダリングしない場合でも、JavaScriptを実行して機能を確認する必要があります。

方法3はハックであり、可能な限り避ける必要があります（ハックに頼るよりも条件付きスタイルシートをお勧めします）。特定のブラウザーの特定のバージョンのみを対象とするだけでなく（したがって、このCSSをサポートしていない他のすべてのブラウザーをそのままにしておく）、ブラウザーのバグに依存して作業を実行します。そして、そのコードが別のブラウザーで別のバグをトリガーした場合、またはブラウザーがハッキングのある行を認識したが、正しいCSSでも正しく動作した場合はどうなりますか？IE6と2005年頃のチュートリアルのいくつかを見てくださいIE5 for Macは依然として主要な競争相手であり、人々がお互いのつま先を踏まないようにするためにブラウザハックで行った狂気の長さを見てください。（注：プレフィックス付きCSSをハッキングとは見なしません。プレフィックス付きCSSアイテムは、ブラウザーベンダーが追加して、これらの機能をサンドボックス化するという指定された目的を果たすために選択した文書化された機能です。時間の経過とともに段階的に廃止されるように設計されています。）

したがって、優先順に-フォールバックCSS、Modernizr、条件付きスタイルシート、ブラウザハック。

于 2013-03-05T19:47:41.340 に答える