cssimagebroken-image

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

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

Solution

  • 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).