HTML and CSS Reference
In-Depth Information
Time Spent Slicing a Design Will Increase
Think about how a simple 3-state image button sprite is created: The
di
"
erent states need to be placed next to one another, forming a single
image. In your Photoshop mockup (or other software), you don't have the
di
"
erent states adjacent to each other in that manner; they need to be sliced
and combined into a new separate image, outside of the basic website
mockup.
If any changes are required for any one of the image states, the entire image
needs to be recompiled and re-saved. Some developers may not have a
problem with this. Maybe they keep their button states separate from the
mockup in a raw original, making it easier to access them. But this
complicates things, and will never be as simple as slicing a single image and
exporting it.
For the minimal benefit of a few kilobytes and server requests saved (which
only occurs on initial page load), is the mega sprite method really a practical
solution for anything other than a 3-state button?
Time Spent Coding and Maintaining Will Increase
After an image is sliced and exported, the trouble doesn't end there. While
button sprites are simple to code into your CSS once you're accustomed to
the process, other kinds of sprites are not so simple.
A single button will usually be a
<ul>
element that has a set width. If the
sprites for the button are separate for each button, it's simple: The width and
height of the
<ul
>
will be the same as the width and height of the list item
and anchor, with the sprite aligned accordingly for each state. The position
of the sprite is easily calculated based on the height and/or width of each
button.
