[css-content] Clarify how 'content' alt should work if images fail to load or are disabled

[zcorpan]

https://drafts.csswg.org/css-content/#alt

It says this string is only for AT.

In the example:

.new::before {
  content: url(./img/star.png) / "New!";
    /* or a localized attribute from the DOM: attr("data-alt") */
}

if the image fails to load or the UA has images disabled, what should be rendered visually? Nothing? A broken image icon? The alt string?

cc @fantasai

[dauwhe]

I would think it should be handled exactly the way browsers do for missing images, but there's no consensus on that.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

I do like Chrome's behavior, where the user sees both the alt text and a broken image icon. This presents the most information to the user.

[fantasai]

I think Firefox's behavior, to replace missing images with the non-replaced alternate content, makes the most sense. Providing some indication of a missing image might be useful, but in that case it could be handled by something like img:broken::before { content: url(broken-image-icon.svg; }, which means authors can override it if they want.

[AmeliaBR]

I would definitely want the alt text to be available if image content is not. I don't really care about a broken image icon or not. Heck, it would be nice if the wording was generic enough that user agents could use the fallback text as a substitute for any generated content that can't render, including missing font glyphs.

Regarding @fantasai's suggestions: the :broken pseudoclass probably couldn't apply to broken images specified within the CSS itself. I can't see a way of implementing that sensibly.

[xfq]

Currently, the specified behavior is:

If an <image> represents an invalid image, the user agent must do one of the following:

• "Skip" the <image>, generating nothing for it.
• Display some indication that the image can’t be displayed in place of the <image>, such as a "broken image" icon.

---

Ref:

• https://drafts.csswg.org/css-content/#typedef-content-content-list
• f1f7667