Usually translated as "CSS image mosaic" or "CSS map positioning". CSSSprites is not a new technology. At present, the web development has been relatively mature, and csssprites can be seen everywhere in the web pages of Alibaba's subsidiaries. However, CSSSprites is not the golden rule, but in many cases, it has certain advantages. The most important thing is that it can reduce the load on the server and improve the loading speed of web pages. With the development of exquisite and ingenious web design, designers began to consider using non-Javascript methods to make mouse hovering menus, and CSSSprite came into being.
To put it bluntly, CSSSprites actually integrates some background pictures in a web page into a picture file, and then uses the combination of "background-picture", "background-repetition" and "background-position" of CSS to locate the background. The background position can accurately locate the position of the background picture through numbers.
When loading a page, instead of loading each individual picture, the whole combined picture is loaded at once. This is a great improvement, which greatly reduces the number of HTTP requests, reduces the pressure on the server, shortens the time delay required for hovering to load pictures, and the effect is smoother and uninterrupted.
CSSSprites application
In this regard, Taobao is doing better. I take Taobao as an example.
Example 1: Taobao Channel Page Navigation
Rendering:
Wizard map:
Example 2: Taobao Home Page
Rendering:
Wizard map:
Advantages of CSSSprites
Why CSSSprites suddenly became popular is related to improving website performance. Obviously, this is one of its great advantages.
1. Using CSSSprites can reduce the http requests of web pages, thus greatly improving the performance of pages, which is the biggest advantage of CSSSprites and the main reason for its wide spread and application.
2. Personally, I think CSSSprites can reduce the bytes of pictures. I have compared it many times, and the number of bytes of three pictures merged into 1 picture is always less than the sum of the bytes of these three pictures.
Disadvantages of CSSSprites
It is true that CSSSprites are so powerful, but there are also some shortcomings that cannot be ignored.
1. When merging pictures, it is necessary to merge multiple pictures into one picture in an orderly and reasonable way, and leave enough space to prevent unnecessary background from appearing in the plate, otherwise it may interfere with the pictures; These are all good, but the pain is the adaptive page under the wide-screen high-resolution screen. If your picture is not wide enough, it is easy to break the background;
2.CSSSprites is more troublesome to develop. You have to use photoshop or other tools to figure out the exact location of each background unit. This is needlework, not difficult, but very complicated; However, some experts have developed a "CSSSprites style generation tool" on the Internet. You can try it.
3.cssSprites are very troublesome to maintain. Elves are a double-edged sword. If there is a slight change in the background of the page, it is generally necessary to change the merged picture, and it is best not to move the place that does not need to be changed, so as not to change more CSS. If it can't fit in the original place, you can only (preferably) add a picture, so the bytes of the picture will increase, because it is a bit cumbersome to delete or add the content of this picture every time you change the picture. Of course, under the slogan of performance, these can be overcome.
4. Because the position of the picture needs to be fixed at an absolute value, it loses flexibility such as centering.
CSSSprites abstract
Performance is overwhelming. CSSSprites are worth learning and applying, especially when there are a lot of ICOs on the page. In short, many times we have to weigh the pros and cons before deciding whether to apply CSSSprites. In order to maintain compatibility and maintainability, it is a good practice to keep a certain distance between various parts in sprites pictures.