[selectors] Pseudo-classes for image state

[whileloopa]

trafficstars

I propose to add pseudo-classes for image state. img:loading -- sending request to server img:partial -- image partially loaded img:complete -- image completely loaded img:broken -- image src link is broken

[Zhang-Junzhi]

Similar discussions can be seen at #656 .

In the last comment, I proposed to generalise the issue to all elements instead of only image elements, such as script, style, etc. Because I'd like to see a fallback mechanism enabled for giving users with some friendly hints about the current load status of various external resources.

[eeeps]

Use case for this:

I'm trying to implement low-quality image placeholders in a nice, progressively enhanced way. My idea: put the LQIP in a background-image, so that we don't need JS to switch out the img srcset/src. This worked great until I used it on an image that contained transparency. It would be nice to be able to switch the background/preview off, after the image had loaded, using just CSS.

Another common LQIP pattern that would benefit from this: blurring the preview image but not the full-quality image.

For progressive images, it would be nice to know whether or not the initial image scans have been painted. I don't think :partial will do this. Perhaps we need another value, :painted?

Also does :loaded actually mean decoded (or perhaps, completely painted)? The distinction seems important in instances where <img decode="async">.

[emilio]

There's some interesting use-cases for these like fading in lazy-loaded images (https://bugzilla.mozilla.org/show_bug.cgi?id=1713512 for example).

[benface]

This would be super useful.

[sashafirsov]

Thinking about 2 cases for image error handling.

• bad URL or network/server error. Image is not available.
• URL is fine but content is not a supported image.

For the 1st case there is no need for :broken as :invalid css selector already there. https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

Reusing the same name for semantically identical cases would make the framework authors life easier :)

For 2nd case :broken selector would be appropriate. The fallback would lead to alternative presentation like embedded into CSS SVG or alternative host URL.

the :invaid will NOT be trigerred when URL is valid and has some content. But :broken would be trigerred in both cases.

[Th3S4mur41]

For years, I’ve felt the absence of a :complete pseudo-class in CSS—especially when working with avatars.

One recurring issue: users upload profile images with transparent backgrounds, expecting a clean display. But instead, the fallback (like initials on a colored background) stubbornly shows through, creating an awkward visual overlap. The image loads, but CSS has no way of knowing it’s ready to take over.

The only workaround? JavaScript. We’ve had to manually listen for the load event and toggle a class like complete just to style things correctly. It’s clunky, error-prone, and feels like a hack for something CSS should handle natively.

To support the case for a pseudo-class, I’ve written a post diving into the problem and the potential solution: 👉 From Skeletons to Smooth Reveals: A Case for the :complete pseudo-class

[Th3S4mur41]

This seems to be covered by https://github.com/w3c/csswg-drafts/issues/7467

Thanks @bramus for pointing in the right direction 😉