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

On 9/8/2011 9:52 AM, Tab Atkins Jr. 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;
> }
>
> ~TJ

What about borrowing the current terminology from HTML5, and calling it: 
"content: transparent;"
The transparent keyword would only apply to the element (not the pseudo 
element, which is already
covered by inhibit and other flags).

Received on Thursday, 8 September 2011 17:07:06 UTC