NYCPHP Meetup

[John Campbell]

On Mon, Apr 14, 2008 at 9:43 PM, Andre Pitanga <andre at pitanga.org> wrote:
> This is so in depth. I hadn't seriously thought about css sprites yet.
>  I'm saving this for future reference.

CSS sprites are a pain in the ass to manage.  I'd recommend all of the
other options first.  If you do decide to use them, there are two
general strategies:

1) Yahoo - icon strategy:
<a href="/blah/" class="sprite abc" />
css:
a.sprite {
margin-left: 30px;
background:transparent url('sprite.png') no-repeat scroll top left;
}
a.abc {
background-position: -Ypx -Xpx
}

In this case there needs to be a huge amount of white space around each sprite.

2) Google - image replacement method:
<img src="blank.gif"  style="background:transparent url('sprite.png')
no-repeat scroll -Ypx -Xpx; width:25px; height:25px" />

With the Google method, the sprites images don't need any padding
around each image.

Regards,
John C.