- From: Silvia Pfeiffer <silviapfeiffer1@gmail.com>
- Date: Wed, 13 Nov 2013 10:09:01 +0800
- To: Christian Biesinger <cbiesinger@google.com>
- Cc: Markus Ernst <derernst@gmx.ch>, Adam Barth <w3c@adambarth.com>, whatwg <whatwg@lists.whatwg.org>, "Jukka K. Korpela" <jkorpela@cs.tut.fi>, Ryosuke Niwa <rniwa@apple.com>, Markus Lanthaler <markus.lanthaler@gmx.net>
On Wed, Nov 13, 2013 at 9:56 AM, Christian Biesinger
<cbiesinger@google.com> wrote:
> 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">
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.
Received on Wednesday, 13 November 2013 02:09:45 UTC