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

Fri Nov 15 23:28:39 PST 2013

>> 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.

And just to be complete, when it come to Adam's '.artdirected' background
case. Here a more compact way I'd consider do it along the new @imgset,
without the need for the preloader to parse any classes or presentational
css at all.

Let's take the premise that one can currently preload all or many css
backgrounds, without having to declare any css classes at all. The way you
this, is at the <head> level, using multiple-background support.

Example:

<style>
 head{ background: url(bg.png), url(header.png), url(logo.png),
url(nav.png); }
</style>

And as long as your images are cached, it's a simple and efficient compact
way of preloading backgrounds before your external css is parsed. I don't
know if one would call this a hack or not, AFAIK doing it is not
against any specs. And the <head> element is style-able without any issues
across browsers. I have been using it conveniently as a simple viewport
dimmer for modal windows without any issues nor side effects.

So how about just using the same approach, and as very similar syntax as
The inline imgset="" attribute for the css background-image property, such
as a short and simple:

<style>
head{
  background-image: imgset(set-1 at media('small') 128px; icon-128.png),
		    imgset(set-2 at media('flexwidth') 30px; bg.png);
}
</style>

The preloader has enough imgset() info it can parse without having to look
at the rest of the css syntax. It just cares about imgset() which it can
handle with @imgset grammar with the previous @img definition ahead of it.
No inline styling here is required, which by definition makes it a no
brainer for 'stoopid', since the <head> element is hidden by default.

Note that technically, if you provide this in the <head> before external
styles, the css would actually render and start loading the images even
before the preloader kicks-in...
Or does the preloader look at the <head> first (once received), and then
the <body>? Adam?    I think it works either way regardless...

Again Tab, please revamp the syntax as you deem more appropriate and more
css spec compliant. I do not claim that my syntax is perfect or ideal.