W3C home > Mailing lists > Public > www-style@w3.org > December 2011

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

From: Lea Verou <leaverou@gmail.com>
Date: Wed, 28 Dec 2011 13:01:19 +0200
Message-ID: <4EFAF6FF.6060303@gmail.com>
To: www-style list <www-style@w3.org>
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.


-- 
Lea Verou (http://lea.verou.me | @LeaVerou)
Received on Wednesday, 28 December 2011 11:01:50 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:47 GMT