CODEWITHSUNDEEP
csscss-spritessprite
Pharao2k
Pharao2k

Reputation: 695

How to implement padding-free sprites in css?

While learning how to use css sprites, I quickly noticed and/or read that it is best to have 1 or 2 empty pixel space between all images inside a sprite to avoid other images bleeding through when the user zooms in or out.

While looking at the apple homepage, I noticed that they don't do this, without suffering from bleeding images. I did not find any reason in their css that would explain this.

How is that possible? ;)

Upvotes: 0

Views: 241

Answers (2)

Pharao2k
Pharao2k

Reputation: 695

It seems like it is indeed necessary, because when the browser deems it necessary to scale the cropped areas (for example, if one zooms in or out or if an animation temporarily changes the size) the browser will use anti aliasing to smoothen the scaled image. Since anti aliasing uses surrounding pixels, the most outer pixels of a crop will be influenced by those that lie outside of the cropped area. The transparent padding ensures that this doesn't happen since the transparent padding wouldn't affect the resulting color. Without padding, the cropped pictures would affect each other.

This can easily be tested by filling the (theoretically invisible) padding area with a color like magenta and then zoom in or out in one's page, all crops will have a bit of magenta on their edges.

Upvotes: 0

Jason
Jason

Reputation: 1784

There's no need for padding between sprites if you know exactly what size the containing element is going to be. The problem comes from when something inside the element causes it to grow. For example, if the text inside that element has to use a fall-back font it may end up causing the container to grow.

The reason padding between sprites is recommended is that there's no real downside to it. It doesn't increase the file size by any meaningful amount and it gives you a bit of a safety margin when a browser does something slightly different than you expect.

Upvotes: 1

Related Questions