[whatwg] img as a layout tool to describe the displayed region of a CSS background-image

[Steve Dennis]

On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote:

> On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao <i4chao at googlemail.com> wrote:
>> http://dev.w3.org/html5/spec/Overview.html#the-img-element
>> "The img must not be used as a layout tool.

I think this may be a little vague/broad.  I understand the intention, but say for example I have a logo image in the top left of my header, and my header doesn't have a static height set (in case something in the header needs it to grow or shrink for instance), then the height of the logo image is dictating the height of its parent, and this would seem to me, to be using an img as a layout tool, in a sense.

>> In particular, img
>> elements should not be used to display transparent images, as they
>> rarely convey meaning and rarely add anything useful to the document."
>> 
>> An img with a given transparent image for src cuts an area of a sprite.
>> ( = img as a layout tool to describe the displayed region of a CSS
>> background-image.)
>> 
>> Is this usage of the img element considered invalid (non-conforming)?

Sprites for icons, while widely used and considered fairly good practice, still seem pretty hack-ish to me.  Icons can (arguably) help convey meaning in a document, and changing a background position to change that meaning doesn't seem like the best way of achieving this.  I am of course thinking like 10 years into the future here, as sprites are perfectly fine for lots of uses today, but as concurrent connections become less of a problem, I think lots of us will look back on sprites the same way we see spacer.gifs, which were a necessary evil at the time.

- Steve Dennis

> 
> Yes, this is using the <img> as a layout tool.  Specifically, you're
> using the <img> to avoid specifying "width" and "height" in CSS, and
> to enable further layout hacks with sprites using
> background-positioning.
> 
> ~TJ