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

One use-case is for editors. Having inserted images broken collapse (as
they do in standard's mode) is a bad WYSIWYG editing experience. Although,
there are simpler solutions to this use-case than needing a selector for
broken images:
1. -moz-force-broken-image-icon
2. Listen to image onerror events and handle it manually.

Ojan

On Wed, Dec 28, 2011 at 6:39 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> 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
>
>