CompassでCSSスプライト（Retina対応）
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
tips Data URI利用時の画像差し替えは、CompassのInline Data Helpersが便利
2012年07月19日 16:26 去る6月30日（土）に開催されたCSS Nite LP, Disk 23「表示速度最適化」でもネタとして挙げられたData URI。HTTP Requestの本数を減らすための効果的な手法として、CSS Spritesと対比されることも多いですよね。 Data URIを利用する際、画像を修正した場合は改めて画像ファイルをエンコードしてbackground-imageプロパティなどへ突っ込むひと手間が必要になりますが、CompassのInline Data Helpersを使えばこのひと手間を省けますね！ （Sass/Compassやってれば…という前提ですが…） 例えば、style.scssファイルへ .sample { background-image: inline-image('pict.png'); } って書いてコンパイルすると、style.c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/busnews/20101101/3.html
