Data URI [CSS] Sprites 1.1 - Automate 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 to fully automate the assembly for all cases is problematic, because of the specific background in css. Sometimes the stumbling block is the repeat property of the background image.

Data: CSS URI

There is an alternative to generating CSS sprites based on the data: uri scheme . This approach is interesting in that the number of calls to the server is minimized as much as possible, + the most important thing is that you can fully automate the process of assembling and regenerating sprites. To fully automate the process of optimizing sites and assembling css sprites based on the data: uri scheme, a special library has been developed. On the basis of the created library, the site Duris.ru is deployed . Those who have not previously heard about this development can read the previous article on this topic.

Update version 1.1

Now about the main thing. The tool for generating sprites has been updated and has got a lot of 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
• conditional comments (comment conditional) for IE are processed correctly
• now sprites work for IE8, regardless of the mode of operation (with different X-UA-Compatible)
• fixed a number of errors with the sequence of formation of rules in css styles
• added the ability to handle javascript, namely merge into one file and apply compression
• fixed all known bugs
• added ability to work with a local file system (for integration into your projects)

The specified generation tool for data: uri sprites is integrated into one of the serious 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 sprites is over.
')

Future

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

You can learn more about the principles of generating and connecting data: uri css sprites in the FAQ section. If you have any questions or suggestions on the work of 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 : The site artlebedev.ru , which is configured to default duris.ru "in the fog" , respectively, but to evaluate the work, insert your own or some other working at the moment sites.