CSS online optimization tool: formatting CSS and streamlining CSS

CSS optimization usually involves two aspects: formatting CSS and streamlining CSS.

The method of streamlining CSS is to merge elements with the same attributes, but this reduces the readability of the code and makes it difficult to maintain the code in the later stage. If you do not pay attention to it, the error will occur.

Formatting CSS is generally the choice of multi-line mode or single-line mode. For example, I personally cannot accept the multi-line mode.

The following are some online CSS optimization tools that allow you to easily optimize CSS files.

1. Online CSS optimizer/online CSS Optimization

This online tool is used to streamline and compress the file size of the style sheet. The optimized code is completely confusing. It supports URL input, file submission, and direct input compression.

2. CSS compressor/CSS Compression

This tool has very detailed compression options, including basic mode and advanced mode.

In basic mode, you can select the compression mode: mild, standard, and height. The file after compression in the highest mode is the least, but the readability is also the lowest. Even problems may occur after compression, and so on. You can also select the CSS annotation code processing: Do not process comments, clear all comments or limit the number of comments.

In advanced mode, you can also select and process white spaces, tabs, and new lines.

3. cleancss/CSS formatting and optimization tools

An online CSS optimization tool based on csstidy can format CSS code or optimize CSS to reduce the size of CSS files, including very detailed options. For example, sorting selector and attribute, case-sensitivity conversion, and so on.

4. CSS analyzer/CSS Validity Analysis Tool

Check the validity of the style sheet, verify that the style sheet complies with W3C standards, and conduct Color comparison tests and ensure the unit of size (W3C guideline 3.4 is recommended to use relative rather than absolute units, although PX is a relative unit, the final font size depends on the output medium. Therefore, we recommend that you use the unit of size such as percentage and Em .)

5. Format CSS online/online CSS formatting Tool

This is an online tool dedicated to formatting CSS style sheet files. It makes no sense to use the "multirow mode", "single row mode", or other modes, it is better for everyone to do it in their own mode, and use tools to format it into their favorite mode during collaboration.

6. tabifier

A simple formatting tool that adds code indentation to make the code more readable.

7. Pretty printer

A multi-purpose code optimization tool that provides multiple options. In addition to CSS, it also supports PHP, Java, C ++, C, Perl, JavaScript, and other languages.

8. styleneat

Simple and Easy-to-use CSS formatting tool. Although there are not many options, it is quite practical. It supports direct input, file upload, and URL input.

Personal suggestion: use online tools for formatting, but do not use online tools for compression. It is best to manually merge some elements and attributes.

Appendix: 18 tips for CSS Optimization

