CSS images 4: image()

[jsnkuhn]

WebKittens

No response

Title of the proposal

CSS Images Module Level 4: iamge()

URL to the spec

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

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

No response

Mozilla standards-positions issue URL

https://github.com/mozilla/standards-positions/issues/856

WebKit Bugzilla URL

https://bugs.webkit.org/show_bug.cgi?id=72584

Radar URL

No response

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 in object-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/