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

Tab Atkins Jr. jackalmage at gmail.com
Tue Nov 12 10:47:39 PST 2013

[Please don't top-post.  Quote the relevant parts of the message
you're responding to.]

On Tue, Nov 12, 2013 at 10:44 AM, Anselm Hannemann
<info at anselm-hannemann.com> wrote:
>> On 12 Nov 2013, at 19:40, "Tab Atkins Jr." <jackalmage at gmail.com> wrote:
>>> On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c at adambarth.com> wrote:
>>> We might even be able to make this work without inventing anything:
>>> <style type="text/css">
>>> @media (min-width: 480px) {
>>>  .artdirected {
>>>    width: 30px;
>>>    height: 30px;
>>>    background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
>>> }
>>> }
>>> @media (min-width: 600px) {
>>>  .artdirected {
>>>    width: 60px;
>>>    height: 60px;
>>>    background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
>>> }
>>> }
>>> </style>
>>> <div class="artdirected"></div>
> Really? An empty div element? What about accessibility or When CSS cannot be loaded? What if only html is grabbed by another page? It doesn't seem to be a really solid solution in my opinion.

Right, that's not great, but once we finally define the "replaced"
keyword for the 'content' property, you should be able to set it
directly on <img>s, like:

.foo {
  content: replaced image-set(...);
<img class='foo' src="fallback">


More information about the whatwg mailing list