CSS Sprites technology As early as 2005, Dave Shea, the owner of CSS Zengarden, published a detailed explanation of this technology in ALA.
Originally, it was only circulated among CSS players as a production method. Later, 14 Rules for Faster-Loading Web Sites came out and were circulated among technicians. The first rule, Make Fewer HTTP Requests, mentioned CSS Sprites. So this little goblin became popular, and even online generation tools appeared, which was unstoppable. Recently, many domestic blogs have mentioned CSS Sprites. The most famous example is the animations below google.co.kr. In the latest release of YUI, CSS Sprites are also used. Almost all CSS decorative images are covered by a 40×2000 image. Facebook, a major social networking site, recently used a 22×1150 image to cover all icons. Suddenly, CSS Sprites were everywhere.
How CSS Sprites work
We know that since the CSS revolution, HTML has tended to be semantic. In general, decorative content is no longer written in tags but the rendering task is handed over to CSS. The GUI is colorful and indispensable for decoration with various beautiful pictures. The production method in the new era is to fill HTML with various hooks and then let CSS handle it.
When images need to be used, this is currently achieved through the CSS attribute background-image combined with background-repeat, background-position, etc. (Digression: Why do I withdraw the current stage, because if the browser supports content in the future, additional implementation method). Our protagonist is, you must have guessed it, background-position. By adjusting the value of background-position, the background image can appear in front of you in different appearances. In fact, the overall appearance of the picture has not changed. Due to the change in the position of the picture, you only see what you should see. It's like the date on a watch. You see it as 21 today and 22 tomorrow because its position has jumped up one space. So you probably know that CSS Sprites can generally only be used in a fixed-size box (box), so that the parts that should not be seen can be blocked.
Let's use YUI's sprite.png as an example. If we have such a piece of code, max represents maximization and min represents minimization. We need to match them with corresponding beautiful pictures (so that our website can be attractive):
<div class="max">Maximize</div> <div class="min">Minimize</div> |
Both classes use the same image:
.min, .max { width:16px; height:16px; background-image:url(sprite.png); background-repeat: no-repeat; /*We don't want it to be tiled*/ text-indent:-999em; /*A way to hide text*/ } |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> |
We see a cloud of gray, yes, because we have not specified the background-position, which defaults to 0 0. You can look at sprite.png. This position is the gray block. Okay, we need to find the positions of the plus sign that represents maximization and the minus sign that represents minimization. After measurement, the maximize button is located at 350px on the Y axis, and the minimize button is located at 400px on the Y axis. Think about how we can make them display. Obviously, we need to upgrade sprite.png, and the code is as follows:
.max { background-position: 0 -350px;} .min { background-position: 0 -400px;} |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> |
This time we succeeded!
Advantages of CSS Sprites
We learned from before that why CSS Sprites suddenly ran out of steam is related to its ability to improve website performance. Obviously, this is one of its great advantages. A large number of pictures under the ordinary production method are now merged into one picture, which greatly reduces the number of HTTP connections. The number of HTTP connections has an important impact on the loading performance of the website.
Disadvantages of CSS Sprites
As for maintainability, this is generally a double-edged sword. Some people may like it and some may not, because every time the picture is changed, you have to delete or add content to the picture, which seems a bit cumbersome. And calculating the position of pictures (especially pictures with thousands of pixels) is also quite unpleasant. Of course, under the slogan of performance, these can all be overcome.
Since the position of the image needs to be fixed to an absolute value, flexibility such as center is lost.
As we mentioned earlier, the size of the box must be limited before CSS Sprites can be used, otherwise it may interfere with the image. That is to say, CSS Sprites are not suitable in some situations where non-unidirectional tiled backgrounds and web page scaling are required. YUI's solution is to increase the distance between images so that limited scaling can be maintained.
Summary of CSS Sprites
Performance trumps all else. CSS Sprites are a technology worth promoting. It is especially suitable for FIR, such as fixed-size icon replacement. To maintain compatibility, it's a good idea to keep parts of the image some distance apart.