search

Devographics / surveys

YAML config files for the Devographics surveys
43 stars 8 forks source link

Feature: `image-set()` function #30

Closed SebastianZ closed 1 year ago

SebastianZ commented 2 years ago

Spec: https://drafts.csswg.org/css-images-4/#image-set-notation MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set

This function is supported in all browsers using the -webkit- prefix. Gecko is currently the only one that additionally supports the unprefixed version. The prefixed version is very restricted in what it supports. Nonetheless, it might be interesting to see how many people are already using it. In my opinion, this is a relative important but probably underrated feature in regard of UX. So maybe the survey could also raise the awareness of the function and push browser vendors to implement the unprefixed version.

Sebastian

atjn commented 2 years ago

The MDN information is not up to date. WebKit supports part of the spec without the -webkit- flag, which makes it even harder to write the CSS in a way that all browsers can read and support. Caniuse has the latest info: https://caniuse.com/css-image-set

atjn commented 2 years ago

I think it would be great to have this in the survey. Delivering images across jpeg, webp, avif and jxl is really hard right now, and a stable spec that all browsers support could really go a long way to make it easier to deliver those images.

Right now, It seems like developers resort to proprietary cloud services for image delivery, because it is so hard. And those services work by sniffing the browser UA and by delivering different formats than what the URL advertises. Those are all bad practices.

Another detail is that image-set could be used to deliver different sized images if the width (w) dimension specifier could be supported. This is not officially in the spec yet, but it has been discussed and could quickly be added if there was pressure to do so.

Adding support for w and the type() specifier would allow open source build tools to deliver the same images to image-set in css as they do to <picture> elements in html, and I sincerely believe that would make adoption of those techniques much more feasible.