Spartan で CSS image-set / <img srcset> 使ってみる?(Windows 10 Technical Preview Build 10049)
CSS image-set が Preview Release になったということで試してみました。
CSS image-set とは?
今まで低,高解像度の画像や背景画像を端末別に表示するには
複数のタグ、CSS を使用したり JavaScript を駆使する必要がありましたが、
この機能を使うと1つのタグや、1つの CSS プロパティだけで動作します。
自分が知るかぎりですと iOS 7 が一番速く実装していたと思われます。
現状、Firefox で使用することはできません。
img タグのアトリビュート
サンプルつくってから気付いたのですが、
Windows 環境が 1x 解像度なので CSS image-set を試すことができませんでした。
また、Can I use の方でも IE, Spartan でも動かないようです。
サイズ指定
サイズ指定で表示画像を変えることができるらしいのですが、
iOS, Mac でも動作しませんでした。
Polyfill
Picturefill という Polyfill があるようで、ある程度古いブラウザでも動きそうです。