On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w...@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