HTML and CSS Reference
In-Depth Information
CSS Sprites Revisited
Niels Matthijs
I'm pretty confident that I won't surprise anyone here by saying that CSS
sprites have been around for quite a while now, rearing their somewhat
controversial heads in the Web development sphere as early as 2003.
Still, the CSS sprite hasn't truly found its way into the everyday toolkit of the
common Web developer. While the theory behind CSS sprites is easy
enough and its advantages are clear, they still prove to be too bothersome
to implement, especially when time is short and deadlines are looming.
Barriers exist to be breached, though, and we're not going to let a couple of
tiny bumps in the road spoil the greater perks of the CSS sprite.
If you want more background information on best practices and practical use
cases, definitely read “The Mystery of CSS Sprites: Techniques, Tools and
Resources.” If you're the defensive type, I would recommend “CSS Sprites:
Useful Technique, or Potential Nuisance?,” which discusses possible
caveats.
I won't take a stance on the validity of CSS sprites. The aim of this article is
to find out why people still find it di
!
cult to use CSS sprites. Also, we'll come
up with a couple of substantial improvements to current techniques. So, start
up Photoshop (or your CSS sprite tool of choice), put on your LESS and Sass
hats, and brush up your CSS pseudo-element skills, because we'll be mixing
and matching our way to easier CSS sprite implementation.
