Keep the image-set() syntax around for browsers that support it

[chris-morgan]

Media queries are all very well for browsers that don’t support image-set(), but it’d be nice to leave the image-set() function in there so that browsers that do support it can use it—because they will handle transitions between queries better (such as keeping the old image around until the new one is loaded, which I’m guessing they won’t do for media-query-based image source changes).

I haven’t thought too deeply about this, but I don’t think @supports will need to be used—just create a new rule after the media queries which will overrule them. But doing this properly will entail decomposing shorthand syntaxes, so background: image-set(…) becomes background-image: image-set(…), lest other properties be accidentally reset.

I expect this:

.foo {
    background: red image-set(url(a) 1x, url(b) 2x);
    background-size: cover;
    /* If there was a background-image or background declaration here, you’d
    possibly need to abort the whole thing. Probably out of scope for this issue. */
}

To compile to roughly this:

.foo {
    background: red url(a);
    background-size: cover;
}

@media (min-resolution: 2dppx) {
    .foo {
        background-image: url(b);
    }
}

.foo {
    background-image: image-set(url(a) 1x, url(b) 2x);
}

[strarsis]

+1, if all non-supporting browsers just ignore the background-image with image-set and don't show a blank background though.

[SuperOl3g]

Thanks for report!
I was thinking about adding image-set for new browsers, but had found no pros.
But size of compiled code will be increase!
As far as I know result of using image-set function and media-query polyfill is exactly the same, isn't it?
What do you mean by:

keeping the old image around until the new one is loaded

If there is any advantages of saving image-set function we can add it as additional option to config.

[SuperOl3g]

Closing for lack of action.

[Grawl]

just recognized that this polyfill replaces image-set() with @media and wondering why there is no @supports code

expected behaviour for me is

input:

.foo {
    background-image: image-set('path/to/image.png' 1x, 'path/to/image@2x.png' 2x);
}

output:

@media (min-resolution: 2dppx) {
    .foo {
        background-image: url('path/to/image@2x.png');
    }
}
.foo {
    background-image: url('path/to/image.png');
}
@supports (background-image: image-set('path/to/image.png' 1x, 'path/to/image@2x.png' 2x)) {
    .foo {
        background-image: image-set('path/to/image.png' 1x, 'path/to/image@2x.png' 2x);
    }
}

last part is missing for now: if browser can do it, it must do it