Home > Browsers, Web Code, Work > Using Sprites with XUL

Using Sprites with XUL

January 6th, 2010

LCD Clock Image Sprite

CSS Sprites are a growing trend, and they can save a lot of time in certain situations. The term sprite when used for video games is slightly different, but in the context of Web graphics, the term refers to a single image file that is cropped onscreen and used for different images that are seen on a page. One sprite, for example, may contain the mouseoff and mouseover states for all tabs and buttons on a site. With CSS, the correct tab or button can be displayed by simply cropping the desired section of the larger image. Amazon is doing it, Apple.com is doing it, YouTube.com, and others are starting to take the hint. Last night I sat down and tried to apply this technique to a Firefox XUL application.

Below is an example of an Amazon.com sprite (note that it is a single image):

Amazon.com CSS Sprite

Using CSS sprites with Firefox’s XUL display language, however, is something that I had never seen. I have a Firefox add-on called FlipClock that uses 28 images for each clock style, and there are around a dozen clock styles. Using a single sprite per clock style, would reduce this down to one image per style, and make the creation of new clock styles much, much easier.

After a few false starts, I ended up using a technique from David Walsh’s blog on how to do this in HTML. I started with a <vbox> tag, gave it height, width and style attributes, and styled it with background-image, and background-position. The result is below:

<vbox id="clock-1-top" width="12" height="8" style="background-image:url(digits.png);background-position:-12px 0px;"/>

You can see the whole XUL file here:

And the image file here.

CSS Sprites aren’t always the best or easiest solution, but for certain XUL applications, they may save a lot of time in the long run.

Browsers, Web Code, Work

  1. No comments yet.
  1. No trackbacks yet.