[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)
bruno at hexanet.net
Tue Nov 12 16:33:05 PST 2013
On 11/12/13 12:11 AM, "Adam Barth" <w3c at adambarth.com> wrote:
>On Tue, Nov 12, 2013 at 12:08 AM, Jukka K. Korpela <jkorpela at cs.tut.fi>
>> 2013-11-12 9:58, Adam Barth wrote:
>>> Unfortunately, we can't add new tags to head. If the parser sees a
>>> tag it doesn't recognize in the head, it creates a fake body tag and
>>> pushes the tag down into the body.
>> But you could use <style type=text/foobar>...</style>, with a suitable
>> for foobar, like x-imgset. This could even be handled with a polyfill
>Maybe there's a CSS solution to this problem? Do we just need to make
>the preload scanner smarter about interpreting CSS?
The style element can do. How about the following css like approach then:
imgset: small 150 1x, medium 200 1x, large 300 1x 150 2x;
pattern: "/(?<=\-)(.*)(?=\.)/s"; <--- that or a template model
media: (min-width: 568px) and (max-width: 768px);
media: (min-width: 320px) and (max-width: 568px);
It requires the pre-loader to parse some inline css subset, but only a
limited semantic and fairly small, not a css presentational one. The MQ
syntax remains the same as CSS, and they are tokenized by imgset which put
them away from the DOM.
The image becomes:
<img width="300" height="100" src="logo-large.jpg" imgset="set-1: small
(phone) medium (tablet) large">
Or perhaps combine this new language as css4 classes and pseudo selectors
if feasible, where you can refer to MQs with pseudo classes for the
presentational aspect like:
That would be a very flexible way to deal with media queries too...
More information about the whatwg