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

In this article Xiaobian for you to introduce in detail "CSS compression and CSS code compression and restore method", the content is detailed, the steps are clear, the details are handled properly, I hope this "CSS compression and CSS code compression and restore method" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

CSS compression and CSS code compression restore methods, what are the CSS compression tools? What tools do you use to compress the css code? How to quickly typeset the compressed CSS code so that it can be edited again.

Comparison of CSS code before and after compression

First, the reason for CSS code compression, why CSS compression

The most important factor in CSS code compression is the reduction in the number of bytes occupied by the compressed CSS code (reduced file size), and the advantage of the compressed code is not obvious if the number of visits to the website is relatively small. However, for relatively large websites, it is necessary to save a large number of visits to websites. On the one hand, it can save traffic. On the other hand, it can make the website open a little faster (visitors may not feel this speed, but it does exist). In particular, some website space is now paid according to the monthly use of traffic or limit the size of the monthly use of traffic, if compressed, it will greatly reduce the amount of traffic usage, thus saving costs.

Cost savings cases:

For example, a website uses 1 million PVs per day to avoid the consumption of a server's resources, resulting in slow access (usually the server will have current bandwidth). Many of these websites will put pictures, CSS, JS, etc., on another server, such as CSS on a third-party server and the website uses LINK to link to external CSS files, while CSS files are placed on the third-party paid OSS (development storage space, such as Aliyun storage). All are charged according to traffic, large traffic and CSS code compression will naturally reduce traffic consumption and reduce costs.

2. What are the aspects of CSS code compression?

After the web page is developed, the CSS code to be published to the website will be reduced directly, such as deleting spaces, removing line breaks, removing redundant semicolons, etc.

Of course, some CSS code can be optimized or greatly reduce the amount of code to reduce file size.

3. CSS Compression tool

Code compression it is recommended that you start compressing code by using DW software (Dreamweaver) directly.

IV. Compression method

Use the find and replace tool of the DW software to replace the compressed CSS code.

1. DW software opens the CSS file.

2. Delete the space compression code

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

Screenshot of find and replace tool after call-up

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

Enter a space in the find input box

Enter a space in the "find" input box, and there is no need to fill in the character or code in the "replace" input box, so that when performing the replacement, it is equivalent to replacing the space with no characters, which is equivalent to deleting the space position.

HTML related reading: html enter multiple spaces

2-3: click "replace all"

Click "replace all" screenshot

After clicking "replace all", you can delete the extra space and complete the compression part.

3. Delete the extra semicolon

In CSS code, the end of the last CSS style in each CSS selector does not need a "semicolon", in other words, the semicolon does not need to end the last CSS style in each selector, that is, before the "curly braces".

You can delete or omit semicolon screenshots

Also use the DW software "find and replace" function to delete, avoid deleting other "semicolons", this time in the "find and replace" tab "find" input box ";}" (semicolon + curly braces), in the "replace" input box only enter "}" (after curly braces), and then click "replace all", you can complete the deletion of excess semicolon symbols.

4. Delete the extra blank lines so that the code is lined up (close together)

You can delete blank lines manually, or you can use DW software to quickly delete blank lines, as shown below.

4-1: first, DW opens the CSS file code

4-2: select a blank line

Complete blank line selection screenshot

First move the mouse cursor to the beginning of the selector, then click the left mouse button while pulling up before the end of the previous selector (after the curly braces after the previous CSS style selector), you can select the blank line, which is the blue area.

4-3: bring up the find and replace tool

After releasing the left mouse button after selection, use the shortcut key "Ctrl+F" to call out the "find and replace" tab. At this time, the "find and replace" tab's "find" input box can automatically fill in the blank line just selected.

Complete the screenshot of the "blank line" character position

4-4: click "replace all" to complete the compression

There is no need to enter any more characters or codes in the "replace" input box, just click "replace complete" to complete the replacement.

Delete blank line spaces and extra semicolon screenshots

Quickly use DW software to carry out a few steps to complete the CSS code (file) compression and reduction.

Summary of DIVCSS5 compressed CSS code

The above is the deletion of blank lines, spaces and extra punctuation marks (semicolons) to complete the compression of the CSS code.

6. Restore CSS code after compression

After compression, the CSS code will become a whole after the extra blank line symbols are deleted, which is no longer easy to modify and maintain. But in general, a website page is very difficult not to maintain and modify CSS, this time is the need for re-typesetting changes to the CSS code. Similarly, it is recommended to use DW software to restore CSS code typesetting.

1. First, DW software opens the CSS file.

2. Click the left-most "format source code" icon (like a bucket) in the software code area to expand the application function.

Screenshot of the "format source code" function after expansion

3. Click "apply Source format" to complete code typesetting.

Complete code typesetting CSS code screenshot

By doing the above, the compressed CSS code can be restored and compressed, which is easy to modify. If you need to compress after modification, optimize the compression and simplify the code according to the above CSS compression tutorial.

Read here, this "CSS compression and CSS code compression restore method" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

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.