0

かなりの量のドロップ シャドウとグラデーションを使用する Web サイトを構築しています。CSS の box-shadow プロパティを使用して、これの多くを実現できます。

残念ながら、私たちはまだ IE をサポートしているため、そのような状況では背景画像を追加する必要があります。

私は怠惰で全員に背景画像を提供するだけかもしれませんが、最新のブラウザを使用している人々のために物事を合理化しようとしています. 理想的には、これらのユーザーが画像をリクエストする必要がないようにしたいと考えています。

したがって、ブラウザーがボックス シャドウ (box-shadowSupport) をサポートし、CSS が次のようになる場合は、javascript を介して追加のクラスを追加します。

.box {
    background: url('myImage.jpg');
}

.box-shadowSupport {
    background: none;
    [box shadow properties go here] 
}

HTML が次のようになった場合:

<div class="box box-shadowSupport"></div>

画像はリクエストされますか？それとも、2 番目のスタイルが背景画像のプロパティをオーバーライドしているため、ブラウザは不要であることを認識していますか?

画像が要求された場合は、CSS と JavaScript を再配置する必要があるため、カスケード経由でスタイルをオーバーライドする代わりに、クラスを交換して、最初のクラスが HTML で参照されないようにする必要があります。

4

4 に答える 4

3

いつものように、すべての Web ブラウザが独自の方法でこれを処理すると思います :) 私の提案は、Charlesのような Web プロキシを使用して、画像が要求されているかどうかを確認することです。もちろん、さまざまなブラウザでこれをテストしてください。

于 2010-01-19T16:18:07.417 に答える
2

考慮したいのは、IE 固有のスタイルを別のシートで定義し、次のように条件付きコメントを付けてロードすることです。

<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
    type="text/css" media="all" />
<![endif]-->

!importantこれにより、IE 固有の設定を持つシートのみが読み込まれ、他のクラスをマーカーでオーバーライドできます。条件付きコメントは IE5 以降存在しており、他のブラウザーは上記のブロックを無視します。

于 2010-01-19T16:18:36.523 に答える
2

IE でシャドウをスキップすることをお勧めします。

ほとんどの人は 1 つのブラウザーしか使用せず、影が必要であることを知りません。サイトがブラウザによって異なって見えても、正常に見える限り (つまりグリッチがないことを意味します)、大した問題ではありません。

それ以外の場合は、特定の css の if タグを使用すると、次のようにドロップ シャドウを実行できます。

.box {
    filter: progid: DXImageTransform.Microsoft.dropShadow(
            color=#818181,
            offX=5, offY=5, 
            positive=true);
}

詳細については、こちらを参照してください。

于 2010-01-19T16:27:22.637 に答える
1

最新のブラウザはすべて「myImage.jpg」をロードすると確信しています。実際、あなたが提供したコードは、JavaScriptを使用せずに画像をプリロードする純粋なCSSの方法を説明しています:)

于 2010-01-19T16:37:34.940 に答える