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

Christian Biesinger cbiesinger at google.com
Tue Nov 12 17:56:02 PST 2013

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:

@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)); }
<img class="artdirected" src="foo.jpg" src-small="foo-small.jpg"
src-medium="foo-medium.jpg" src-big="foo-big.jpg">


More information about the whatwg mailing list