[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

Tab Atkins Jr. jackalmage at gmail.com
Tue Nov 12 10:40:28 PST 2013


On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c at adambarth.com> wrote:
> We might even be able to make this work without inventing anything:
>
> <style type="text/css">
> @media (min-width: 480px) {
>   .artdirected {
>     width: 30px;
>     height: 30px;
>     background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
>  }
> }
> @media (min-width: 600px) {
>   .artdirected {
>     width: 60px;
>     height: 60px;
>     background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
>  }
> }
> </style>
> <div class="artdirected"></div>
>
> All the information is there.  We just need to teach the preload
> scanner to parse a subset of CSS and match a subset of selectors.  If
> you stay within the "preloadable" subset, then your images will be
> loaded by the preload scanner.  Otherwise, they'll just be loaded
> normally.
>
> What's most attractive to me about this approach is that it doesn't
> require inventing anything new, which means the compatibility story
> for older user agents is solid.  You don't need a polyfill or anything
> like that.

If you legitimately think this will work, I'm for it.  If you just
think it's a vague "maybe", I'd like to continue pursuing new syntax.

(If we do this, we just need to port the variable-sized-image stuff
into image-set().  It wouldn't be hard.)

~TJ


More information about the whatwg mailing list