dandclark
commented
9 months ago Thank you for proposing CSS image() function for inclusion in Interop 2024.
We wanted to let you know that this proposal was not selected to be part of Interop this year.
We could not find any tests for CSS image() function in the Web Platform Tests. Such tests are crucial for measuring interoperability status and progress. Once there are WPT entries covering this proposal, we welcome it being resubmitted for a future round of Interop.
For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!
Posted on behalf of the Interop team.
Description
spec fixes many long standing issues with CSS images:
a simplified syntax for image spriting that doesn't require 3 different CSS properties:
background-image: image('sprites.svg#xywh=40,0,20,20');. This is a similar syntax as is used inobject-view-box. Would be wonderful to finally have parity for background and foreground images. This also opens up the use of background-size and background-position for actual sizing and positioning of these images instead of dealing with the spriting.ability to create a solid color image like this: background-image: image(red); instead of hacking a gradient like this: linear-gradient(red, red). Is good for devs because it's less repetition in the code and for browser vendors i'm guessing this would allow a path to a separate algorithm for just rendering a solid colored image.
Proper image fall-backs which url() can't do. When the image at the specified url can’t be downloaded or decoded, fallback to another image or color. This could lead to less background colors that are never seen being painted behind images.
automatically respect the image orientation specified in the image’s metadata.
FYI: the above are all from images-4 but the CSSWG is already looking at expanding image() in images-5 for things like background video (https://github.com/w3c/csswg-drafts/issues/6732) and @image-manipulation (https://github.com/w3c/csswg-drafts/issues/6807)
more detailed explainer: https://12daysofweb.dev/2022/css-image/
Specification
https://drafts.csswg.org/css-images-4/#image-notation
Open Issues
There do not appear to be any issues open with the CSSWG specifically about image()
Tests
https://wpt.fyi/results/?label=master&label=experimental&aligned&view=subtest&q=css-image-fallbacks
Current Implementations
Standards Positions
Mozilla: https://github.com/mozilla/standards-positions/issues/856
Browser bug reports
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=703217 chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=254753#c_ts1639769079 webkit bug: https://bugs.webkit.org/show_bug.cgi?id=72584
(looks like in webkit and firefox put in a considerable amount of work towards this in the early 2010s but then was just abandoned?)
Developer discussions
No response
Polls & Surveys
https://2023.stateofcss.com/en-US/features/
are aware: 2876 have used: 1418
1158 added it to their reading list. That's the 10 most added property
Existing Usage
No response
Workarounds
There is a postCSS plugin for
image(<color>)https://github.com/valtlai/postcss-color-imageAccessibility Impact
No response
Privacy Impact
No response
Other
No response