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

[Bruno Racineux]

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>
>wrote:
>> 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
>>value
>> for foobar, like x-imgset. This could even be handled with a polyfill
>>in old
>> browsers (JavaScript code that reads such elements and interprets their
>> content).
>
>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:

<style type="text/x-imgset">
.set-1 { 
  imgset: small 150 1x, medium 200 1x, large 300 1x 150 2x;
  pattern: "/(?<=\-)(.*)(?=\.)/s"; <--- that or a template model
  sizes: 1x,2x;

}
:tablet{
  media: (min-width: 568px) and (max-width: 768px);

}
:phone{
  media: (min-width: 320px) and (max-width: 568px);
}

</style>


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:

header:tablet{
   /*new style*/
}

That would be a very flexible way to deal with media queries too...