Published in CSS on Tuesday, June 22nd, 2004
Combining the ideas behind Dave Shea's CSS Sprites with Douglas Bowman's Sliding Doors.
A while back Douglas Bowman wowed Alistapart readers with his excellent article Sliding Doors of CSS, describing a new and revolutionary way to build a tabbed menu interface using CSS. Shortly thereafter, Dave Shea came along with CSS Sprites: Image Slicing’s Kiss of Death. In the article, Dave outlines a method of using a 'master image' made up of smaller images that are used for presentation within a site, and displaying these images as needed by positioning them via the 'background-position' property.
Being a fan of making files smaller and sites faster, I decided to see if the two methods could be mixed, and sure enough, they can.
Notes: 1. The remainder of this post will assume that you have a good understanding of the two articles outlined above, especially the Sliding Doors article. 2. This has been tested in Firefox 0.9, Opera 7.50 and the Win Triplets on WinXP.
Before we get into this, here's the final product with the CSS in the source.
The Sliding Door method requires three images, one for each side of the door, and one for the background of the <ul> that provides the bottom line for the inactive tabs.
So the first thing that needs to be done is to determine how to lay out the master image so as to make it possible to use the images as needed. As it turns out, the only requirement in this case is that the underline used in the <ul> element is at the bottom of the master image (see the dark blue line here at the bottom of the master image that we will be using). This is so that we can set the vertical position of that background image to 'bottom', ensuring that that line will stay put at the bottom of the <ul> if the tabs are resized.
The tabs themselves need only be wide enough for your application. Notice in the master image that there is some vertical space left between the blue horizontal line at the bottom and the tabs; that is necessary as that empty blue space above the line acts as the background for the tabs.
Now it's time to put our images into our css. For this, have a look at the demo page and view source to see the CSS. If you were to compare this CSS with the original article, you would see that the changes are minimal.
First thing, have look at
#nav. Notice there that the image is repeated in the x direction, and positioned to the left and the bottom. By doing this, we sit that dark blue line at the bottom of the #nav container. This line acts as the divider between the tabs and our content.
Now have a look at
#nav a, #nav strong, #nav span. There you can see that the background image is set to
no-repeat 100% 0px. What that is doing is setting up the right door by telling the image to sit it's right edge against the right edge of it's container.
The same is done for the left door in the
#nav li element. There the left door is set up by having the image sit it's left edge against the left edge of it's container.
This next part we do the same as above, but we set the top of the image to -41 pixels (the top of the white tab in the image) setting
0 -41px for the left door and
100% -41px for the right door.
Beleive or not, that is it!
Good question. Though the images in the article are different from the ones used here, it's worth mentioning that those images weighed in at 3815 bytes while the single image used here weighed in at 1887 bytes.
More importantly though, the number of requests is lower using the single image and wasted paket space is reduced. The 'left' images from the article and the underline image are each under 400 bytes. With packets running at 1400 bytes, that's roughly 1k of wasted space per image that is eliminated by combining images (see more about combining images and packet sizes in CSS Sprites, Background Images and Website Optimization).
This is a good example of combining images to help speed up your website, but there's no need to stop here. Other images used in the site could be combined here as well, provided the file compresses decently, so be sure and keep your eyes open for other candidates for your master image.
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..