HOW WRITE Efficient CSS from PositioniseVerything is a simple and easy-to-understanding CSS optimization technology teaching article, practical, beautiful, very classic, once jjgod has translated, but the link has been invalid, you have not preserved, so you don't save yourself. The style is translated, and if the translation level of JJGod will be my unparallelast. Although I have worked hard to reserve the original original taste of the original author, it was found in the translation process. The vivid words used in the authors did not vividly translated into Chinese. To add their tone and speech habits, this should be re-translated Restore "vivid" :) The level is limited, if there is a leaking, please enter the ax ...
The benefits of efficiency CSS most sought after the advantage is to reduce the page volume, thereby reducing the download time, whether it is loaded directly from the cache when the page is downloaded, or later. The fact is true, however, this is a large part of the volume in the first time being downloaded during the download. The reason is extremely redundant style sheet code. Ok, everything is over, let us start. You will learn some highly efficient style sheets to write "secret techniques", starting to knock on your style sheet to the last droplets. Of course, you can't take this "huge" page volume, but for websites who survive in fierce competition, one byte is a byte, these save bytes are extremely Value. There are such a range of ranges to perform "byte slimming", including short-handed properties, multiple declarations, use defaults, attribute inheritance, and blank processing.
The shorthand property is on how to set the page margin to zero (Zeroing Page Margins) and a few CSS short-write properties, but there is still a lot about this topic.
Commonly used shorthand properties include:
Font - font, control "font-size", "font-weight", "line-height" (line-height ", etc. Background - background, control element background, positioning, repetition, etc. LIST -style - list style, setting list item symbol of the property margin - margin, define the blank width Border - border left by the box model each border, define the style properties of each frame of the box container, which will involve To other short-side margins involved in the border, the inner margin, define the depollene width of the inside of the border of the box container
The above list items can be directly linked to the relevant content chapter in W3C CSS 2 Specifications.
For example, Font (font) attribute is a one-time setting of Font-Style, Font-Variant (font variant), Font-Weight, Font-size, Line-Height ( High-rise properties of rising and font-family (字 字). However, not all these attributes must be used simultaneously in the shorthand properties. When certain values in the discovery are omitted, each "missing" attribute is actually specified using its default value, which can be found in the W3C Specifications's Font Property content section. If you use a lot of font-related style control properties in a style file, use this shorthand property will be able to significantly reduce the volume of the style sheet.
Background and List-Style also have similar functions. Several unparalleled properties in the list involve four borders of a CSS box-shaped container, and different in the previous attributes.
The four borders (Divs-blocks, Tables-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, Lists-lists, paragraphs-tables, etc.) have their own Margins, Borders and Padding properties, which can be Set their width separately. Take Borders, each border can independently allocate Border-style (border model) and border-color (border color). If all these attributes are spell, it is very long enough, the set of rules is long enough! Use short-write rules to greatly reduce workload. The clock is the same as a border property of the four borders of the box-shaped container. If you want to use basic shorthand properties, such as writing:
Margin: 5px;
Border-width: 5px;
Padding: 5px;
Note: Border-style must be set to display the border. To do this we can define the Border-style property or set the pattern in the Border property. Just use the Border-Width property that cannot be displayed on the border.
However, if there is a case where the value of several borders is not the same, this time, a CSS feature we call "clock" starts work. Let us imagine a box-shaped container into one clock. When the pointer is normally, they are referred to as the top edges of the box-shaped container, but also the first value of the discovery attribute. The next is the position of the three o'clock, which is equivalent to the right side of the cassette container. Then there is a 6 o'clock position, which is equivalent to the bottom side of the cassette container, and the last nine-point position refers to the left side.
Let's see an example. We want to put a box-like container on the page, its top distance is 10px, the right side distance is 5px, the bottom side distance is 3px, no left distance. So you can write this with margin's shorthand properties:
Margin: 10px 5px 3px 0;
When declaring properties, these attribute values must only be separated by spaces. Also, each value must be marked in unless the value is zero.
Note that the margin is zero value is defined into 0, because no matter what is zero, the unit does not matter. The zero value of any unit (PX, EM,%, etc.) is equal to the zero value of any other unit.
The modification clock is the same as the same number of borders, the shorterness of the border can be concentrated to a greater degrees. As mentioned earlier, when all the bodes are consistent, all borders use the same value, but if the top and bottom are consistent, the right side and the left side are consistent, in which case the margin code can be written as follows. such:
Margin: 10px 5px;
This way to write the margins of the top and bottom of the bottom to 10px, and the side distance from the sides is 5px. There is also a trick, it is the case where the top and the bottom is different and the side is consistent. The top distance is 10px, the left and right side are 5px, the bottom edge is 20px, we write this:
Margin: 10px 5px 20px;
This all depends on the number of dealerships and the order used. Remember, a value = all borders; two values = top / bottom border, both sides; three values = top frame, both sides, bottom border; four values = follow the bell face principle. Ok, isn't it too difficult?
Border Difference Border Shorthand Properties (Border Short Squares) and Padding are also useful to use this "clock" shortup method. Border-Width, Border-Color, Border-style and padding and margin have the same manipulation. However, there is still a difference between Border attributes. Border attributes can also set up Border-Width, Border-Style and Border-Color of the four borders of the box-shaped container.
When the four borders are all, it is very good, but if they are different? Do we have to return to the days before Border-Top, Border-Right? Ok, maybe it. Fortunately, we have tricks. For example, the model and color of each frame of the box-shaped container are the same, and only the width is different. The most direct effective way is to define Border-Width, Border-Style and Border-Color as usual, and then use the border-width property separately to define different border widths to overwrite the previous settings, like this:
Border: 10px solid Red;
Border-width: 10px 5px 3px 0;
If all the border properties of the four borders are different, then this approach will not send a big usage, but this situation is not often happened. If only Border-Style or Border-Color attribute changes, this property is handled like this by handling Border-Width with this approach.
Next, let's look at another situation to see what is different from efficient CSS writing methods.
Multiple statements, such as we have six absolute positioning blocks (layers in Dreamweaver), they all are all, where they are separated from each other at the top of the page. Since their page positioning is different, they must be given separate class names or IDs, except that their remaining properties are all.
With the typesette editor, you may write a style rule for each ID, including all font rules, text rules, positioning declarations, and more. Like this constantly repeating those completely the same rules look, not a wise move, isn't it? Yes. Here is how to minimize these rules:
#first {Left: 0;}
#second {Left: 100px;}
#third {Left: 200px;}
#fouRTh {Left: 300px;}
#fiffh {left: 400px;}
#Sixth {Left: 500px;}
#first, #second, #third, #fourarth, #fiffh, #SIXTH {
Position: absolute;
TOP: 0;
Width: 75px;
Font-size: .9em;
Font-weight: bold;
TEXT-ALIGN: CENTER;
Line-height: 1.4em;
Background-color: Silver;
Color: navy;
Padding: 5px;
Border: 1px solid navy;
}
By listing the IDs of these same blocks one by one, and securely with one space with a comma, the styles rules of the rear large segment will be applied to all these six blocks. Obviously, if each ID is repeatedly defined these properties, the entire CSS will be bloated. This may be the only way to reduce the volume of the style.
Note: Make sure the last ID selector is behind
There is no comma, but should be like the same as the multi-ID rule set. Some browsers still display these blocks, but some will give this consideration as code errors without displaying any block.
Using the default value Most CSS properties have an initial default value, and when you redefine the value for these properties for the element, their default values are overwritten. For example, each attribute of the inner margin, Padding-top, padding-right, padding-bottom, and padding-left, their initial value is 0. If you do not want the target element to have an inner margin, then the inner margin attribute can omit.
Note: The short-discussion attributes we have previously discussed itself does not have the default. Usually each value is taken from a single attribute in the absence of the image. Although CSS 2 Specification
There are many default values listed in Property Index.
NONE or
0, but browser usually sets different default values to certain properties according to different elements. For example: Opera browser presets the inner side distance of the body element of 8px. H1-H6 title and paragraph element usually the default margins are not zero. Different browsers, the inner and outer margins default value preset for the Lists (list) and List-Items (list items) are not the same.
Attribute inherits another way to write redundant code is that the attributes inherited from the parent elements from the parent element. It can be inherited inherited, but many of them are still uncommonly used, like Voice-Family. There are not many listed inherited attributes (in alphabetical order):
Color Font (and Related Properties) - Fonts and Related Properties Letter-Spacing - Linear Line-Height - List List-Style (AND Related Properties) - List Style and Related Properties Text-Align - Text Align Text-Indent - Text indentation text-transform - text conversion White-Space - blank word-spacing - word distance
There are many problems in the inheritance feature in some old browsers, and the current new browser is generally inherited correctly. As long as you understand which properties can be inherited, you will write a lot of extra code. Retest, see the complete property list for a list of CSS 2 Property Index (CSS 2 property index).
Blank handles the blank said here is not the White-space property that has a specific value in the CSS, which is said to have a blank interval existing in the style sheet file. These intervals come from a new line for generating a new row, and those space that helps improve readability in a single line. Although these intervals can be removed, several bytes can be saved, but it is usually omitted.
If these spaces are removed, the style sheet will become difficult to read, let alone make changes. If the project clearly requires deleting every extra byte, you'd better create a "master" style sheet file for easy reading, then copy one, remove all of the blank, this style sheet is in use "Live Edition" style sheet. If you want to modify in the future, modify it in the easy-to-read main style, then copy a copy and remove blank as above, continue as "live version".
Be careful! Some spaces are required in the CSS encoding, if these spaces are removed, the CSS rules will also change and lead to some unexpected results. W3C's specification descriptions are used in such a word such as "Space Separate,", and these spaces are required. This situation is common between the various attribute values of the discovery attribute. It is often speaking that we will talk about the choice.
Contains a combiner, it is a space, if all spaces in the selector are removed, it is not a good idea. Maybe remove the space for the space to give those fattle molecules, it's the most suitable, right?
Summary To this you have learned how to make your style table more simple and efficient. The benefits of using these techniques are not only the volume of the style, which speeds up the download, and the style sheet is often clear and clean, and the code that is easy to understand is also easy to modify maintenance. Even if you use the Typographic Editor to create your style sheet, you can use these methods mentioned in this article to write your "finished product" more reasonable and more efficient!
Holly 'n john
© PositioniseVerything
Last Updated: July 3, 2004
Created November, 2003
TRANSLATED BY
POPO
Ever on October 10, 2004
---------- Full text ----------
Translator Note: This article has some attention to my attention during the translation process. It is mainly how exclusive nouns are most appropriate. I have also had a lot of domestic Web Standards related translation works and Chinese local works, and this is some The nouns have been entangled, and each said, I will not take them, and Chinese is profound. It is often not an easy thing to unify one word, not to mention the term "shipping". For example, Padding, there is a "filled", there is a "filled", and there is also a "patch". For the next two, I feel acceptable, at least the harmony can easily memorize the friends of the foreign language, but I still Persevere to turn it into "inner margins", because this is the most visual figure, Padding is originally the distance between the border to internal text, not called "inner margin". As for Margin, it is translated "blank" or "left" or "gap", "margin", which is better, my mother has been an advanced editor, she told me should be called "white side "Since I have turned padding into" inner margins ", it seems that Margin can only make a pair of" margins ". Another one is Box, the most obvious is to turn into a "box model" or "box object", I am too lazy to go to Luo. Anyway, just a self-study, but it is translated, but I will not confuse the audio-visual ~~~ --PoEver original translation, translation copyright, declined, the original copyright belongs to the original
