CSS Sprites Revisited

http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

by joeyespo • 14 years ago

21 9 14 years ago

coding.smashingmagazine.com

ecaron• 14 years ago

The comments in this post really demonstrate the widespread pain points that everyone has when dealing with CSS sprites, and the existence of 30+ solutions indicates that nobody has really figured out how to fix it yet.

The lack of attention to SVG stacks (http://simurai.com/post/20251013889/svg-stacks) is very curious to me - being a proponent of this method/movement seems analogous to being pro-PNG in the era of GIFs.

theootz• 14 years ago

That's glorious :o I've only recently begun messing around with SVGs, but it seems the more I use them, the more amazing they become.

That said, I really do wish there was better browser support for them. Having to embed them as objects instead of images, for example, is a tad bit lame :/ And then you're still left with anything before IE9 (I think?) unable to see them. On the mobile-end, the same goes with anything before Android 3... Or weird buggy behaviour when you're applying things like hover effects to parts of the image, etc...

It's definitely promising though

btipling2• 14 years ago

The ideal sprite system is one that is automated. A script that grabs all the images in a folder and makes a sprite, recording their position and name and then replacing the Less (or Sass) variable definition for each image with the stored value.

Doing this manually is insane and probably not worth it unless you're fielding requests like Facebook, Google or Amazon and every split second spent loading is lost money.

huggyface• 14 years ago

The ideal sprite system is one that is automated.

I wonder if the growth of SPDY undermines the entire foundation of using CSS sprites?

nekgrim• 14 years ago

Why edit the less file? Isn't this order

1. Compile LESS/SASS

2. Sprite Generation

3. Minification

easier to do ?

btipling2• 14 years ago

When would you replace the background image positions? Wouldn't it be easier to do that in one place than many? You don't have the sprite positions until you generated the sprite.

envex• 14 years ago

Compass will create your sprite sheet for you and give you all the classes you need to use them.

http://compass-style.org/help/tutorials/spriting/

smickie• 14 years ago

I love spritifying and existing site and watching the load times drop in usage reports.

Here's a great idea that I would like to see implemented concerning css sprites and the rails asset pipeline:

In your .erb.css file you could include each background image individually, when you reference it in the css you would flag it as "spritable". Then when assets:precompile is ran some magic piece of code would build a single sprite image from all your background images and fill in the background-position. Automating the whole process.

Like most things I don't have the time/skill to do with, but nice idea nonetheless.

manmal• 14 years ago

I use SpriteRight (Mac app) which even has some intelligence built-in (like how to align elements best), and exports CSS code as well. And it's dirt cheap. No reason to do it like it's 1999 when there's tools like that :)

CSS Sprites Revisited

Related Stories