W3C home > Mailing lists > Public > whatwg@whatwg.org > November 2013

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

From: Christian Biesinger <cbiesinger@google.com>
Date: Tue, 12 Nov 2013 20:56:02 -0500
Message-ID: <CAPTJ0XE=Y-Dw60Xy95Mpu2P9X4F2FSPNDudXQuBpucXg3+FVjw@mail.gmail.com>
To: Markus Ernst <derernst@gmx.ch>
Cc: "Jukka K. Korpela" <jkorpela@cs.tut.fi>, whatwg <whatwg@lists.whatwg.org>, Ryosuke Niwa <rniwa@apple.com>, Adam Barth <w3c@adambarth.com>, Markus Lanthaler <markus.lanthaler@gmx.net>
On Tue, Nov 12, 2013 at 3:06 PM, Markus Ernst <derernst@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">

-christian
Received on Wednesday, 13 November 2013 01:56:28 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:14 UTC