background-imageを指定した場合の読み込みについて

ふと、動作確認中にlivehttpheadersを見ていて気がついたのでメモ。

CSSで以下のように記述しているときに、
.grad200{
background:url(200.png) repeat-x;
}
.grad100{
background:url(100.png) repeat-x;
}
.grad50{
background:url(50.png) repeat-x;
}

HTMLでgrad200クラスしか使用していなかったとき、
読み込まれるのは、200.pngだけ、である。

つまり、ブラウザは、
読み込まれたCSSでbackground-imageで画像ファイルを指定されていても、
HTMLでそのクラスが指定されていない限り、
画像ファイルは取得しにいかない。

動作確認は、firefoxでのみ、確認。
IE系ではどうなってるのは、わからない。

人気の投稿