- From: Laurent Perez <l.laurent.p@gmail.com>
- Date: Wed, 20 Nov 2013 14:24:19 +0100
- 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