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

On 8/30/2011 1:51 PM, Tab Atkins Jr. wrote:
> Did you mean to send this to the list?
>
> On Tue, Aug 30, 2011 at 1:50 PM, Charles Pritchard<chuck@jumis.com>  wrote:
>> On 8/30/11 1:47 PM, Tab Atkins Jr. wrote:
>>> On Tue, Aug 30, 2011 at 1:38 PM, Charles Pritchard<chuck@jumis.com>
>>>   wrote:
>>>
>>>> On 8/30/11 1:17 PM, Tab Atkins Jr. wrote:
>>>>
>>>>> Relying on background-image and hidden content prevents you from doing
>>>>> certain useful things as well, like auto-sizing the element to the
>>>>> size of the element.
>>>>>
>>>>> The rendering of "content: url(foo.jpg) replaced;" is also already
>>>>> mostly in the browsers, so that's not a strong concern.
>>>>>
>>>> Thanks for the reference to content: replaced;
>>>> How do I avoid re-flowing the content?
>>>>
>>>> content: url(img.jpg) replaced; is very different from
>>>> background: url(img.jpg); background-size: contain;
>>>>
>>>> One reflows content, one does not.
>>>>
>>> Wait, so you want it to lay out like the normal contents were there,
>>> but display as if it were just the given image?  Why?  This seems
>>> unrelated to the use-case that I assumed you were trying to address in
>>> my first reply.
>>>
>>> ~TJ
>>>
>> I don't want content picking up the new image size and re-flowing, but that
>> said,
>> your solution works for the issue I brought up, of using pixel1x1.png, as
>> I'm already
>> setting the width and height.

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?

-Charles

Received on Saturday, 3 September 2011 18:28:30 UTC