css - CSS スプライト - 複数の呼び出し

Question

css で必要なすべてのインスタンスに対してスプライト イメージを呼び出すのは間違っていますか? ブラウザはこれをどのように処理しますか?一度だけ読み込まれますか?

例：

.box1{ background: url('../img/sprite.png') 0 0 no-repeat; }
.box2{ background: url('../img/sprite.png') 0 -20px no-repeat; }
.btn{ background: url('../img/sprite.png') -100px -60px no-repeat; }

スプライトを一度呼び出して、背景の位置を変更するだけの例を見てきました。

例：

#myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; }
#myDiv .box2{ background-position: 0 -20px; }

Answer 1

この手法の唯一の問題は、CSS に余分なコードが含まれているため、(バイト単位で) 必要以上に大きくなってしまうことです。

背景画像を複数回ロードすることはありません。これを確認するには、開発者ツールを開き、ネットワーク タブを確認します。