Is it possible to detect broken/unloaded (error) images with CSS?

Question

I'd like to give broken/errored images some extra CSS:

img:error {
  max-width: 20px;
  max-height: 20px;
}

but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?

I've looked around, but nobody seems to be wondering =)

(Yes, I know JS can do it and I know how; no need to mention it.)

Answer 1

There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.

CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).

Answer 2

For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image : example:

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

These style will be hidden when image is shown. http://codepen.io/anon/pen/Kxipq As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)

some extra Image alt attribute best practices

Answer 3

NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:

http://reference.sitepoint.com/css/css3psuedoclasses

July, 2015 EDIT/ADDITION:
(Thank you Rudie)

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes