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?

img

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

You can define font styles on the image selector so at the very least you can control how the alt text will display in place of the missing image.

– Aaron
Jan 15 '14 at 21:58

will anyone else will point at the ALT attribute ?

– G-Cyr
Jan 15 '14 at 22:09

@GCyrillus The alt attribute is irrelevant to my question, but it has been mentioned.

– Rudie
Jan 15 '14 at 22:10

alt

ALT attributes shows up when link is broken it is needed most of time when image has meaning and can be easily used :)

– G-Cyr
Jan 15 '14 at 22:20

4 Answers
4

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

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

img

src

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

:-moz-broken:after

:-moz-broken:before

img:after

alt

:-moz-broken:after works? :after usually doesn't work for self-closing elements. Let me fire up the old Firefox and try.

– Rudie
Jan 15 '14 at 22:15

:-moz-broken:after

:after

Interesting, but how would this work? Don't non-container elemnts like img ignore pseudo elements?

– Danield
Jan 15 '14 at 22:15

Works beautifully! Broken img apparently have :after, while working images don't. I can't find a similar selector for Chrome =(

– Rudie
Jan 15 '14 at 22:27

img

:after

@Danield, good question, which has an odd answer; I’ve expanded my answer.

– Jukka K. Korpela
Jan 15 '14 at 23:25

+1 I just verified that this works in Firefox. Thanks.

– Danield
Jan 16 '14 at 11:05

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

The display, min-height and min-width will definitely affect the working image too.

– Rudie
Jan 15 '14 at 22:08

display

min-height

min-width

this is a tip, its always a good practice to use width and height attributes in <img> tags , so i presume that size of image you link is known

– G-Cyr
Jan 15 '14 at 22:11

Right, but if I style my image to have a pretty alt, I might also style it (unintentionally) for when it does work (which is naturally the assumption). Width, height, border, background, outline etc are very useful for broken images, but will affect working images too. That's why I need a more specific selector.

– Rudie
Jan 15 '14 at 22:13

alt

do not mistake, alt is shown when image is not avalaible, and is not suppose to be a tooltip, this was an error of old IEs to show alt on hover. beside img do not take pseudo-element. please, analyse code and notice theres no border, break the other link too :), drop the min-size if you wish ... understand the purposeand use of ALT attribute.

– G-Cyr
Jan 15 '14 at 22:18

+1 This is a fine solution (One observation though, the alt text doesn't obey text-align:center)

– Danield
Jan 15 '14 at 22:19

No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.

it's pointless some how, there no need of this, the alt attribute itself is there for this purpose and style sheet can style it (bag, font-size, and so on )

– G-Cyr
Jan 15 '14 at 22:08

@GCyrillus What if I want to style a border, a margin, a width, etc? Those will affect both broken and working images. It's definitely not the same. Styling alt is cool, but not nearly enough.

– Rudie
Jul 28 '15 at 21:32

alt

@Rudie , can you test this codepen.io/gc-nomade/pen/gpQWNM and tell me if that is close to your question ?

– G-Cyr
Jul 28 '15 at 22:51

I'm not sure what I'm supposed to see =) Both images have padding and margin. The broken image is clearly broken, with alt and red cross (and still Chrome's broken image icon lol). I only want the working image to have padding and margin and box shadow. screencast.com/t/SfFXf79o9e

– Rudie
Jul 29 '15 at 10:16

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

Handy list, but incomplete. (They all are.) I like :indeterminate and love :default.

– Rudie
Jul 28 '15 at 21:34

:indeterminate

:default

comprehensive ≠ complete. ... and it is 18 months old... ancient in web time. Feel free to update link if you find it is out of date.

– Phlume
Jul 29 '15 at 2:41

Aw man, how did you type a ≠?

– Rudie
Jul 29 '15 at 17:15

≠

lol... same way you copied it to comment on it :-)

– Phlume
Jul 29 '15 at 17:44

it

Haha so pro! 2015 yo. Thanks man. What about this reference? developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

– Rudie
Jul 29 '15 at 18:38

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt