On 11/12/13 12:11 AM, "Adam Barth" <[email protected]> wrote:
>On Tue, Nov 12, 2013 at 12:08 AM, Jukka K. Korpela <[email protected]> >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...