I. Use CSS abbreviations Abbreviations can help reduce the size of your CSS document and make it easier to read. For the main rules of CSS abbreviations, see common CSS abbreviations syntax summary, which is not described here. Ii. Define the unit unless the value is 0 Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = 100, but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions that do not define the Unit: The Row Height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units. Iii. Case Sensitive When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that you use lowercase letters for any definition name. The values of class and ID are case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML. 4. Cancel the element limitation before class and ID When you write an element to define a class or ID, you can omit the previous element limitation because the ID is unique on a page and cannot be used multiple times on the page. It makes no sense to limit an element. For example: Div # Content {/* declarations */} Fieldset. Details {/* declarations */} Capable of writing # Content {/* declarations */} . Details {/* declarations */} This saves some bytes. 5. Default Value Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, the margin and padding values of any element can be defined as 0 at the beginning of the style sheet, as shown in the following code: *{ Margin: 0; Padding: 0; } 6. You do not need to repeatedly define the value that can be inherited. In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. defined in the parent element, the child element can be inherited directly without repeated definitions. However, the browser may use some default values to overwrite your definition. VII. Recent priority principle If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code. Update: lorem ipsum dolor set In the CSS document, you have defined the element P and a classupdate. P { Margin: 1em 0; Font-size: 1em; Color: #333; } . Update { Font-weight: bold; Color: #600; } In these two definitions, class = update will be used because the class is closer to P. For more information, see W3C calculating a selector's specificity. 8. multi-class definition A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is #666, and the second style has a border of 10 PX. . One {width: 200px; Background: #666 ;} . Two {border: 10px solid # f00 ;} In the Page code, we can call: <Div class = one two> </div> In this way, the final display effect is that the DIV has both a background of #666 and a border of 10 PX. Yes. You can try it. 9. Use the sub-selector (descendant selectors) CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. The sub-selector can help you save a lot of class definitions. Let's look at the following code: <Div id = subnav> <Ul> <Li class = subnavitem> <a href = # class = subnavitem> Item 1 </a> </LI> <Li class = subnavitemselected> <a href = # class = subnavitemselected> Item 1 </a> </LI> <Li class = subnavitem> <a href = # class = subnavitem> Item 1 </a> </LI> </Ul> </Div> The CSS definition of this Code is: Div # subnav ul {/* some styling */} Div # subnav ul Li. subnavitem {/* some styling */} Div # subnav ul Li. subnavitem A. subnavitem {/* some styling */} Div # subnav ul Li. subnavitemselected {/* some styling */} Div # subnav ul Li. subnavitemselected A. subnavitemselected {/* some styling */} You can use the following method to replace the above Code <Ul id = subnav> <Li> <a href = #> Item 1 </a> </LI> <Li class = sel> <a href = #> Item 1 </a> </LI> <Li> <a href = #> Item 1 </a> </LI> </Ul> The style definition is: # Subnav {/* some styling */} # Subnav Li {/* some styling */} # Subnav A {/* some styling */} # Subnav. Sel {/* some styling */} # Subnav. Sel A {/* some styling */} Using a sub-selector can make your code and CSS more concise and easier to read. 10. No quotation marks are required for the background image path. To reduce the number of bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. For example: Background: URL ('images/***. gif ') #333; Can be written: Background: URL (images/***. GIF) #333; If you add quotation marks, some browser errors may occur. 11. Group selectors) When some element types, classes, or IDs have some attributes, you can use the group selector to avoid repeated definitions multiple times. This can save a lot of bytes. For example, to define the font, color, and margin of any title, you can write as follows: H1, H2, H3, H4, H5, H6 { Font-family: lucida Grande, lucida, Arial, Helvetica, sans-serif; Color: #333; Margin: 1em 0; } If some elements need to define a separate style during use, you can add a new definition to overwrite the old one, for example: H1 {font-size: 2em ;} H2 {font-size: 1.6em ;} 12. Specify the link style in the correct order When you use CSS to define multiple state styles of links, pay attention to the order in which they are written. The correct order is: Link: visited: hover: active. The first letter is lvha, And you can remember it as love hate ). For more information about the definition, see link specificity of Eric Meyer. If you need to use a keyboard to control the focus of the current link, you can also define the focus attribute. : The effect of the Focus attribute depends on the position you write. If you want the focus element to display the hover effect, you can write the focus before the hover. If you want the focus effect to replace: for hover effect, you can put: Focus behind: hover. 13. Clear floating A common CSS problem is that when the floating layer is used, the lower layer is covered by the floating layer, or the nested child layer in the layer is out of the outer range. The common solution is to add an additional element after the floating layer, such as a div or a Br, and define its style as clear: Both. This method is far-fetched. Fortunately, there is a better solution. Please refer to the article "how to clear floats without structural markup" (Note: This site will translate this article as soon as possible ). The above two methods can solve the problem of floating exceeding well, but what if you really need to clear the objects in the layer or layer? A simple method is to use the overflow attribute. This method was originally published in simple clearing of floats and has been widely discussed in clearance and super simple clearing floats. The preceding clear method is more suitable for you. We will not discuss it here. In addition, some excellent articles on Float applications have been clearly stated. We recommend that you read: floatutorial, containing floats, and float layouts. 14. Center horizontally (centering) This is a simple technique, but it is worth repeating it again, because I have seen many new users asking this question: how to center CSS horizontally? You need to define the element width and the horizontal margin. If your layout is included in a layer (container), it is like this: <! -- Your layout starts here --> You can define as follows to align the user horizontally: # Wrap { Width: 760px;/* change to the width of your Layer */ Margin: 0 auto; } However, ie5/win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute. Like this: Body { Text-align: center; } # Wrap { Width: 760px;/* change to the width of your Layer */ Margin: 0 auto; Text-align: left; } Text-align: center of the first body. The rule defines that any element of the body in ie5/win is centered (other browsers only center the text), and the second text-align: left; is to place the text in # warp to the left. 15. Import and hide CSS Because the browser of the old version does not support CSS, a common practice is to use the @ import technique to hide CSS. For example: @ Import url(main.css ); However, this method does not work for ie4, which makes me a headache for a while. Later I used the following statement: @ Import main.css; In this way, CSS can be hidden in ie4, and 5 bytes are saved. For more information about @ import syntax, see centricle's CSS Filter chart. 16. Optimization for IE Sometimes, you need to define some special rules for IE browser bugs. Here there are too many CSS skills (Hacks). I only use either of them, whether Microsoft is better able to support CSS in the upcoming IE7 beta version, these two methods are the safest. 1. annotation Method (A) hide a CSS definition in IE. You can use the child selector ): HTML> body P { /* Definition content */ } (B) The following statement can only be understood by IE (hidden from other browsers) * Html p { /* Declarations */ } (C) In some cases, If you want IE/win to be valid While IE/MAC is hidden, you can use the backslash technique: /**/ * Html p { Declarations } /**/ 2. Conditional comments Another method, I think, is better than CSS hacks, is to use Microsoft's proprietary attribute condition comments ). With this method, you can define some styles for IE without affecting the definition of the main style table. Like this: <! -- [If IE]> <LINK rel = stylesheet type = text/CSS href=ie.css/> <! [Endif] --> 17. debugging skills: How big is the layer? When a CSS debugging error occurs, you need to analyze the CSS code line by line like a typographical engineer. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space. Some people suggest using border, which is also possible in general, but the problem is that sometimes border will increase the element size. Border-top and boeder-bottom will destroy the vertical margin value, therefore, it is safer to use background. Another frequently problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute. All I know is safari, omniweb, and opera. 18. CSS Code Writing Style When writing CSS Code, everyone has the habit of writing indentation, broken lines, and spaces. After continuous practice, I decided to adopt the following writing style: Selector1, Selector2 { Property: value; } When using the Union definition, I usually write each selector into a single row, so that they can be found in the CSS document. Add a space between the last selector and braces {, and each definition also writes a line separately. The semicolon directly adds no space after the attribute value. I used to add points after each attribute value. Although the rule allows the last attribute value to be followed by a semicolon, if you want to add a new style, it is easy to forget to add a semicolon to generate an error, therefore, it is better to add both. Finally, close braces} write a single row. Space and line feed help and read