2つの画像スプライト手法があります。「クラシック」バージョンは、backgroundプロパティとbackground-positioncssプロパティを使用します。（ここで説明されているようにhttp://www.alistapart.com/articles/sprites）
「2番目の」バージョンは、画像タグとそのクリップcssプロパティを使用します。（http://css-tricks.com/css-sprites-with-inline-images/）
私の質問は、「クラシック」バージョンよりも「セカンド」バージョンを使用することの利点はあるのかということです。
おかげで、最高の、Viktor
違いは主にドキュメントのセマンティクスにあります。装飾グラフィックとレイアウトグラフィックには背景のみを使用し、ページのコンテンツの一部であるグラフィックには画像タグのみを使用する必要があります。
ページはCSSがなくても便利で使用できるはずです。2番目の手法では、スプライトを使用したすべての場所でスプライトマップ全体が表示されます（クリッピングは発生しません）。非常に混乱します。
最初の手法ではスプライトは表示されませんが、間違いや混乱を招くことはありません。
グラフィックがコンテンツであるか装飾であるかは、アイコンのようなものを考えると少し注意が必要です。スプライトテクニックは非常に便利です。個人的には、アイコンに背景画像を使用することを好みます。アイコンは、それ自体の要素ではなく、別の要素（リンクやボタンコントロールなど）に情報を追加するためです。
要するに、画像タグベースのスプライトは少し壊れたテクニックですが、私はそれを使用しません。
アイコンが表示されたページを印刷する場合の使用例があります（たとえば、組織の連絡先カードに電話/スカイプなどがあります）。したがって、2つのオプションがあります。
-個別のimg要素を使用する -'content'および'clip'プロパティを持つpseudo（：after）要素を介してスプライトを使用します
2番目の方法（クリップ）を使用する場合も、CSSが無効になっている場合でもスプライト全体が表示されないように、imgタグで寸法を指定することを忘れないでください。この方法の利点の1つは、Windowsで高コントラストのテーマが有効になっている場合でも、クリップを使用すると画像が表示されることです。これは、背景画像には当てはまりません。
詳細については、次の2つの記事を確認してください。
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
'content'および'clip'プロパティを持つpseudo（：after）要素を介してスプライトを使用する
この方法はお勧めしません。少数の画像を表示したいだけなら問題ないかもしれませんが、特に低速のマシン（スマートフォンなど）では、数百の要素（CSS疑似要素は一般にパフォーマンスに悪影響を及ぼします）に適用すると非常に遅くなります。 ）またはIE8などの古いブラウザ。