CSSスプライト

最近の書き方

  • :root疑似クラスを使用。background-sizeに対応していないIE6-7だけが、spr.png を表示し他の環境では全てspr_2x.pngを表示する。
  • IE6-7に配慮しないなら:rootもいらないし spr.png も用意しなくていい
.icSpr a{
display:inline-block;
width:32px;
height:32px;
background:url("../image/spr.png") no-repeat 0 0;
overflow:hidden;
text-indent:-9999px;
}
:root .icSpr a{
background: url("../image/spr_2x.png") no-repeat 0 0;
-webkit-background-size: 32px auto;
background-size: 32px auto;
}
.icSpr a.ic01{ background-position: 0 0; }
.icSpr a.ic02{ background-position: 0 -33px; }
.icSpr a.ic03{ background-position: 0 -66px; }

昔のやつ

  • Retina対応で@mediaを使用
  • 高解像度に対応している環境だけが spr_2x.png を表示する
  • min-device-pixel-ratioは1.5じゃなくて2の書き方もあったような
.icSpr a{
display:inline-block;
width:32px;
height:32px;
background:url("../image/spr.png") no-repeat 0 0;
overflow:hidden;
text-indent:-9999px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5){
.icSpr a{
background: url("../image/spr_2x.png") no-repeat 0 0;
-webkit-background-size: 32px auto;
background-size: 32px auto;
}
}
.icSpr a.ic01{ background-position: 0 0; }
.icSpr a.ic02{ background-position: 0 -33px; }
.icSpr a.ic03{ background-position: 0 -66px; }

参照

  • CSS Sprite Generator
    • 使用例:水平オフセットと垂直オフセットは1(本当は0にしたいがエラーになる)
    • 色数はTrue Colorで書き出してPhotoshopで減色したほうがファイルサイズ的に良い

最終更新: 2017-10-15 (日) 22:57:02