Geek Answers Handbook

Is it possible to detect broken / uploaded (errors) images using CSS?

I would like to provide broken / erroneous images with some additional CSS:

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

but that will not work. Is there a way with pure CSS for this? Is there a pseudo selector for this img? Or even better: a dirty hack that works?

I looked around, but no one seems to be wondering =)

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

+4
source share
4 answers

CSS , Firefox () :-moz-broken. , : " ", , , :

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

, " , ", ( img, src ), . , "" "".

CSS 2.1 : " : before : after ( IMG HTML). ". 3 (CSS3 Selectors) : " CSS 2.1". -. , Firefox :-moz-broken:after, :-moz-broken:before. , img:after (.. alt).

+6

. CSS- level 2.1 3 , , .

+1

alt, , , : :

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

This style will be hidden when displaying the image. http://codepen.io/anon/pen/Kxipq As you can see, we do not check for broken links, but offer an alternative that is useful for blind people, search engines, anything, and some additional styles end :)

some additional best alt attribute attributes

+1
source

More articles:


All Articles