Data: CSS Sprites URI - a modern approach to generating CSS sprites

The agony with the standard approach of using CSS sprites, namely the difficulty of upgrading and in some cases the complexity of the optimal layout, led us to look for an alternative way to optimize the loading of images. Once again, reading a habr article, I came across an interesting approach to implementing sprites using data: URI. During the discussions and conclusions, the strengths and weaknesses of this approach were identified. One of the major shortcomings of the new approach is the complexity of building the final CSS. However, when using data: URI, the ability to automate the process takes place. Accordingly, it was decided to create software for the automatic assembly of data: URI sprites.

Data: CSS Sprites URI

A new approach to generating CSS sprites based on data: URI decided to call the Data URI Sprites - DURIS.ru . The name is a bit unusual - but it is unique and well remembered. As it turned out later, a painter named Duris lived long ago.

What is it

First of all, it is a fully automatic analysis and assembly of CSS sprites based on data: URI.
Some characteristics of the work of DURIS:
1) loading and parsing of all internal (style) and external (link) styles
2) highlighting the background-image in a separate external style
3) loading and encoding in base64 of all images found in styles
4) optimization of rules with repeating background-image in styles
5) removal of CSS rules with images missing on the server (eliminates unnecessary unnecessary requests)
6) special data connection: URI sprites for all browsers and separately for IE6, IE7 Vista (more details in the FAQ
7) other.
')

“Why do I need this?”

Modern approach to creating CSS sprites
- allows you to safely make adjustments to images and layout;
- allows you to minimize the number of requests to the server to obtain information that relates to the design of the page;
- allows you to use fully semantic layout;
- eliminates scaling problems for background images;
- combines images of different types and repetition axes.
- everything is created automatically;

IE and others

During the development of the implementation of the data: URI sprites, the most frequently encountered variants of CSS rules were analyzed. Also, the favorite IE browser was taken into account. Who does not know IE does not support up to version 8 data: URI technology. However, for him there is an alternative implementation of sprites - based on MHTML-technology. That is, in other words, at the moment we have a full range of solutions for all modern browsers (99% percent of all browsers used). But as always, Microsoft flings up a fly in the ointment. During testing, an MHTML technology bug was found in Vista IE7 - namely, the IE7 browser in Vista when caching the MHTML file refuses to display images (due to poorly documented security issues when using MHTML in Vista IE7). If you make the file not cacheable, then everything works as it should work, but in the case of caching, background images are not displayed. In general, Microsoft did make the “chain break . ” In other words, for the current moment for the IE7 browser in the Vista operating system, the DURIS implementation does not work exactly as it was originally intended. In the connection of styles, the algorithm of checking the IE7 Vista is implemented and, if so, the background pictures are connected in a standard way. Statistics show that users who use IE7 under Vista are about 5% percent. In any case, we already know that in IE8 the Data: URI technology will be implemented normally. Although, to be honest, there are big doubts that the developers of IE will again program something wrong.

The main advantages

Let us highlight the two most important advantages of using the modern approach of generating CSS sprites:
1) all background images rendered in an additional style file are uploaded in one connection to the server - this circumstance allows reducing the load on the server and speeding up the display of background images.
2) the assembly of the final CSS file of sprites is done automatically - this allows you to smoothly upgrade images.

What we have

To date, we have a stable beta version of DURIS, which works out all the CSS files that are fed to it. Specific rules such as filter: AlphaImageLoader,! Important are also being tested. I am sure that there are still unrecorded moments / cases which, I hope, with the help of a respected reader community, we will jointly determine. All that is required is to check your / any website and see what happens as a result. Determine if there are processing errors? Does the result satisfy? Or maybe there is an idea to improve the methodology / algorithm?

What will we have

The DURIS kernel is developed in Java and is self-contained (i.e. independent of the site). It is assumed that after receiving the release candidate, the kernel source code will be made publicly available under an OpenSource license. The kernel works from the command line in the same way that YUICompressor works. This will allow you to conveniently integrate the automatic generation of CSS sprites into your projects. Those who program in Java, if they wish, will be able to directly call DURIS kernel methods.

Total

The developed method / algorithm for automatic generation of CSS sprites based on data: URI is unique in its kind and has no world analogues. This proves once again that the Slavic people also know how to invent innovations, and not just good / bad bicycles.
The site has a FAQ in which it’s detailed how and what works. If something is not clearly described - ask questions in the comments.

Starring Ruslan Sinitsky, Nikolay Maciyevsky ( sunnybear )