On Wed, Nov 13, 2013 at 9:56 AM, Christian Biesinger <cbiesin...@google.com> wrote: > On Tue, Nov 12, 2013 at 3:06 PM, Markus Ernst <derer...@gmx.ch> wrote: >> 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. > > For a bit more presentation, and while we're inventing new syntax > anyway, how about this: > > <style> > @media (min-width: 480px) { > .artdirected { content: replaced url(attr(src-small)); } > } > @media (min-width: 600px) { > .artdirected { content: replaced url(attr(src-medium)); } > } > @media (min-width: 800px) { > .artdirected { content: replaced url(attr(src-big)); } > } > </style> > ... > <img class="artdirected" src="foo.jpg" src-small="foo-small.jpg" > src-medium="foo-medium.jpg" src-big="foo-big.jpg">
I quite like this if we can make it work. It keeps the references to the images in the <img> tag, but makes use of media queries for the different constraints. It looks clean and is easy to understand. Silvia.