How to apply CSS to Web site Sprite technology Automation implementation of the approach

Prerequisite Summary:

A Web site or channel page, the content of more pictures, and changes are not too frequent, how to optimize to become a difficult problem, the use of CSS Sprite function can be implemented to merge multiple pictures together to load the method, but this requires the front end of the picture position and CSS manual adjustment, change the HTML structure, Unusually complex, which is why many sites have not yet used the reason.

I've been thinking about how to automate this process, simple and easy to operate, so that the front-end staff to change less code in the case of automatic completion of this process, after a period of thinking and data browsing, sorting out a kind of personal feel feasible way, for everyone to comb, of course, this is not the final method, More people are needed for process optimization.

Facing problems:

1, picture automatic merging problem

2, how CSS style generation, Cheng machine (that is, when the most appropriate generation), how to associate, and set the offset

3, whether need to modify the original HTML code, need to modify the words how to modify, when to change.

4, in the picture size is different, the type is different, how carries on the effective and the service end parameter transmission and the offset computation.

5, how to modify the original HTML at least in the case, such as the CMS configuration and other non-professional professionals can operate flexibly, will not be because do not understand the technology and the wrong situation.

6, how to support the service side, is the use of server-side webserver parsing HTML, or using language such as PHP to execute, compile and then assemble the HTML.

7, there should be ...

my ideas for the above questions:

1, perhaps this is the best solution to the problem, the use of PHP or Nginx C module, in accordance with the transfer over the number of picture parameters to merge the original picture, in order. All pictures can be arranged horizontally or vertically so that the offset of the x or Y coordinates is set directly in the CSS, which is the height or width of the previous picture. Considering the performance problem, this picture can be added to the cache, or direct production of the corresponding static file, the request to determine the existence of static files, there is a return, there is no further generation.

2, the dynamic generation of CSS, of course, the parameters also contain the parameters of the above multiple pictures, according to the location of the picture, generate the corresponding CSS. (because CSS is loaded in the browser high priority, resulting in many scenarios can not be implemented.) Repeat in the solution how to associate with the picture.

3, why to modify HTML because the normal HTML is: , CSS sprite is <div style= ' Background:url ', in this way, there is no compatible representation. If you do not need to modify the source code, you must do so after the DOM parsing completes the HTML (because the normal the tag is parsed and starts executing. And before the Document.onload event, although most browsers have a compatible implementation, but I think it is still not very reliable, so the idea is that we must modify the HTML in advance.

4, this problem I think a lot of parameters can solve the problem, is more complicated to see if there are other better ways.

5. The following issues are covered in the solution.

I personally think the feasibility of a slightly larger solution: (more processes, each part of the solution is not the same)

Step 1, skip the start to generate merged pictures, directly in the dynamic call in the CSS method generated.

As in the header of the HTML directly

<link href=http://xxxx.php?imgids=1,2,3,4,5,6,7 rel= "stylesheet" type= "text/css" media= "screen" >

In this PHP, the main to do 2 things, one is based on the picture ID (you pass the picture path can also, according to their own business to choose) to get the actual picture, and the size of the picture, in the corresponding location to generate the reorganization of the corresponding picture file merge. The second thing is based on the above data, generate the corresponding CSS content, returned to the page, the content format is as follows: [CSS] view plain copy. Img1 ... img2 img3 ... {background-image:url (this URL is directly the HTTP address that was actually accessed by the merged picture file just generated)}. img1{background-position:0px 0px}. img2{background- POSITION:0PX-94PX}. img3{background-position:0px-188px} ....

This CSS this page can be used. Some people ask, how to let each div use a different class style. My idea is: in the Document.onload event, with JS Loop to set the object, with JS to give him set classname can be, or, directly to use the way below step 2 directly assigned value.

Step 2, resolving the problem of HTML code changes

The best way I think is to add a C module to the Nginx, the function of which is to get the code block that needs to be changed, the code block can be defined with a label, or it can be used to match. When the module is opened, the HTML code is automatically converted to the code used by the above structure.

Configuration module: [Ruby] view plain copy location/index.html{css_sprite on;   Reg_ex '/start (. *) end/'; }

Or use PHP's execution method to generate the corresponding code. If you can configure such a tab in the CMS to implement the function.

The actual site situation is more complex, most of the site can not involve step 2, directly in the page output corresponding code can be, step 2 for the front-end structure more complex situation. This solution is suitable for the picture replacement frequency is not too high, of course, personally feel that performance is not a problem, most of the time can be used on the cache, of course, to say that does not support GIF, does not conform to the logic, the number of GIF frames is not the same tragedy.

Temporarily can think of is these, the Internet has not yet found a more specific solution, others can help me to add or modify, I hope to help some have such a demand site, welcome everyone spit slot.