Re: [css4-ui]/[css4-selectors] Pseudo-class for selecting broken images & other external resources

On Wed, Dec 28, 2011 at 3:01 AM, Lea Verou <leaverou@gmail.com> wrote:
> It was to my surprise that not only I couldn't find any current pseudo-class
> for this, but also I couldn't even find a relevant discussion on the list.
>
> Being able to select broken images has many popular use cases:
> - Showing a more user-friendly and/or relevant message to the user,
> something more fitting to the rest of the site perhaps
> - Forcing UAs to display the alt text even when they don't by default, as
> simply as img[alt]:error { content: attr(alt); }
> - Controlling the dimensions of the broken image placeholder
> - Hiding broken images
> - Using the selectors API to select all broken images and display a message
> somewhere
>
> It seems to be a popular need, as shown by a quick google search:
> - http://www.webdeveloper.com/forum/showthread.php?t=201192
> - http://www.phpied.com/hide-broken-images/
> -
> http://stackoverflow.com/questions/6701167/make-broken-image-respect-css-dimensions
> - http://css-tricks.com/snippets/jquery/better-broken-image-handling/
> -
> http://www.affiliates4u.com/forums/programming/42464-there-css-solution-broken-images.html
> - http://www.jquery4u.com/snippets/jquery-detect-hide-broken-images/
> and more. It's a great example of how CSS could eliminate presentational
> JavaScript.
>
> Mozilla even goes as far as to have a custom property for rudimentary
> control over the display of broken images:
> https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon
>
> Also, I'm not a browser developer by any means, but I'd guess it's trivial
> to implement such a thing. I'm not sure :error would be the best name,
> perhaps :invalid could be extended to cover this as well?
>
> If this gets added, it should be made sure it not only covers broken images,
> but also any kind of broken external resource (video, audio, script[src],
> link, object, embed, source, iframe and others), ideally in a way that the
> spec won't have to be updated every time a new relevant element gets added
> to HTML.

I'm wondering about the use-cases for this.

We already have one specced solution to this - the image() function
lets you provide multiple images, and it selects the first one that
loads.  This way, rather than getting a broken image when your first
url doesn't load, you instead display the second image.

If the only use-case is replacing broken <img> tags with a fallback,
then, this can be done with a rule like:

img { content: image(attr(src as url), "fallback.png"); }

or, to simply hide broken images:

img { content: image(attr(src as url), transparent); }

This also allows one to do broken-image handling in all the other
places where images are used in CSS, rather than just in <img>
elements.

Based on the links you provide above, this seems to be sufficient -
they all describe ways of finding all the broken images on a page and
either replacing their src or hiding them.

Are there use-cases for anything further?

~TJ

Received on Wednesday, 28 December 2011 23:40:31 UTC