CSS sprites: description, basic techniques and useful recommendations

The modern site should be fast, beautiful and effective both at the development stage and when working with the client. As a rule, every company that creates Internet resources seeks to have its own person, attract visitors by its design, style, reliability, speed and other qualities.

Useful properties of sprites

CSS sprites allow you to improve both the quality characteristics of the site, and the image of the company. In essence, this is not a very complex developer tool, but it really speeds up the process of developing resources, and the speed of their work.

Among other things, the code is simplified and, in a certain sense, becomes portable to other resources, which, thanks to the use of CSS sprites, become similar as close relatives, since you can use the same graphic ideas, Structure and content of tags.

In the usual process of developing a website, you need to make a lot of pictures. Very often these pictures take up very little space, but they are always a separate file. For any operating system of any server, opening a file is a time-consuming operation, but it will not differ significantly in time when the file is opened by 13 by 13 pixels, and when a file of 16 pictures 52 by 52 pixels is opened. In the first case, you need to have 16 files and 16 open / read operations, in the second case, 16 pictures will be obtained by opening only one file.

If you create sets of such files by subject (horizontal menus, dialog forms, calculator buttons, calendar items ...), then such sets of pictures can be mobilely transferred from the site to the site.

but on the other hand

When there are fans who are too quick to recommend using CSS sprites, be sure to find those who carefully study the question and intelligently shows that it is always more practical to work in the old-fashioned way.

Indeed, if instead of 16 image files there is one file of 16 pictures, then instead of 16 opening / reading operations there will be one. But the trick is that every browser has a cache, and it loads something only as a last resort. In addition, usually the page elements are loaded the first time the page is visited, and only the changed ones are loaded later.

Another aspect. Usually pictures are cut rather than glued into one file. Somehow the technology has developed so, it's better to say, the custom. The designer creates a layout, and layout uses its pieces: finely chopped parts of the layout. Opponents of sprites believe that the collection of several images in one file is a time-consuming task, increasing the overall development time of the page.

There are also developers who consider and optimize the number of HTTP requests, believing that this activity is more pragmatic than CSS sprites.

All the indicated moments undoubtedly matter, but much more important is the opinion: everything should be applied within reasonable limits.

Automation and CSS sprites

If there's no point in running the CSS sprite generator and getting the right part of the design, there's nothing to stop just making up this part in the usual way. If the usual technology leads to the need to cut hundreds of images, then it is preferable to sketch the JavaScript function, which, if necessary, will select the required area from the sprite and display it.

It should be noted, however, that a sprite of two or three elements or a dozen or two does not go anywhere, but when there are hundreds of drawings in the sprite, there certainly will not be problems with writing the JavaScript function, but how much effort it will take to create Such a large sprite ... In addition, to glue pictures is one thing, the sprite generator CSS does both the desired image and CSS-code for it, it does not matter to him how many elements of the sprite will be. Problems arise when you redesign the site, change design, delete and add new items. When developing a sprite, you should not think about how to use it, but how to change it later.

Thematic benefits of using sprites

Unlike the CSS programming languages, this is a relatively static set of rules, all its dynamics are determined by rules and their functional content (by standard). Considering in a set of sprites, HTML, CSS, you can create thematic libraries of design-functional.

For example, the finished version of the menu: simply by connecting a few css-rules, js-functions and including several HTML-divs in the code, you can get the result. Changing the contents of the picture sprite, you can change the appearance of this menu. By specifying the function body, you can adjust the functional.

It turns out a peculiar version of object-oriented programming (OOP). Undoubtedly, it will be a bright idea, but it will not stand out too bright against the background of other OOP dialects in real languages. It was only in the early 90's, when the OOP revived and began to gain an unusually fast place in the sun, it represented a concrete idea and a concrete form of its expression, and today the developers have come up with as many dialects as there is not a diverse Russian language.

Toys - a gold mine for sprites

Excitement and programming are incompatible concepts, but the qualification of the programmer writing games differs markedly from the common (simple coding) and creative (designing and developing new technologies, ideas).

Game design appeals to vector graphics, because the combination of SVG sprite + CSS rules is not only in demand, but also often turns from an object of a developer (site) into an object of a real game. In particular, the popular game Counter Strike applies to terms of sprites, sprays are quite meaningful synonyms: explosion, blood, sight ...

The phrase "install sprites css v34" for the initiate is quite normal and understandable. Sprites gained not only usefulness in application in their essence, but also formed a niche that became fully functional, accessible and understandable to a certain circle of consumers.

CSS sprites: an example

To switch pages of a site to one or another language, a variety of options are used, but if the language selector is executed in the form of an icon, the solution using the sprite may look like this:

Obvious disadvantages of sprites

First of all, it is a laborious and scrupulous process. It's one thing to cut a design into small pieces, the other is to collect one picture from many small ones. Apply the idea of the canvas and put on it all the images used on the site, completely futile.

Even using a CSS sprite generator, difficulties can not be avoided, especially when you have to redesign the site design. Place in the sprite a few dozen pictures - it's not an array of elements, graphics are graphics, it's usually just displayed, rather than sorted in code as an array in search of the desired element.

The standard and the following developers claim that since the sprites are related to the rule background, then this is an exclusively background image, not an element of the site. The graphic component of the page elements should manipulate the img tags.

With this it is difficult to agree on the simple basis that the background was not perceived as a general background. It's just a background, no matter what - a miniature element or the entire page as a whole.

Meanwhile, it is the graphic component that is a serious obstacle in the use of sprites.

Reasonable use

Despite the fact that the terms "Internet technology" and "high technology" are considered synonymous, in fact it is labor-intensive and in some places very non-technological work. Sprites do not particularly stand out against other bottlenecks, such as pure programming in JavaScript or PHP, or in terms of developing the necessary functionality, configuring the processes of filling sites with information, or, for example, creating background copies of archives.

The power and perspectives of the site management systems used are leveled at times by the nuances of their practical application, and manual development of resources, as a rule, leads to the need to rewrite one or another of its own algorithms for the 1001st time.

In the context of what has been said, it is important simply to use within reasonable limits everything that a modern instrument provides. Do not be too zealous to use one to the detriment of another, and the golden rule in site building is this: one should think not about how to hand over the work as soon as possible, but about how to implement it so that in the event of any unforeseen situation it can be quickly resolved Any problem.