css - 背景画像を上書きする場合、両方の画像がダウンロードされますか?

Question

これらのイメージは両方ともダウンロードされますか? ブラウザはスマートで、最後のものだけをダウンロードしますか? 最初のイメージのダウンロードを開始してからキャンセルしますか、それともすべての css がロードされるまで待ってから最後のイメージをダウンロードしますか?

body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }

Answer 1

テストしてみてください: http://fiddle.jshell.net/8xZNY/show/

そして結果：

2 番目の宣言でプロパティを上書きするbackgroundため、2 回ダウンロードされることはありません。実際に使用されるのは最後の 1 つだけです。

Answer 2

私は実際には知らなかったので、テストしてみました：

body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }

おそらくブラウザに依存しますが、少なくともChromeの場合（そして論理的に）、最初にスタイルシートを解析して適用されるルールを決定し、次に適用されるルールの画像をダウンロードするようです. これは、2 番目のイメージのみがダウンロードされることを意味します (これは [ネットワーク] タブで確認できます)。

編集: Firefox での同じ結果のテスト

詳細編集:style属性を使用して背景を設定しても同じ結果になります。特異性が最も高いと思われるものだけをダウンロードします。

Answer 3

CSS はインタープリター言語です。終了するまで1行ずつ実行されるので、そうです-両方を取得します。

編集：

インタープリター言語の性質上、これが機能する方法です...

ただし、このようなものを探すためにブラウザに組み込まれたインテリジェントなプリプロセッサがあるようです。