On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w...@adambarth.com (mailto:w...@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>
Would the <style> element have to reside inline, to reap the performance benefits? On Tuesday, November 12, 2013 at 11:47 AM, Tab Atkins Jr. wrote: > On Tue, Nov 12, 2013 at 10:44 AM, Anselm Hannemann > <i...@anselm-hannemann.com (mailto:i...@anselm-hannemann.com)> wrote: > > > > 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: > > <style> > .foo { > content: replaced image-set(...); > } > </style> > <img class='foo' src="fallback”> > > > In the meantime, this might be a little more fallback-friendly, when combined with some styles to hide the <a> in capable browsers: <div class=“foo”><a href=“fallback.jpg”>Alt text</a></div> But regarding both this and Adam’s original proposal… losing the ability to mark up a content image seems like a huge sacrifice. I imagine services like Google Images and Pinterest rely on images being first-class content citizens, in-markup right alongside paragraphs, videos, audio, etc… Thus, Tab’s suggestion seems far superior in the long term, as long as we can be sure (?) that no one is incurring a double-load of the fallback + the replaced image. —eric