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

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

From: Laurent Perez <l.laurent.p@gmail.com>
Date: Wed, 20 Nov 2013 14:24:19 +0100
Message-ID: <CACqpeO_Xx9Qm42AyZzmPJkCx8G=PP0y=mS015cJw5BL8EUfKPA@mail.gmail.com>
To: Maciej Stachowiak <mjs@apple.com>
Cc: WHAT Working Group <whatwg@lists.whatwg.org>
I wasn't aware of the { content: replaced url(attr(src-big)); }
syntax. This looks indeed better when you want to keep the sources in
the img tag.

@media (3dppx > resolution >= 2dppx),  (min-width: 320px) {
.artdirection {
content: replaced url(attr(data-mobile-retina))
}
}
@media (min-width: 640px) {
.artdirection {
content: replaced url(attr(data-tablet))
}
(...)
}

<img src="low.png" class="artdirection" data-mobile-retina="high.png"
data-tablet="wide.png" data-4ktv="toobigforyourbandwitdh.png"
alt="smth"/>

One minor problem is that content: replaced, just like
background-image, prevents the user from right click / save as the
image.
But how do I "tell" content: to replace the "src" attribute ? I can't
find the syntax spec. Because the same CSS could also be applied to
the image in <video poster> attribute if I could tell content to
replace the poster attribute.

When CSS or MQ aren't available, you still get low.png. It's still an
image and not a div so the alt attribute can keep the accessibility
(granted, you could apply aria roles on a div).

Of course there is always the possibility of .artdirection being
overriden later in the CSS. Maybe shadow dom could shield the original
art direction.

laurent


> > --
> > http://laurentperez.fr
> > J2EE tips and best practices
>



-- 
http://laurentperez.fr
J2EE tips and best practices
Received on Wednesday, 20 November 2013 13:25:03 UTC

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