[css-pseudo] Extending the scope of `::placeholder`

[Crissov]

The prose for ::placeholder currently clearly limits its use to placeholders that eventually get replaced by user input, i.e. within form widgets. Conceptually, I think it could equally apply to “alternative” text that is displayed instead of replaced elements when their replaced content cannot (yet) be rendered – most notably the alt attribute of <img> elements in HTML. Although there have been pseudo-classes proposed to select such elements #3134, there currently does not seem to be a way to select and style only this kind of placeholder (unless it comes from a descendant element instead of an attribute in the host document language, e.g. within <audio>, <video> or <object>).

• Should the scope of ::placeholder be broadened to include alternative text?
• In case it shan’t, should a new pseudo-element be introduced to represent alternative text?
  • Would a combination of pseudo-element and (new) pseudo-classes, e.g. ::content:textual vs. ::content:replaced, yield more useful options for authors?
    (Even though its scope is different, this should be considered together with the longstanding ::text proposal. [css-pseudo-5] ::text / ::text-node pseudoelement #2208)

[SebastianZ]

I believe there was already some discussion around providing a pseudo-element for alternative/fallback text. Though I can't find it right now.

Anyway, authors can already style the alternative text. Any properties applied to <img> elements also apply to the alternative text. And with the :broken and :loading pseudo-classes resolved on in #7467, authors get more fine-grained control on how to style it.

Though the current solutions don't cover any extra contents that are shown when the image can't be loaded, like a "broken" icon. Providing control over this seems to be the main use case for a pseudo-element to me.

Sebastian

[AtkinsSJ]

Though the current solutions don't cover any extra contents that are shown when the image can't be loaded, like a "broken" icon. Providing control over this seems to be the main use case for a pseudo-element to me.

Something like img:broken { background-image: url("custom-image-instead-of-the-default-one.png"); } would cover that I think.

My concern with widening what ::placeholder applies to is that any existing pages with a bare ::placeholder { something } style rule might have unexpected effects that they don't want to apply to image fallback text.

[SebastianZ]

Something like img:broken { background-image: url("custom-image-instead-of-the-default-one.png"); } would cover that I think.

I agree with that. Though this also means to streamline how implementations expose their broken image state. E.g. Chromium outputs the broken image as a separate element and not as a background image, presumably to avoid overlaps with the alternative text.

And depending on whether and how we define the broken state/fallback content to be exposed, it affects whether we need a pseudo-element for it.

My concern with widening what ::placeholder applies to is that any existing pages with a bare ::placeholder { something } style rule might have unexpected effects that they don't want to apply to image fallback text.

+1 on that. Also, the use case seems different to me. The alternative text is not a placeholder for the image. It has semantic meaning for accessibility. So if a pseudo-element is meant to cover this, a new one should be introduced. The HTML spec calls this "fallback content", so maybe it could be ::fallback.

Sebastian

[Crissov]

Sure, the fallback text can already be styled. The pseudo-element would only be useful when that text should be styled differently than the replaced content. Since that seems rather unlikely, but not unreasonable, I thought reuse made more sense than an entirely new one.

On a related note, replaced elements do not have ::before and ::after, but when fallback text is shown, e.g. because fetching an external resource failed, it is not considered a replaced element anymore. Therefore this should work:

img::before { 
  content: url("custom-image-instead-of-the-default-one.png"); 
}

[SebastianZ]

Sure, the fallback text can already be styled. The pseudo-element would only be useful when that text should be styled differently than the replaced content.

As noted above, styling the text differently is already covered by the pseudo-classes introduced in #7467.

On a related note, replaced elements do not have ::before and ::after, but when fallback text is shown, e.g. because fetching an external resource failed, it is not considered a replaced element anymore. Therefore this should work:

img::before { 
  content: url("custom-image-instead-of-the-default-one.png"); 
}

That's an important note. I currently don't see in the specs, whether alt text should be handled as non-replaced element. And browsers also differ, Chrome shows the pseudo-element while Firefox doesn't. And Safari doesn't even display the alt text but shows a broken icon.

So I believe, it first needs to be specified what UAs should display when a resource can't be loaded (or didn't get loaded yet) and whether the alt text is non-replaced content, so the output is unified.

And once that's clarified, it can be discussed whether there's still a need for a pseudo-element and what it should actually cover.

Sebastian

[Crissov]

#13641 just reminded me of this issue. I expect that video poster images are also not covered by ::placeholder and should not be, but it might make sense to expose them in a distinct pseudo-element like ::poster, ::icon or ::static-content.