CSS and XHTML Example: CSS Sprites (CSS Sliding Doors, etc)

One of the most useful techniques has come to be known as ’CSS Sprites’; this is basically a unique way of working with web images in order that the storage and transfer are minimised as much as possible. The main concept is that we can combine several images into one ‘master’ image file and then use CSS to reference the required section.

Those of you that have worked with animation, or have used API's such as MS DirectX, will know about this techique, often called ZBuffering or Double Buffering, in order to remove 'flicker' or to increase the anmiation FPS (frames per second).

The CSS background-position property is used to locate the exact coordinates of the master image. For example, if we have a master where our required section is 0 pixels to the left and 100 pixels down the page, we would first apply the master file as the element’s background in the CSS and then use background-position: 0px -100px to locate the exact portion of the file. Please remember that all positive values become negative.

OpenSource Example: Example code for CSS Sprites

For example, if we have a <div> element with the id ‘test’:       

The height and width values should be the size of the graphical element (in most cases). Imagine all these rules as creating a ‘window’ onto part of the master file. Normally each master image would contain related graphical elements such as buttons or rounded corners and so on.

This technique has several benefits: Firstly, the web page will load more quickly as there is only one call to the server for each set of images, and the total size per master file is smaller than if they were separate images. Secondly, it makes updating the site far easier as only one file has to be modified and uploaded each time the graphics need to be changed. Thirdly, certain other CSS techniques rely on preloading images that are at first hidden to the user (for example CSS-only Rollovers).

OpenSource Example: Overall CSS approach for CSS Sprites

To write modern, accessible CSS it is necessary to start by thinking as much as possible about content first rather than design. The preliminary aim is to write a semantic XHTML page where elements such as <p>, <ul> and especially <table> are used only to mark-up content that is, respectively, a paragraph, a list, and a data table.

After this is done, we use CSS to modify these elements into a design. This separation of presentation and content allows for clear, search-engine friendly pages that are easy to update.

When it comes to adding design elements to a page, the first question should be: ‘how can I utilise what is already there?’, rather than ‘what do I need to add?’. Many CSS techniques such as ‘CSS Sliding Doors’ and ‘The One True Layout’ have been developed that allow freedom of design within the apparent constraints of semantic mark-up.

To sum things up, there is no need to make multiple calls to the server, once for each image; instead the CSS sprite technique should be used to access images via their position into the main image, thereby only making one call to the sever per page.