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

Nice idea. Extending :invalid is a bad idea, however, since it has a FORM 
semantic and many style sheets make the assumption that :invalid only apply 
to INPUTs &co based on user input and apply formatting accordingly (red 
background, red text, ...) that are not meant to be applied to an 
undisplayble image.

Maybe using readyState could give more granular control over the process? 
While an image is loading and/or if the image has failled to load, its 
readystate is "uninitialized".

    img:onreadystate(error) { content: attr(alt); }

Additionnaly, we could probably add a new state named "error" :

    img:onreadystate(uninitialized) { content: 'Loading...'; }
    img:onreadystate(error) { content: attr(alt); }

Just my two cents,
François




-----Message d'origine----- 
From: Lea Verou
Sent: Wednesday, December 28, 2011 12:01 PM
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 Wednesday, 28 December 2011 12:24:05 UTC