Open Bug 1107646 (image-set) Opened 6 years ago Updated 2 days ago

Implement image-set().

Categories

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

enhancement

Tracking

()

People

(Reporter: marcosc, Unassigned)

References

(Depends on 2 open bugs, Blocks 3 open bugs, )

Details

(Keywords: dev-doc-complete, Whiteboard: [tw-dom][layout:backlog])

Attachments

(3 files)

Implement image-set from CSS Image Values and Replaced Content Module Level 3 to enable a complete responsive images solution.
Alias: image-set
Up to now, only Firefox and IE (Edge) does not support image-set.

http://caniuse.com/#feat=css-image-set
Whiteboard: [tw-dom]
https://github.com/w3c/csswg-drafts/issues/1148 suggests to move this feature to css-images-4 due to a lack of implementations.

Sebastian
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).
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.
Depends on: 1440305
Summary: Implement image-set from CSS Image Values and Replaced Content Module Level 3 → Implement image-set().
Blocks: 1532331
Type: defect → enhancement
Blocks: css-images-4
No longer blocks: css-images-3
Priority: -- → P2
Whiteboard: [tw-dom] → [tw-dom][layout:backlog]

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

Now that we triage by severity, setting this bug's priority to P2 to represent near-term backlog status. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla

Flags: needinfo?(emilio)
Depends on: 1684770
Depends on: 1684909
Depends on: 1685078
Depends on: 1691275

will the ff implementation support type for image file type fallback mentioned in the spec?

background-image:
image-set( "foo.avif" type("image/avif"),
"foo.jpg" type("image/jpeg")
);

Depends on: 1695402
Depends on: 1695403
Depends on: 1695404

(In reply to jsnkuhn from comment #11)

will the ff implementation support type for image file type fallback mentioned in the spec?

The answer is yes, but we need to implement that. I posted instructions in bug 1695404.

Depends on: 1696314
Depends on: 1698133

Checked docs didn't include any out of date compat info and updated BCD and release notes.

When avif is disabled in about:config (which is the default in Firefox 88.0b7), the following image-set:

background: image-set(url("firefox.avif") 1x, url("firefox.jpg") 1x);

results in a blank div. Looking at the network inspector, it looks like the browser is downloading the avif file instead of the jpeg file, although it can't display it.

Attached file image-set.html
Attached image firefox.jpg
Attached image firefox.avif

That's how it's supposed to work. In order to avoid requesting the image you need to use the type() function, which is being implemented in bug 1695404.

Flags: needinfo?(emilio)

Sorry! I was mislead by type() not being implented yet.

You need to log in before you can comment on or make changes to this bug.