css - ブラウザはCSSで上書きされた画像を要求しますか？

Question

次のようなCSSがあるとしましょう。

#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}

ブラウザは：

score 3 · Accepted Answer

最初にCSSを解析してから画像をリクエストするため、image1.pngはダウンロードされません。

score 1 · Accepted Answer

Chromeと開発者ツールを使用した簡単なテストから：

#element存在しない場合、ブラウザにはスタイルを適用するための一致する要素がないため、どちらの画像もダウンロードされません。
存在する場合#element、通常のCSSカスケードおよび特異性ルールが適用され、そのルールがルールの後にimage2.png表示されるため、ダウンロードされるだけです。image1.png

とはいえ、他のブラウザの動作は異なる場合があります。

score 0 · Accepted Answer

これをChromeで実行しているWebサイトを実装すると、ブラウザーが最初にCSSを解析し、必要なルールと要求を作成してから要求を行うことがわかります。

CSSの下部にあるCSSルールでは、上部からanyをオーバーライドするため、ブラウザは最終的なルールである画像のみを要求することを認識しています。

score -1 · Accepted Answer

ご存知のように、最初にページをリクエストすると、ブラウザはサーバーにリクエストを送信します。次に、ブラウザはページの解析を開始します。

外部リソースへの参照が見つかると、そのリソースに対してさらに別のリクエストを実行します。だから私はそれがまだそれをロードすると思います。

4 に答える 4