[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)
Tab Atkins Jr.
jackalmage at gmail.com
Fri Nov 15 15:23:04 PST 2013
On Fri, Nov 15, 2013 at 3:02 PM, Bruno Racineux <bruno at hexanet.net> wrote:
> On 11/15/13 1:28 PM, "Tab Atkins Jr." <jackalmage at gmail.com> wrote:
>>Why would you be using classes? Most images that you need to make
>>responsive are one-off content images, like the big picture in
>><http://www.bostonglobe.com/magazine/2013/11/10> (and maybe the
>>picture in the sidebar).
> Tab, you are seriously worrying me with that argument. What about a full
> gallery of images sharing the same pattern. If you guys think that
> responsive images are only small single isolated unique sets of images. I
> don't think we are looking at the same sets of use cases...
> Imagine a gallery page with 20+ images using the exact same breakpoint
> model. Do you really want to repeat the srcs for every single of those
> images. I don't know about perversion of the web. But it looks to me like
> no one is picturing the impending bloat for these use cases...
I don't understand. You don't "repeat" any sources, you specify them
once. There's just a batch of sources per image. Can't make this
The repetition is in the MQs, and that's solveable quite directly and
generically with custom MQs.
> Here is an update along my initial model with John's example, and
> custom media-vars (with the syntax we discussed on the w3cstyle list):
> @media-var 'smallicon' (max-width: 19.99em);
> @media-var 'flexwidth' (min-width: 20em);
> @imgset 'set-1' (64 64 1x, 128 128 1x, 256 256 1x 128 2x 64 3x), regexp();
> @imgset 'set-2' (160 160, 320 320, 640 640, 1280 1280), regexp();
> <img src="fallback.jpg"
> imgset="set-1 at media('smallicon') 128px;
> set-2 at media('flexwidth') 100% (30em) 50% (50em) 33%">
Where are the source urls? Are they supposed to be those numbers in
@imgset? What does regexp() mean? I don't understand your use of
commas in @imgset.
> It does not require the preloader to have full css parser. It only has to
> parse @media and the new @imgset CSS subset language, using a similar
> syntax to @media. And I believe if offer an easy way to polyfill this.
This isn't as terrible for polyfilling, since it's easier to spot
things and extract them with a regex. I find it less understandable,
though this might be because you haven't explained most of your syntax
and possibly have some syntax errors.
More information about the whatwg