Re: Proposing content-hidden for background-image and img content

On Sep 8, 2011, at 9:52 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> On Sat, Sep 3, 2011 at 11:25 AM, Charles Pritchard <chuck@jumis.com> wrote:
>> Is there a method in css generated content to retain existing dimensions? As
>> I said, I can
>> script it, via getClientRects, but pure CSS would be nice.
>> 
>> Internet Explorer 9 has a nice tool that allows developers to turn off image
>> loading, to audit alt text usage.
>> CSS generated content allows one to replace an image with the alt content,
>> but I believe it re-flows
>> the element in the process.
>> 
>> In pure CSS, I'd like to hide an image, and display its alt text within the
>> original image bounds, much as IE9 enables for developers.
>> As I understand it, this would show the alt text, but it would also resize
>> the rendering box, if width and height are not explicitly set.
>> <img alt="testing" src="img.png" style="content: attr(alt), 'WARNING: Alt
>> Missing';"  />
>> 
>> Do we have a means to retain dimensions of the element, when using
>> css3-content?
> 
> No, there isn't.  If you use 'content' on an <img>, you are fully
> replacing the content.
> 
> If there was a pseudoelement that we could apply to replaced content,
> you could do the following:
> 
> img {
>  visibility: hidden;
>  position: relative;
> }
> img::before {
>  visibility: visible;
>  content: attr(alt);
>  position: absolute;
>  top:0; right: 0; bottom: 0; left: 0;
> }

That was what I imagined too, then found out it doesn't work. I couldn't find anything in the spec to prevent it, other that that, you know, replaced elements generally can't add new elements (and therefore not pseudo-elements) with them. But it would be nice if they could add a ::before or ::after or ::marker to an anonymous box wrapping the replaced element.

Received on Friday, 9 September 2011 01:42:27 UTC