Flutterby™! : CSS foolishness 2003-07-25 16:20:48.167229+00

CSS foolishness

2003-07-25 16:20:48.167229+00 by Dan Lyke 7 comments

So once again I have the web design bug, and I was wondering: Can any of you CSS fans out there give me a reason why replacing text with a background image and a span {display:none;} is better than an "alt" attribute on the "img" tag? In every situation in every browser I use the "alt" solution is better, but maybe there's some bizarre screen reader or something that works better the other way?

#Comment Re: [Entry #6374] CSS foolishness made: 2003-07-25 20:31:03.929725+00 by: Larry Burton

Dan, what this will allow you to do is have the best of both worlds. This is the same as having a plain text webpage for the semantics but if you are concerned about the visual it also gives you full control of that in the browsers that support CSS. You don't use this technique to replace graphics that convey data, you only use it to make your text pretty for the browsers but other applications have the full semantic context of the text. The "alt" solution puts the text in a semantic context of a visual image and seperates it from the context of the surrounding text.

#Comment Re: CSS foolishness made: 2003-07-25 21:48:49.674912+00 by: Dan Lyke

The problem is that if I don't get the images or I'm browsing with image loading turned off, the image-in-the-background with display:none; doesn't give me any text, whereas the "alt" solution still allows the page to be readable.

So the only place I can see this being advantageous is in browsers which are completely ignoring CSS, or in speech browsers. In that case, I'd expect that the "span" tag would be breaking up the context anyway, right?

#Comment Re: [Entry #6374] Re: CSS foolishness made: 2003-07-25 22:26:03.614506+00 by: Larry Burton

And in browsers that are CSS compliant *and* have images turned on. The "span" and "div" tags have no semantic meaning so they don't break up the context. So the only people that I can see being disadvantaged by this are folks using CSS compliant browsers but keep the images turned off. What kind of ludite would do that? :-) If you are going to do that, use Lynx.

#Comment Re: [Entry #6374] Re: CSS foolishness made: 2003-07-25 22:31:03.254557+00 by: Dan Lyke

I'd be surprised if a text-to-speech engine rendered "<span style="font-style:italic;">im</span>possible" the same as "impossible". Or i it does, then I can come up with counter-examples that it'll do wrong.

Okay, so you're saying that the "img" with the "alt" tag is the right solution then. :-> Sold me on it.

#Comment Re: [Entry #6374] Re: CSS foolishness made: 2003-07-25 22:51:03.925434+00 by: Larry Burton

I won't begin to guess what any text-to-speech engine might actually do, only that the spec says that it is to ignore it unless a stylesheet that it is directed to load has defined the class or ID assigned to that "span" or "div" to work differently.

> So the only people that I can see being disadvantaged by this are > folks using CSS compliant browsers but keep the images turned > off. What kind of ludite would do that? :-) > > Okay, so you're saying that the "img" with the "alt" tag is the right > solution then. :-> Sold me on it. :-)

Actually, I'm saying that either way appears to be wrong to me. The CSS method described is an interesting trick but I wouldn't use it in the stuff I do. It seems that it would entail too much work maintaining stuff like that over the long haul. Using an image for text, even with the alt tag, is just plain wrong.

#Comment Re: CSS foolishness made: 2003-07-26 01:53:12.154642+00 by: mkelley [edit history]

Dan, Are you talking about having something like a banner image, that really would be the same
thing as the first text on the page...usually rendered with h1?here is the css you could use,
;
.hiddentext
{
background-image:url(whatever.ooo);
}
.hiddentext h1
{
display:none;
}
and rendered into the code as:

<div class="hiddentext"><h1>this text is hidden</h1><img src="" /></div>
You would still have the text visible to bots and the disabled and maintain the style of your page. I know Dan of Simplebits, who just finished Fast Company and INC's new sites uses this technique a lot. I haven't tried it on the live Erlanger site, but I've used it for my weblog and a couple of test pages.

#Comment Re: CSS foolishness made: 2003-07-26 18:06:01.347391+00 by: meuon

Every time I get started using CSS.. I see all the browsers incompats.. and I give up beyond setting some basic default fonts/look/feel options, and even those are conservative. I tend to live in the very very basic world of web design. It's boring, it's plain, and it sure works. Yet, even my latest attempt at web design works on the worst platforms like WebTV, older AOL Browsers...All I can say is: Good Luck!