[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[Silvia Pfeiffer]

On Wed, Nov 13, 2013 at 9:56 AM, Christian Biesinger
<cbiesinger at google.com> wrote:
> On Tue, Nov 12, 2013 at 3:06 PM, Markus Ernst <derernst at 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.