W3C home > Mailing lists > Public > www-style@w3.org > June 2009

Re: [css3-background] CSS Image Replacement

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 4 Jun 2009 11:30:55 -0500
Message-ID: <dd0fbad0906040930s14a8e924i46eca8e03f1ae26a@mail.gmail.com>
To: Alexis Deveria <adeveria@gmail.com>
Cc: www-style@w3.org
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.  In the 9 solutions link you
provide, they basically did this with solution #4, except then they
mixed in Phark image replacement for some reason.  I'm really not sure
what that's supposed to gain you.  In fact, all it seems to do is
cause problems, as it causes the technique to fail in the
CSS-on/Images-off case, and may result in two image requests.  Take
out the Phark, and you've got a solution which passes all four
CSS/Image possibilities, you have no additional markup, and no
additional concerns.

~TJ
Received on Thursday, 4 June 2009 16:31:39 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:18 GMT