CSSと画像スプライト

Question

CSSのスプライトに関する簡単な質問があります： 同じ画像をCSSファイルに2回含めると2つのHTTPリクエストが送信されますか？たとえば、同じアイコンセットの画像から2つの異なるボタンをロードする場合は、画像を1回だけ挿入する別の方法がありますか？

Answer 1

ブラウザは、2回目のキャッシュから取得されるようにイメージをキャッシュします。

しかし、このような状況でしたいのは、CSSにその仕事をさせることです。
たとえば、これらのボタンが<a>の場合。

a { 
    background: url('img/icons.png'); 
} 

.btn-1 { 
    background-position:0 0; 
} 

.btn-2 { 
    background-position: 0 -60px; 
} 

Answer 2

はいますが、サーバーのクライアントは、クライアントが条件付きGETリクエストを実行し、アクセスが許可されている場合 を変更していない304

304 HTTPを受ける必要がありますが、文書が変更されていませんこの状態コードで応答すべきである（SHOULD）。 304応答はメッセージ本体を含んではならない（MUST NOT）。したがって、ヘッダーフィールドの後の最初の空行で常に終了する。

画像は2回送信されず、代わりにキャッシュから使用されます。そのほかに

HTTP/1.1: Status Code Definitions

Answer 3

オラフルが言った、あなたはまた、URI参照は一度だけ発生することをあなたのCSSを書き換えることができます：つまり

.btn-1, 
.btn-2 { 
    background:url('img/icons.png') 0 0; 
} 
.btn-2 { 
    background-position: 0 -60px; 
}