- From: Markus Ernst <derernst@gmx.ch>
- Date: Tue, 12 Nov 2013 21:06:34 +0100
- To: Adam Barth <w3c@adambarth.com>
- Cc: "Jukka K. Korpela" <jkorpela@cs.tut.fi>, whatwg <whatwg@lists.whatwg.org>, Markus Lanthaler <markus.lanthaler@gmx.net>, Ryosuke Niwa <rniwa@apple.com>
Am 12.11.2013 18:50 schrieb Adam Barth:
> 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.
What I don't like about CSS approaches is the fact that changing the
source of an image is fundamentally different from changing a dimension
or color of an element. This is not "presentational" in the same way.
Having to reference content images in the CSS in order to change their
sources is an authoring nightmare.
If inventing new elements or attributes is bad, I assume the whole
discussion on responsive images is actually obsolete, as what you
suggest can be done already in principle.
Received on Tuesday, 12 November 2013 20:07:06 UTC