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

On 29/12/11 01:39, Tab Atkins Jr. wrote:
> I'm wondering about the use-cases for this. We already have one 
> specced solution to this - the image() function lets you provide 
> multiple images, and it selects the first one that loads. This way, 
> rather than getting a broken image when your first url doesn't load, 
> you instead display the second image. If the only use-case is 
> replacing broken <img> tags with a fallback, then, this can be done 
> with a rule like: img { content: image(attr(src as url), 
> "fallback.png"); } or, to simply hide broken images: img { content: 
> image(attr(src as url), transparent); }
That transparent image would be 300 pixels wide and 150 pixels tall and 
would still affect the layout. Not the same as hiding it with 
display:block;. What you're proposing is basically a hack. Correct me if 
I'm wrong but I don't think image() was designed for replaced elements 
and the syntax to use it this way is not exactly intuitive.

However, even if we assume that image() is a perfect fit for this, there 
are still plenty of use cases not covered by it. I can think of at least 
three off the top of my head:
- Hiding them completely, as discussed below
- Styling broken images in a certain way, e.g. with a red outline, 
giving them certain dimensions etc
- Replacing broken images with certain text (like their alt attribute or 
something generic for all broken images)

Also, lets not forget that CSS selectors aren't just for styling, but 
are also used for selecting elements through the Selectors API. Being 
able to select all broken images in JavaScript would be quite useful.

-- 
Lea Verou (http://lea.verou.me | @LeaVerou)

Received on Thursday, 29 December 2011 17:43:33 UTC