CSS Sprites 2.0

After publishing a series of articles on the use , uselessness, and even automation of CSS Sprites , after a multi-day analysis of the current state of affairs, we managed to collect some of the most frequently encountered problems using CSS Sprites and methods for solving them. The following is also considered an applied method for automating the creation of CSS Sprites for an arbitrary project.

Technology Overview

CSS Sprites, in fact, is just an extended use of the background technology laid down in the CSS1 specification. All that progressive humanity has thought of over the years is the multiple background of the elements (as it will be compatible with the concept of CSS Sprites, we still have to check it out). The main properties that we use to set the background image.

• background-image is the main workhorse. It is for her future in the form of data:URI , which in the end will win CSS Sprites. But it will not happen soon.
• background-repeat is the second equally important component when using a background image. After all, setting no-repeat for this property, we deliberately emphasize that it is acceptable to use CSS Sprites to “glue” images (the default is repeat ).
• background-position is a “magic wand” for CSS Sprites that allows you to hide or show certain parts of the background image.

In addition to the stated properties, there are also a few (for example, background-color ), but they have a mediocre relationship to the sprites.

So, we can set the source of the image, the rule for its repetition and its initial position. Like enough?
')

Applied subtleties

Naturally, considering the set of possible effects when using background images, the following should be noted:

• An object completely filled with a background image. Here, the main role is played by the final dimensions of the object (of course, if the image is not repeated on all axes at once: in this case, using it for CSS Sprites is not possible). Quite often, the background under the object may change depending on any conditions (deliberate emphasis or actions by users), but this is not essential for the logic of creating CSS Sprites. Here you can select three subcases corresponding to a non-repeating background and repeating along the X or Y axis.
• The background image does not fill the entire volume provided to it (either the object dimensions are not specified, or are specified in relative - em,% - units). Here we need to either attach a repeating image "to the end" of the sprite, so that on the part of the object that remains without the background image, no defects appear. Or (in the case of no-repeat ) arrange the image "ladder" (this is especially true in the case of the background for the elements of the list). It should be noted that, depending on the background-position value, CSS Sprites here can be both possible and not possible in principle (for example, in the case of 100% 100% ). Here you can select a few cases that differ in background-position , background-repeat and linear block sizes.
• The image is animated . As further we will discuss the use of PNG and JPEG images for CSS Sprites, the animated images will have to be immediately thrown out of consideration: support for animated PNG images is now at the most rudimentary level in browsers.

All the examples described can be more clearly structured into the following groups.

1. background-repeat: no-repeat , background-position: , and linear absolute dimensions are given.
2. background-repeat: no-repeat , background-position: , linear dimensions are not specified or are given in relative units.
3. background-repeat: repeat-x , the height of the element.
4. background-repeat: repeat-x , the element height is not set.
5. background-repeat: repeat-y , given the width of the element.
6. background-repeat: repeat-y , the width of the element is not set.
7. background-repeat: no-repeat , background-position: 100% 0 , the height of the element is set.
8. background-repeat: no-repeat , background-position: 0 100% , the element width is set.
9. background-repeat: no-repeat , background-position: 100% 0 , element height is not set.
10. background-repeat: no-repeat , background-position: 0 100% , element width is not set.
11. background-repeat: repeat .
12. background-repeat: repeat-x or background-repeat: repeat-y , the element dimensions are indicated in relative units.
13. background-repeat: no-repeat , background-position: .
14. Image is an animated GIF file.

Looking at this specification it becomes, in general, clear in which direction to move to automate the creation of CSS Sprites.

Practical solution

Next, we will discuss the tool Auto Sprites , which was the basis for the development of Web Optimizer . After the above conclusions, purely technical questions remained: how to encode all this.

To begin with, we need to parse the entire tree of CSS rules, then select the ones related to the background images and the linear dimensions of the objects, then take the required actions on them. Ideal for this task is CSS Tidy , which has been remarkably tried, tested and improved after a couple of small errors.

Then the most interesting part begins: how can we “glue” the above described groups? To do this, use the following algorithm:

1. repeat-x images (group 3) are merged all together vertically. Along the way, the width of background images is corrected (reduced to a common denominator). At the very beginning of such a file no-repeat images are added that fit in width (group 1). Next, the file itself contains 1 image from group 4 (more than 1 will not go anywhere anyway).
2. Absolutely similar actions with repeat-y .
3. Next, the images from group 7 are combined vertically ( 0 100% means that the background should be pressed to the right edge of the element, respectively, the entire sprite will be “pressed” to its right edge).
4. Similarly with group 8, we press everything to the bottom. Naturally, for all groups, we take into account the initial background-position .
5. We calculate the positioning for the images of group 1 (for this, it is also suitable to simply search through the images sorted by area: we are preparing a matrix into which we are trying to “fit” the next image, if not, then we will increase the matrix).
6. We build the "ladder" of the images of the second group. It is better to build a ladder at the bottom of an already created sprite from the previous paragraph: then it is easy to find the minimum size of the “hole” between two groups of images in order to move the “ladder” up (and then, possibly to the left). Of course, the search for the most optimal location is a difficult task. But it can be solved in a rather crude approximation, which is described above.
7. The image from point 3 is attached to the upper right corner of our complex image (the result of points 5 and 6). Since each such image has an admissible height and all of them are outside the “working” zone of the other no-repeat images, no rudiments will arise.
8. Similarly, we proceed with the image from point 4 - we place it in the lower left corner of our sprite.
9. At the exit we get 3 sprites with all possible cases. On average, the size of such sprites will only slightly exceed (if at all) similar “manual” counterparts (including through the use of PNG). Naturally, you can automatically skip through pngcrush or jpegtran . It is also necessary to foresee the form in which full-color images will be created: JPEG or PNG (the latter are larger in size, but guarantee no loss of quality).

All described steps have already been applied in Web Optimizer (a web application for automating client optimization), one of the final versions of the algorithm works for the Auto Sprites tool, and the source text can be found in SVN .

This logic can be applied at any stage of web development (both during the initial creation of the design and during the post-release optimization of the site). The library for the automatic creation of sprites is distributed under the MIT license (as I was rightly pointed out to CodeCamp , it allows you to use the product anywhere and in any way, but a link to the source must be present, even if not the entire library is used, but only its essential part).

Living examples

All pictures are obtained on the actual configuration of the well-known CMS.





PS News about Web Optimizer will be published now on Twitter .