読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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 で使用することはできません。

 

サンプル

 

f:id:x67x6fx74x6f:20150411030105p:plain

 

 

img タグのアトリビュート

 

CSS

 

サンプルつくってから気付いたのですが、
Windows 環境が 1x 解像度なので CSS image-set を試すことができませんでした。

 

また、Can I use の方でも IE, Spartan でも動かないようです。

 

サイズ指定

サイズ指定で表示画像を変えることができるらしいのですが、
iOS, Mac でも動作しませんでした。

 

Polyfill

Picturefill という Polyfill があるようで、ある程度古いブラウザでも動きそうです。

http://scottjehl.github.io/picturefill/

スポンサーリンク