Re: [css3-background] CSS Image Replacement

On Thu, Jun 4, 2009 at 1:03 PM, Anton Prowse <prowse@moonhenge.net> wrote:
> Tab Atkins Jr. wrote:
>> Keep in mind, though, that many times image-replacement isn't actually
>> necessary.  Just using an <img> with @alt does what you want while
>> retaining semantics and accessibility.
>
> This is true for what we perceive as practical purposes on the current web;
> but as David Woolley so rightly stated only just today,[1] whether an image
> is background or foreground should be a fundamental part of the information
> design.  An H1 consisting of a foreground image with @alt is not the same as
> an H1 consisting of text.
>
> That said, I'd struggle to muster much energy to deter people from using the
> former technique in most situations.
>
> [1] http://lists.w3.org/Archives/Public/www-style/2009Jun/0054.html

You won't find me disagreeing.  ^_^  Indeed, I love being able to just
put text in my own markup, add a fancy background and some
positioning, and create something which is simultaneously trivial to
edit, pretty, and accessible.  But when you have some really
fancy-pants text compositing with your logo image, you can't go far
wrong with just creating an image for it.  I think the "content"
property is the way to go here in the long run, but for now I just
like reminding people that fancy techniques are often less necessary
than one might think.

Of course, if one wants to have a hover effect in the picture, then
you're a bit screwed.  You'll have to use a text-replacement technique
for that, or javascript.  I'm still not certain which I like better.
I'll be happier, though, when I can just do:

<h1 #logo>Welcome to BigCorp!</h1>
<style>
#logo {
  content: url( "header.png" ), contents;
}

#logo:hover {
  content: url( "header-hover.png" ), url( "header.png" ), contents;
}
</style>

~TJ

Received on Thursday, 4 June 2009 22:12:45 UTC