Data URI [CSS] Sprites 1.1 - Automation of the process of assembling css sprites

Many professional web developers are familiar with website optimization techniques. One way to optimize is to use CSS sprites . The same developers know what difficulties exist with the formation, assembly, and reassembly of standard sprites. In the internet you can find tools to automate this process. When using standard sprites, fully automating the assembly for all cases is problematic, due to the specifics of background in css. Sometimes the stumbling block is the repeat property of the background image.

Data: CSS URI

There is an alternative way to generate CSS sprites, based on the data: uri scheme . This approach is interesting in that the number of calls to the server is minimized, + the most important thing is that you can completely automate the process of assembling and regenerating sprites. To fully automate the process of optimizing the operation of sites and assembling css sprites based on data: uri schemes, a special library was developed. Based on the created library, the Duris.ru site is deployed . Those who have not heard about this development before can read the previous article on this topic.

Update version 1.1

Now about the main thing. The sprite generation tool has been updated and got excited about additional features:

• processing media in link, style - now css styles are collected depending on media, generation occurs only for media = null || all || screen
• improved import processing
• comment conditional for IE is correctly processed
• now sprites work for IE8, regardless of the mode of operation (for different X-UA-Compatible)
• fixed a number of errors with the sequence of rules in css styles
• Added the ability to process JavaScript, namely, glue it into one file and apply compression
• all known bugs fixed
• Added the ability to work with the local file system (for integration into your projects)

The specified data: uri sprite generation tool is integrated into one of the major projects, of course I can’t show which at the moment, but the result of the integration is more than just pleasing. Finally, the torment with the sprites is over.

Future

With the advent of support in IE8 data: uri schemes, the developed approach becomes quite promising, now all modern browsers support such sprites. For complete happiness, it remains for the Opera browser to increase the size of the supported data: uri scheme (while Opera has a limit of ~ 4kb).

You can get acquainted in detail with the principles of generating and connecting data: uri css sprites in the FAQ section . If you have any questions or suggestions on the site or the algorithm as a whole, you can leave your wishes on our site in the feedback widget, or just write in the comments.

Finally, a great selection of tools for generating CSS sprites www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Use on health.

UPD : Site artlebedev.ru , to which duris.ru is configured by default "in the fog" , so to evaluate the work, insert your own or some other working sites at the moment.