Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
On Wed, 28 Apr 2010, Ingo Chao wrote: http://dev.w3.org/html5/spec/Overview.html#the-img-element The img must not be used as a layout tool. 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)? I do not understand the use case you descrbe. On Wed, 28 Apr 2010, Ashley Sheridan wrote: If an image is transparent, it has no display value other than to reserve an area of space, which goes back to the original point that images should not be used for layout. Right. If you're using a background image then that shouldn't need to convey any meaning to the viewer, it should only be for presentation purposes. The meaning of the content should remain the same if the background image is displayed or turned off regardless. You should consider re-structuring your page so that the presentation is separate from the content. Indeed. On Wed, 28 Apr 2010, Giorgio Maone wrote: I believe the spec is trying to stigmatize old-times spacer images used to layout other HTML elements, like img src=spacer.gif width=100 height=1 which are overly ugly and meaningless now that there's nothing you can't layout by CSS. Amongst other things, yes. On Wed, 28 Apr 2010, Ashley Sheridan wrote: But still, using a transparent image with some alt text to convey information about a background image is just as bad. It's breaking the relationship between content and the meaning of that content. A background image should be just that, and shouldn't have any impact on the meaning of information. Likewise, colour shouldn't be relied on to convey information, as there are cases where colours can't be displayed or aren't transferred if the information is grabbed as an excerpt to be used elsewhere. Right. On Wed, 28 Apr 2010, Steve Dennis wrote: On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote: On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao i4c...@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. A rather odd sense. :-) 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. Using CSS to display content is a misuse of the technology, certainly. On Wed, 28 Apr 2010, Tab Atkins Jr. wrote: Don't overthink it. It's a very simple rule. ^_^ Having an img *interact* in the layout is both fine and obviously necessary. The restriction is to prevent someone from using an img element *solely* for layout purposes. Right. (No, wait. I mean, Indeed.) -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
On Wed, 2010-04-28 at 13:31 +0200, Ingo Chao wrote: http://dev.w3.org/html5/spec/Overview.html#the-img-element The img must not be used as a layout tool. 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)? Thanks. If an image is transparent, it has no display value other than to reserve an area of space, which goes back to the original point that images should not be used for layout. If you're using a background image then that shouldn't need to convey any meaning to the viewer, it should only be for presentation purposes. The meaning of the content should remain the same if the background image is displayed or turned off regardless. You should consider re-structuring your page so that the presentation is separate from the content. Thanks, Ash http://www.ashleysheridan.co.uk
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
I believe the spec is trying to stigmatize old-times spacer images used to layout other HTML elements, like img src=spacer.gif width=100 height=1 which are overly ugly and meaningless now that there's nothing you can't layout by CSS. -- G Ingo Chao wrote, On 28/04/2010 13.31: http://dev.w3.org/html5/spec/Overview.html#the-img-element The img must not be used as a layout tool. 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)? Thanks.
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
On Wed, 2010-04-28 at 13:41 +0200, Giorgio Maone wrote: I believe the spec is trying to stigmatize old-times spacer images used to layout other HTML elements, like img src=spacer.gif width=100 height=1 which are overly ugly and meaningless now that there's nothing you can't layout by CSS. -- G Ingo Chao wrote, On 28/04/2010 13.31: http://dev.w3.org/html5/spec/Overview.html#the-img-element The img must not be used as a layout tool. 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)? Thanks. But still, using a transparent image with some alt text to convey information about a background image is just as bad. It's breaking the relationship between content and the meaning of that content. A background image should be just that, and shouldn't have any impact on the meaning of information. Likewise, colour shouldn't be relied on to convey information, as there are cases where colours can't be displayed or aren't transferred if the information is grabbed as an excerpt to be used elsewhere. Thanks, Ash http://www.ashleysheridan.co.uk
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote: On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao i4c...@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
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
On Wed, Apr 28, 2010 at 1:04 PM, Steve Dennis ad...@subcide.com wrote: On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote: On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao i4c...@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. Don't overthink it. It's a very simple rule. ^_^ Having an img *interact* in the layout is both fine and obviously necessary. The restriction is to prevent someone from using an img element *solely* for layout purposes. ~TJ
Re: [whatwg] img as a layout tool to describe the displayed region of a CSS background-image
2010/4/28 Tab Atkins Jr. jackalm...@gmail.com: On Wed, Apr 28, 2010 at 1:04 PM, Steve Dennis ad...@subcide.com wrote: On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote: On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao i4c...@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. Don't overthink it. It's a very simple rule. ^_^ Having an img *interact* in the layout is both fine and obviously necessary. The restriction is to prevent someone from using an img element *solely* for layout purposes. ~TJ I agree that using an img that spans up an area to show a fragment of a background-image is a hack, non-conforming with HTML5. Thanks for the answers. We are combining a hundred icons into one sprite for performance reasons, and it is not that easy to mask out portions of a background-image with pure CSS in every case. Tricky, or hackish. Maybe CSS3 will allow fragment indentifiers to slice a background image; a less hackish solution for the usage of sprites. http://www.w3.org/TR/css3-images/#url Thanks, Ingo -- Ingo Chao http://www.satzansatz.de/
