Description

The CSS image-set() function adds HTML <picture> element like negotiation of different image resolutions and files types functionality to CSS.

Rationale

• parity with HTML <picture> functionality for CSS images is long overdue.
• with a new generation of image formats (AVIF, JXL, webp2) on the way now seems a good time to make CSS type() negotiation consistently available across browsers.
• in many cases <picture> is being used as an absolute positioned "background" to work around this issue. This breaks the separation of content and style but is a reasonable thing to do right now to get the functionality.
• chrome bug (has long been on the to do list just never been a super high priority i guess?): https://bugs.chromium.org/p/chromium/issues/detail?id=630597
• -webkit bug on type(): https://bugs.webkit.org/show_bug.cgi?id=225185

Specification

https://drafts.csswg.org/css-images-4/#image-set-notation

Tests

https://wpt.fyi/results/css/css-images/image-set?label=experimental&label=master&aligned

• Firefox is leading the way on support here.
• -webkit prefixes have been in place on Chrome and Safari for so long that it seems they are being treated as a css-images-3 version.
• Safari recently unprefixed image-set() but didn't add type() for some reason. type() negotiation has most recently been added to the spec.