Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of CSS compression and CSS code compression and restore. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

How to quickly typeset the compressed CSS code so that it is easy to compile and correct it.

Comparison diagram of CSS code contraction sequence

First, the reason for the contraction of CSS code, why the CSS should be tightened.

The most important component of CSS code compression is the reduction in the number of bytes occupied by the shrunken CSS code (reduced file size). If the number of visitors is compared to a small website, the advantage of tightening the advanced code is not very obvious. But for the large contrast web, it is necessary to visit a large number of websites to save money. On the one hand, it can save traffic. In addition, on the one hand, it can make the web open a little faster (probably visitors do not feel much about this speed, but they do have it), there is plenty of web space now according to the monthly use of traffic payment or the limit of space after the purchase of monthly use of traffic, if it is shortened, it will greatly increase the amount of traffic, thus saving money.

Examples of resource savings:

For example, a site has a PV1 million per day, which avoids the resource consumption of a server, which leads to a slow interview (usually the server will have a bandwidth at the moment). Many of these websites put pictures, CSS, JS, etc., on other servers, such as CSS on a third-party server and web uses LINK to link to external CSS files, while CSS files are placed on a third-party free OSS (development storage space). For example, Ali Cloud Storage), if you charge according to traffic, there will be a large number of meetings and the tightening of CSS code will naturally reduce traffic consumption and reduce consumption.

II. What are the aspects of CSS code tightening?

After opening up the wasteland of the web page, the CSS code to be promulgated to the site will be reduced directly, such as deleting spaces, removing line breaks, removing excess semicolons, etc.

It is true that some CSS code can be optimized and can greatly reduce the amount of code and thus reduce the file size.

The familiar relationship course can be reduced.

1. CSS code optimization

2. CSS code separation

3. Html compression

4. CSS initialization

3. CSS Compression tool

Code expansion recommendation directly use DW software (Dreamweaver) to shrink the code at the end.

IV. Compression methods

Use the search and transition instruments of the DW software to change the inflated CSS code.

1. DW software opens the CSS file.

2. Delete spaces to shorten the code

2-1: use the shortcut key "Ctrl+F" to bring up the find and change tools tab.

Screenshot of finding and innovating equipment after call-up

2-2: type (output) an English half-corner lowercase "space" at the search.

Output a space in the find input box

Enter a space in the "find" output box, and there is no need to fill in the character or code in the "replace" output box. At the moment of experimental change, it is tantamount to changing the space to no characters to delete the space identity.

2-3: click "Reform as a whole"

Click "replace all" screenshot

After clicking "change all", you can delete the excess space and shorten part of it.

3. Delete the excess semicolon

In CSS code, the closing of a CSS style within each CSS chooser does not require a "semicolon" ending, in other words, a CSS style does not need to end with a semicolon before the "back curly braces" in each determiner.

You can delete or omit semicolon screenshots

Abnormal use of DW software "search and innovation" performance to delete, prevent the deletion of other "semicolons", at this time in the "find and Innovation" tab "find" input box fill in ";}" (semicolon + curly braces), in the "change" input box only output "}" (after curly braces), and then click "change all", you can finish deleting the excess semicolon logo.

4. Delete the excess blank lines and line up the code (next to each other)

You can delete blank lines manually, or you can use DW software to quickly delete blank lines. The detailed deletion contraction is as follows.

4-1: start DW to open the CSS file code

4-2: select a blank line

Complete blank line selection screenshot

First of all, move the mouse cursor to the beginning of the determiner, and then click the left mouse button while pulling up to the end of the previous determiner (after the curly braces after the previous CSS style selector), you can select the blank line and the blue perimeter of the empty behavior at this time.

4-3: bring up the find and Innovation tool

After pressing the left mouse button after selection, using the shortcut key "Ctrl+F", you can misappropriate the "find and replace" tab, and the "find" input box of the "find and Reform" tab can actively fill in the blank line that has just been selected.

Complete the screenshot of the character status of "blank line"

4-4: click "change all" to complete austerity

There is no need to output any characters or codes in the "transition" input box, just click "Innovation completed" to achieve replacement.

Delete blank line spaces and excess semicolon screenshots

Very quickly using DW software to develop a few steps to complete the expansion and simplification of CSS code (files).

5. CSS5 shortens CSS code summary

The above is the code development blank lines, spaces, extra punctuation marks (semicolons) deleted, to achieve the contraction of CSS code.

6. Restore the CSS code after compression

After the expansion of the CSS code excess space blank line logo deleted, it will become a personal, it is no longer easy to modify the guard. But as usual, a web page of a site is very difficult not to protect and modify CSS, this time is the need for the development of CSS code typesetting correction. Similarly, restoring CSS code typesetting also guarantees the use of DW software to proceed very quickly.

1. First, DW software opens the CSS file.

2. Click the "localized source code" icon on the far right of the software code area (like a bucket) to carry out diligence.

After the development, the "fancy source code" succumbed to the screenshot

3. Click "use Source colors" to realize code typesetting.

Complete code typesetting CSS code screenshot

The above monopoly can restore and expand the compressed CSS code, which is easy to modify. Suppose that after modification, you need to compress and simplify the code again according to the above CSS expansion tutorial to develop optimized compression.

4, beware: code typesetting mode, you can enter the setting through the "Code pattern Settings".

On "CSS compression and CSS code compression restore example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.