Discussion on CSS sprites technology and its optimization

CSS Sprites technology for the vast number of front-end engineers should be not unfamiliar. What exactly is the problem with this guy who is nicknamed CSS Sprite CSS by a domestic developer, and how do we use this technology properly? Let's talk about it in detail below.

In everyone is still in the dial-up Internet "ancient times", due to the speed limit, page developers like the page inside the image byte control is very small, often in a picture folder scattered n many small pieces of plot. With the development of network technology, speed of the promotion, we pay more and more attention to the loading speed of the page, page efficiency problems, the past those small map has become a thorn in the front end developers, because each load a picture will produce a browser request number, the number of requests to initiate more then the page loading speed is also slower. And when the page is loaded, the pictures are sporadic display, the mouse after the background flashing white and so are also we can not tolerate. So the background map of the page together, the use of "Background-image", "Background-repeat", "background-position" combination of background positioning technology is widely used and the page construction, this is the CSS Sprites. Of course, CSS sprites technology also has the disadvantage of maintenance inconvenience, memory footprint and so on.

Well, if I just say this, then this article is a bit too much water. The front ones are just a popularity of CSS sprites technology. As a developer we should have a more comprehensive understanding of it, mining the depth of content, so as to facilitate our efficiency development, team collaboration.

A headache multiplayer puzzle game

Using CSS sprites is like playing a jigsaw puzzle. A white canvas, how can many pictures be put inside to be perfect? It's a tangled thing. And in reality in the work scene, we face the project development time is tense, the UI design plan to provide in installments, many people collaborate to develop a project and so on. These issues are very easy to get lost in the big projects, resulting in the confusion of CSS puzzles, maintenance and difficult situations.

Set the rules, in fact, the puzzle is also very fun

Preparatory work in advance

To deal with the problem of large maintenance costs in the late stage of a project, our best solution is to develop a series of specifications to limit the problem before we start. A good beginning is half the success. For CSS sprites, before the project begins, we need to fully understand a product, communicate well with the UI designer, and have a general idea of the elements that make up our sprites diagram in the future, such as what our background puzzles might contain.

A good sprite canvas is a must.

Web design inside, grid system is essential, good grid can solve many of our typesetting problems. The grid system also applies to CSS sprites. We need to create a good artboard, and the rest of the work is to put the elements reasonably in the artboard.

This is a CSS sprites canvas that I have prepared, and we will combine the images in the project in this PSD.

This canvas is made up of 20px*20px pixel lattices. This grid is basically determined by the project when we communicate with the UI designer to understand the most 16px*16px icon for this project. We can use this grid size as a canvas.

The Sprites canvas is available, and the next step is to group the icons.

The summary of information, classification is an interesting thing. Take the icon to say, we can according to the icon function, size and so on as the information dimension to summarize. In fact, no matter how summed up, are OK, just remember that we take a direction as a standard on it.

The following figure is a CSS sprites based on a component outside the microblog station

According to the design, we understand that in this page, the image elements need to be divided into 4 dimensions according to the function, that is, micro-Bo brand display elements, submit buttons, operation type of small buttons, hint type icon. So I'm going to divide the direction of the canvas x-axis coordinates into one area for every 5 cells (which can actually be 10 or more), and the y-axis of each of these areas is no longer dividing the area, so the goal is to increase the expansion of the icon later. So we can get the coordinates of an icon very quickly. For example, the unavailable gray share button x coordinates =5*20px=100px y coordinate =7*20px=140px; So we've got the location of this icon, Background-position: -100px-140px. If the abstraction becomes a formula, we set the width of a cell to variable N. x coordinate value gx,y coordinate value Gy. Then the CSS background of the elements in the canvas is: background-position:-gx*npx–gy*npx.

Now the diagram has, how to take the map is also the key

Because the picture is as integrated as possible into a jigsaw puzzle, we need to display the part of the puzzle to the page in the way the page uses the location of the picture using an empty tag.

. icona {display:inline-block; height:16px width:16px; Background:url (icons.png) -20px-20px No-repeat}

There are two requirements for the project, need to add icon?

Demand is always out of control, and we have to be as ready as possible to add pictures to the future. In the previous example of the project, the late product needs to be added icon, so:

We can continue to add the corresponding icon in the corresponding plot area. But this example also exposes a flaw, if the New button area is greater than 5n (100px), our plot area is not enough to load. At this time we can communicate with the product, designers, to discuss whether the large button design can be canceled. If the demand is certain, we can only continue to extend the canvas along the x-axis. However, we also need to pay attention to the infinite magnification of a canvas, which will also affect the efficiency of the page.

Make good rules in time and record the modification log

May be at the beginning of the project, we have not yet time to develop the specific specifications of the map, in the project we will encounter a variety of problems. Timely summary, maintain the entire CSS puzzle, in the puzzle PSD or PNG (using fireworks) do a good job of annotation, to facilitate the development of others. When the picture is submitted to SVN, log content is also written, so that you can query later.

Our ultimate goal.

In fact, CSS sprites after so many years of evolution, front-end developers continue to optimize, are to enhance the efficiency of the page, improve team development efficiency, reduce development and maintenance costs and efforts. With the recent very popular CSS dynamic language (such as sass less, etc.), add into variables, inheritance, operations, functions and so on. CSS sprites will become more fun, will reduce the cost of development and maintenance. Even in the Object-oriented module development approach, you can use the same backgroud-position: (x Y) value of a class to achieve a further reduction in the amount of picture requests within a page by referencing different pictures (background properties). With the popularity of advanced browsers we can also use CSS3 properties, reduce the use of gradient background, the pure color icon to create a font to replace the puzzle and so we can more greatly reduce the use of pictures. This article is just a tip. There are actually a lot of ways to do CSS sprites, as well as a number of puzzle generation tools.

Said so much, if we in the daily development, as long as we pay more attention to summary, dare to innovate, dare to formulate norms, then small things can also be able to be very beautiful, for CSS sprites optimization is such an example, you say not Mody?

The young monkey, the wild

Article Source: Weibo UDC