レスポンシブイメージを実現するCSS4のimage-set

iOS6のMobile Safariで新たにレスポンシブイメージを実現するCSS4(WD)のimage-set関数が実装されました。

仕様は「CSS Image Values and Replaced Content Module Level 4」、詳しい日本語の解説は「Responsive imagesのための-webkit-image-set() - fragmentary」を参考にしていただくとして、早速どのようになるか試してみました。

#img{
	background:black;
	background:-webkit-image-set( url(1x.png)  1x, url(2x.png) 2x );
	width:100px;
	height:50px;
}

このようにベンダープリフィックスを付けた-webkit-image-set(...)内にカンマ(,)区切りで複数の画象を設定します。それぞれ1xや2xといった値をつけどのdevicePixelRatio に対応する画像かを設定します。

サンプル

この場合-webkit-image-setに対応してdevicePixelRatioが1の場合は赤い1xと書かれた1x.pngが、-webkit-image-setに対応してdevicePixelRatioが2の場合は青い2xと書かれた2x.pngが、-webkit-image-setに対応していない場合は黒い背景が表示されます。

これまでのRetina Display対応ではbackground-sizeなどを利用して対応しなくてはいけなかったのがだいぶ簡単に対応できるようにりますね。

関連エントリー

CSS3でセレクトボックスをカスタマイズ

スポンサードリンク

«10月6日にスマートフォンサイト制作実践講座を行ないます。 | メイン | クロスフェードを実現するCSS4のcross-fade()»