Styling broken images

Images fail to load. Specifically, images intentionally placed in the
DOM as elements. Be it using the <img> element in HTML or something more
fancy.

The HTML standard specifies that the fallback content should be the alt
attribute (and the longdesc attribute). However, this does not match
with what browsers have done historically.
It is indeed true that browsers do use the fallback content, but they
have also included an icon before the fallback content.

It is my belief that this fallback content should be possible to style.
In particular, I believe that authors may want to provide their own icon.

One obscure problem that occurs here is that the fallback content might
not be used despite the server indicating a bad url. The HTML standard
specifies that the user agent should ignore the HTTP status code and
always display the returned resource body if it is in a supported image
format. The exact semantics for this are up for debate [1], but the main
point is that fallback content will not be used. My opinion here is that
styling should behave as if the image loaded successfully, if not
specifically designed to handle this situation. The intent is clear,
show the returned image, since it most likely contains a visual
description of the problem in a far better way than the fallback
content. CSS should honor this intent and avoid setting authors up for
this gotcha. It is likely that 3rd party servers will do this without
the document author being aware of this feature. For example, a
discussion forum might allow users to embed images from arbitrary hosts
and said hosts might delete the images for any reason they feel like.

My proposal is simple in its idea. Add a :broken pseudo-class that
matches when the image is displaying the fallback content. I choose this
name to match the name of the state the HTML specification defines for
images.

I am at a loss for what to name a pseudo-class for an image that is
displaying an error response. There is an obvious risk of confusion
between the two situations and it should be clear to the author that
it's an unusual situation. Perhaps it is best to wait with this case
until the issue [1] is resolved.

As for the icon, I have doubts about how to deal with it. The ::before
pseudo-element is an obvious solution, but it does not fit with the fact
that the icon is supposed to go inside the img element, especially since
it is supposed to be inside any border of the image element.
An easy solution would be to just define a new pseudo-element called
::icon and let authors set the content for that. But is this the best
way? I wonder.

[1] https://github.com/w3c/html/issues/322

Received on Friday, 16 September 2016 21:11:13 UTC