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

[Laurent Perez]

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