This article is mainly written to improve the Web page in the client browser rendering speed of the CSS section, the provisional summary of 10.
1, *{} #jb51 *{} As far as possible to avoid
Because there are differences in the interpretation of HTML tags by different browsers, so the final web page effect in different browsers may not be the same, in order to eliminate this risk, the designer will normally be in the CSS at the beginning of all the default attributes of all tags removed, to achieve all the signature attribute values are uniform effect. So there's the * wildcard. * Will traverse all the tags;
*{margin:0; padding:0}
If you write this, all the labels on the page are margin 0;padding and 0;
#jb51 *{margin:0; padding:0}
If this is written, the margin of all tags under id equals jb51 is all 0;padding is also 0;
The question to be written is this:
A. Traversal will take a lot of time, if your HTML code is not written in the specification or a sign does not necessarily fit, this time may be longer;
B. Many of the labels do not have this attribute or attribute itself is unified, then to set up once, there is time to open the elimination;
Suggested Solutions:
A. Do not use uncommon tags, because these tags are often in different browsers to explain the effect is not the same, so you have to use the most commonly used tags;
B. Do not use *; instead, deal with these tags that you commonly use; for example: body,li,p,h1{margin:0 padding:0}
2, some of the filter things do not use
Some of the filters in IE are not supported in Firefox, often write some effect when you still use CSS HACK, and filter is a very little resources of things, especially some feather, shadow and a front transparent effect;
For example, a shadow effect:
<style> body {margin:100px;} #login_b {width:200px;height:200px;background: #000;-moz-opacity:0.2; Filter:alpha (opacity=20); margin:-30px 0 0 600px; Position:absolute;} #login_t {z-index:10;border:1px solid #006600; Width:200px;height:200px;background: #FFF; margin:-35px 0 0 595px; Position:absolute;} #info {background: #009900; height:155px;} </style> <div id= "info" > <div id= "login_t" >test</div> <div id= "Login_b" ></div> &L T;/div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/3 page
123 Next read the full text
