Re: [css3-background] CSS Image Replacement

Tab Atkins Jr. wrote:
> On Thu, Jun 4, 2009 at 10:53 AM, Alexis Deveria <adeveria@gmail.com> wrote:
>> On Thu, Jun 4, 2009 at 11:22 AM, fantasai <fantasai.lists@inkedblade.net> wrote:
>>> Alexis Deveria wrote:
>>>> Any designers on this list are probably familiar with the concept of
>>>> CSS image replacement. The use case is that people wish to replace
>>>> text (often a logo or a header) with an image using CSS. There are a
>>>> variety of ways to achieve this currently [1], but all have certain
>>>> drawbacks that either hamper accessibility in some situations, or
>>>> require additional markup.
>>>>
>>>> Is anyone familiar with a solution to this problem that can be
>>>> achieved through some CSS3 module? (most likely in Backgrounds and
>>>> Borders [2]) Going through the current spec, I wasn't able to find
>>>> one.
>>> How about
>>>
>>> #header {
>>>  content: url(header.png), contents;
>>> }
>>>
>>> <h1 id="header">My Pretty Header</h1>
>> Ah, didn't realize was possible, cool! That does indeed solve the use
>> case in theory. However, without the positioning options the
>> background-image property offers, this solution does not allow for
>> sprites, which may be an issue for some authors. There may also be
>> other benefits of using background-image, so ideally it would still be
>> nice to be able to include them.
> 
> Note, though, that this really *is* just a theoretical solution - I
> don't believe anyone implements it yet.
> 
> 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

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Thursday, 4 June 2009 18:04:33 UTC