HTMLのsrcset属性 - fragmentary

まだfirst draftなので変わるかもしれないけれど、そういうのが入った。

このまえWebKitに実装された-webkit-image-setと似たような感じ。提案したのがHoberなので似てるのも当然か。

`srcset`の書き方

値にはURL＋デスクリプタのセットを書く。セットはimage candidate stringと呼ばれている。

デスクリプタは今のところ3つだけ定義されている。

仕様だと"maximum"と言ってるんだけど、アルゴリズムをみるとなんかおかしい。ココら辺は直ってくだろう。

wとhは-webkit-image-setにはなかったような。提案してもCSSWGは「メディアクエリーでやれ」って言いそうだけれど。

Retina display対応だけなら、こんな感じ。

<img src="image.png" srcset="image-2x.png 2x" ...>

URL 2xと書けば良い。昨年末あたりから出ているHD解像度なAndroid スマートフォンもxhdpiだと思うので、これが適用されることになるだろう。

hdpiなAndroid スマートフォン用に別の画像を指定したい場合は、こう書くことになるんだろう。

<img src="image.png" srcset="image-1.5x.png 1.5x, image-2x.png 2x" ...>

あと、image-2x.png 1.5xにしておけばhdpi以上のdpiもってる端末に適用される。丸め誤差が出るだろうから1.5xで綺麗に見えるかどうかは知らない。

で、画面の幅や高さごとにいろいろしたい場合は、wとかhを使う。

<img src="photo.jpg"
     srcset="photo-thumbnail.jpg 300w" ...>

幅が300csspx以下のときにはサムネイルが使われる。

さて、どうなるかなあ。