- From: Markus Lanthaler <markus.lanthaler@gmx.net>
- Date: Tue, 12 Nov 2013 19:17:35 +0100
- To: "'Adam Barth'" <w3c@adambarth.com>, "'Markus Ernst'" <derernst@gmx.ch>
- Cc: "'Jukka K. Korpela'" <jkorpela@cs.tut.fi>, 'whatwg' <whatwg@lists.whatwg.org>, 'Ryosuke Niwa' <rniwa@apple.com>
On Tuesday, November 12, 2013 6:50 PM, Adam Barth 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.
Except if there are other, external stylesheets that might overwrite these
definitions
> 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.
I see a number of other problems with this approach as well. E.g., how would
this work for videos? What about browsers not supporting media queries (or
CSS for that matter)? With this solution you need to replace all img tags
with meaningless divs. Right clicking to save an image would break as well.
--
Markus Lanthaler
@markuslanthaler
Received on Tuesday, 12 November 2013 18:18:03 UTC