Image sprites use cases

Hello,

After reading recent discussions related to image sprites I would like
to offer some typical usage cases, which, I am afraid, are not
addressed by the current proposals. These usage cases are very common
for the web components/web applications developers but probably
different from what you will find on a 'normal' website.

Let's look at the typical custom button or checkbox (see the composite
image below) -

http://www.activewidgets.com/runtime/2.5/styles/mono/checkbox.png

The checkbox image should reflect the value (checked, unchecked,
mixed) and the control state (normal, hover, pressed, disabled).  That
is 12 images and I would rather not have them in separate files, and
use image sprites instead. Now, the key here is that I should be able
to set the control value (checked, unchecked, mixed) independently
from the control state (normal, hover, pressed, disabled). This can be
achieved by placing the corresponding images across x and y axes and
specifying offsets in different classes using background-position-x,
background-position-y attributes:

..checked {background-position-x: 0}
..unchecked {background-position-x: -25px}
..mixed {background-position-x: -50px}

..normal {background-position-y: 0}
..hover {background-position-y: -25px}
..pressed {background-position-y: -50px}
..disabled {background-position-y: -75px}

..checkbox {background-image: url(checkbox.png)}
..radio {background-image: url(radio.png)}

Notice also the third axis (checkbox/radio) which is addressed by
using different image files. Then I can style custom element by using
three classes together -

<div class="checkbox checked disabled">Checkbox1</div>

The similar approach works for custom buttons, where the image would
contain several button parts (corners, borders, fill) each in several
states (normal, hover, pressed, disabled, selected etc.).

One more important usage case - toolbar icons. Imagine that I want
each toolbar icon to be available in different sizes (small, normal,
large) and also implement several states (normal, disabled) -

http://www.activewidgets.com/runtime/2.5/styles/mono/icons.png

In this case one css class should select the image, another one icon
size and another one icon state.

So my main point is - any image sprite solution should allow
specifying sprite top, sprite left and image url independently in
separate classes. This is the key requirement and I think this is why
people repeatedly ask for the implementation of background-position-x,
background-position-y attributes.

I should probably emphasize that this is kind of 'component developer'
view, not the typical website designer view. Hope that it may help
anyway.

-- 
Alex Kaminski
http://www.activewidgets.com

Received on Friday, 28 August 2009 09:11:28 UTC