The concept, principle, application scope and advantages and disadvantages of CSS sprites

• CSS Sprites concept

  Csssprites in the domestic many people called the CSS Wizard, is a Web page image application processing way. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past. For the current popularity of the network speed, no more than 200KB of a single picture of the required loading time is basically the same, so there is no need to worry about this problem. The key to

  Acceleration is not to reduce quality, but to reduce the number. Traditional cut drawings pay attention to fine, picture specifications smaller the better, the smaller the weight of the better, in fact, size does not matter, computer unification is calculated in bytes. The client sends a request to the server for each picture that is displayed. As a result, the more images you request, the greater the likelihood of delay.

   ,

  CSS sprites technology is not fresh, as early as 2005  css zengarden  Park Master  dave shea  in  ALA  Publish a   Detailed description of the technology  . Originally only in the CSS between the players as a kind of web-making method, and later came out a  14 rules for faster-loading Web sites , the technical staff circulated, among them the first rule make fewer HTTP Requests mentions CSS Sprites. So the goblin on fire, even appeared in the online generation tool, unstoppable also. Recently, many domestic blogs have mentioned CSS Sprites, the most famous example is the http://www.google.co.kr/  below the few animation. The latest release of the Yui, is also used to CSS Sprites, almost all of the CSS decorations are a  40x2000 map   arranged. Social station Facebook has also recently used a  22x1150 image   assumed all icons. For a time, CSS sprites everywhere.

   

• Principle

  We know that since the CSS revolution has dropped, HTML tends to be semantically semantic, and in general no longer writes decorative content in markup, but presents the task to CSS. GUI is colorful, and there are all kinds of beautiful pictures to decorate. The new era of production is that the HTML is covered with various hooks and then processed by CSS. When need to use the picture, at this stage is through the CSS attribute background-image combination background-repeat, background-position and so on to realize (digression: Why do I mention at this stage, Because the future browser if the content is supported by adding another implementation method). Our protagonist is, you must have guessed, is background-position. By adjusting the values of the background-position, the background image can appear in front of you in different ways. In fact, the overall image of the picture has not changed, because the picture position changes, you see only should see only. Just like the date on the watch, you see today is 21, see tomorrow is 22, because its position jumped up a grid. So you probably know that CSS sprites can only be used in a fixed-size box (box), so that it can block the parts that should not be seen.

• CSS Sprites scope of application:

  1, web acceleration needs to be completed by reducing the number of HTTP requests.

  2, the page contains a large number of small icons. Or, some icons are very versatile.

  3. There are pictures in the webpage that need to be preloaded. It's mainly a relationship with a:hover background. If the background of a and a:hover are loaded separately, then, the user mouse moves to a button, the background of the button suddenly disappear and then come out, "flashing", if the button text color and large background of the same or similar, it is more embarrassing, there may be a button "disappeared" the illusion.

• Conditions that need to be met

  In web design, the picture that is pieced together by this technique is best to have a law. Fixed width or height. It's better to be able to fix the wide height. Pictures that need to be tiled are obviously not suitable for sprites.

  such as the buttons, it belongs to the fixed width of the high situation.

  In the case of fixed width, several small images can be arranged in parallel. Fixed height, the small picture is arranged vertically.

  If the background is not wide, but also in the case of forced use of CSS sprites technology, it is easy to produce "should not appear in the picture on the page" state. If "forcibly set high", it will be very detrimental to future maintenance.

• Advantages

  We learned from the front that the CSS sprites why the sudden run of fire, with the ability to improve the performance of the site. Obviously, this is one of its great advantages. The large number of images under normal production is now merged into a single image, greatly reducing the number of HTTP connections. The number of HTTP connections has a significant impact on the load performance of the Web site.

• Disadvantages

  As for maintainability, this is a general double-edged sword. Some people may like, some people do not like, because every time the picture changes have to go to the picture to delete or add content, appear a little cumbersome. And the location of the picture (especially the thousand PX chart) is a rather unpleasant thing. Of course, under the slogan of performance, these can be overcome.

  Because the position of the picture needs to be fixed to an absolute value, the flexibility such as center is lost.

  As we mentioned earlier, it is necessary to limit the size of the box to use CSS Sprites, otherwise there may be disturbing pictures. This means that CSS sprites are not appropriate in some cases where a non-directional tiling background is required and the page scaling is required. Yui's solution is to increase the distance between pictures, so that you can maintain a limited scale.

The concept, principle, application scope and advantages and disadvantages of CSS sprites