- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 12 Nov 2013 10:40:28 -0800
- To: Adam Barth <w3c@adambarth.com>
- Cc: "Jukka K. Korpela" <jkorpela@cs.tut.fi>, Markus Ernst <derernst@gmx.ch>, whatwg <whatwg@lists.whatwg.org>, Markus Lanthaler <markus.lanthaler@gmx.net>, Ryosuke Niwa <rniwa@apple.com>
On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c@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
Received on Tuesday, 12 November 2013 18:41:18 UTC