1107646 - (image-set) Implement image-set().

Status: NEW

(Core :: CSS Parsing and Computation, enhancement, P2)

Description

[Marcos Caceres [:marcosc]]

Implement image-set from CSS Image Values and Replaced Content Module Level 3 to enable a complete responsive images solution.

Comment 1

[yisibl]

Up to now, only Firefox and IE (Edge) does not support image-set.

http://caniuse.com/#feat=css-image-set

Comment 2

[Sebastian Zartner [:sebo]]

https://github.com/w3c/csswg-drafts/issues/1148 suggests to move this feature to css-images-4 due to a lack of implementations.

Sebastian

Comment 3

[Ivan Kuckir]

Can you please implement image-set() ? When devicePixelRatio is more than 1, and I use the custom cursor (PNG image), Firefox scales up the cursor according to devicePixelRatio (so it is blurry). W3C suggests to solve it with image-set() (which already works in Chrome for several years).

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I want to do some cleanup of style images in bug 1440305 once I'm back from vacation. I'll do it with implementing this into account, so that implementing this is trivial-ish after that.

Comment 5

[Ivan Kuckir]

Guys, please, implement image-set(). It is the only way of using crisp custom cursors - https://github.com/w3c/csswg-drafts/issues/2480#issuecomment-376815276  (e.g. when you have a 4K display, and you have a custom cursor of 100x100 CSS pixels, Firefox makes the cursor blurry and there is no way to provide a hi-resolution cursor (e.g. 400x400 hardware pixels) to Firefox.

Comment 6

[Ivan Kuckir]

I started telling my users to use other browsers than Firefox, because of the missing image-set. https://github.com/photopea/photopea/issues/828  It makes me really sad, that the user community has no chance to get in touch with Mozilla developers.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

(In reply to Ivan Kuckir from comment #5)
> Guys, please, implement image-set(). It is the only way of using crisp
> custom cursors -
> https://github.com/w3c/csswg-drafts/issues/2480#issuecomment-376815276 
> (e.g. when you have a 4K display, and you have a custom cursor of 100x100
> CSS pixels, Firefox makes the cursor blurry and there is no way to provide a
> hi-resolution cursor (e.g. 400x400 hardware pixels) to Firefox.

This is tracked in bug 1425694, which you also filed.

(In reply to Ivan Kuckir from comment #6)
> I started telling my users to use other browsers than Firefox, because of
> the missing image-set. https://github.com/photopea/photopea/issues/828  It
> makes me really sad, that the user community has no chance to get in touch
> with Mozilla developers.

image-set() is on the radar, but we don't have infinite resources unfortunately.

Comment 8

[Sebastian Zartner [:sebo]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)
> (In reply to Ivan Kuckir from comment #6)
> > I started telling my users to use other browsers than Firefox, because of
> > the missing image-set. https://github.com/photopea/photopea/issues/828  It
> > makes me really sad, that the user community has no chance to get in touch
> > with Mozilla developers.
> 
> image-set() is on the radar, but we don't have infinite resources
> unfortunately.

And just to be clear, the only browser that supports image-set() at the moment is Safari, and that implementation is incomplete.

Sebastian

Comment 9

[Noam Rosenthal]

Webkit nightly now supports most of the standard syntax:
https://trac.webkit.org/changeset/255228/webkit
https://trac.webkit.org/changeset/254861/webkit
https://trac.webkit.org/changeset/254406/webkit

It's been unprefixed in webkit for a long time.

New PR for WPT with comprehensive web platform tests:
https://github.com/web-platform-tests/wpt/pull/21539

Chromium bug to unprefix:
https://bugs.chromium.org/p/chromium/issues/detail?id=630597&q=image-set&can=2