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

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

From: Andrew Fedoniuok <news@terrainformatica.com>
Date: Thu, 29 Dec 2011 09:42:17 -0800
Message-ID: <BLU165-ds83A4F9BCB95EACE9C22F7F8AD0@phx.gbl>
To: "Lea Verou" <leaverou@gmail.com>, "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.

I think the idea was discussed couple of times already.

For example:
http://lists.w3.org/Archives/Public/www-style/2009Aug/0407.html

-- 
Andrew Fedoniouk

http://terrainformatica.com



-----Original Message----- 
From: Lea Verou
Sent: Wednesday, December 28, 2011 3:01 AM
To: www-style list
Subject: [css4-ui]/[css4-selectors] Pseudo-class for selecting broken images 
& other external resources

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 Thursday, 29 December 2011 17:42:48 GMT

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