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

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;
}

~TJ

Received on Thursday, 8 September 2011 16:53:30 UTC