CSS hack and backward compatibility

ArticleDirectory

• I. CSS selector hack
• Ii. CSS attribute hack
• Iii. ie comments
• Iv. browser Detection: JS/backend program judgment
• 5. Personal Recommendation writing
• 6. A comprehensive list of IE6 +/Firefox/WebKit/opera CSS hack:

Once people get used to something, it is difficult to modify it. There are various reasons why new browsers are becoming increasingly popular and old browsers cannot be eliminated. Increasing Speed is always faster than dying, leading to browser compatibility. Speaking of browser compatibility, CSS hack is naturally remembered. Today, we usually have a team or people who have a team in a company to do the same thing. We need a unified specification for coding to facilitate maintenance. The solution to compatibility is (it must be, because this is the easiest way to have problems) One of the most important and one of the specifications to be addressed.

To develop a unified specification for the solution compatibility method, I personally think that the following three points should be the basic principles:

 

1. Weigh costs: How to quickly clear useless items after browsers are eliminatedCode
2. Maintenance: backward compatibility between resource costs and perfect balance
3. Readable: easy to remember

Here, we put the cost first, not to say that we do not want to pursue perfection, but that we are too deliberate to pursue perfection. Sometimes, it may hinder our progress. After the cost, it should be maintainable and readable, this is crucial for team collaboration, and the final result is to reduce costs.

First, let's save these three principles to see how we solve the compatibility problem (a detailed hack method list will be provided later ):

I. CSS selector hack

 

 
/* Opera */@ media all and (-WebKit-Min-device-pixel-ratio: 10000), not all and (-WebKit-Min-device-pixel-ratio: 0) {head ~ Body. sofish {display: block ;}}
 

 

The advantages and disadvantages of this method are:

• Advantages: comprehensive, all kinds of hack are available; easy to recognize in useless code
• Disadvantage: the selector name is not easy to remember; there is a large amount of code (you need to repeat the selector)

Ii. CSS attribute hack

 

 
. Sofish {padding: 10px; padding: 9px \ 9;/* All ie */padding: 8px \ 0;/* ie8-9 */* padding: 5px; /* ie6-7 */+ padding: 7px;/* IE7 */_ padding: 6px;/* IE6 */}
 

 

The advantages and disadvantages of this method are:

• Advantages: easy to remember; less code
• Disadvantage: incomplete

Iii. ie comments

 
<! -- [If IE]> ie Only <! [Endif] --> <! -- [If! IE]> not ie <! [Endif] -->
 

The advantages and disadvantages of this method are:

• Advantages: Secure, backward compatible, and easy to maintain
• Disadvantages: if it is used badly, HTTP requests will be added; if it is used well, there will be more code.

Iv. browser Detection: JS/backend Program Judgment

 
// Take jquery as an example to check whether it is IE6. If yes, add class = "IE6" if ($. browser. MSIE & $. browser. version = 6) {$ ('div '). addclass ('ie6 ');}
 

The advantages and disadvantages of this method are:

• Advantages: comprehensive, easy to maintain, and high readability
• Disadvantage: Resource occupation; large amount of code (to rewrite the selector)

The above four methods are our most commonly used methods. Now, let's take a look at the three principles in our hearts to see how to choose. Do you have time to think about it? Here is a brief introduction to my selection:

1. Try to use separate hack

   In this way, the maintenance cost is relatively low, and changes will not affect other browsers. Once a browser is eliminated, the code can be removed in batches as long as you search for keywords. For example, IE6's separate hack:_ Padding: 6px ;;

2. Backward compatible goals: 1 year

   Do you want your website to be compatible with Internet Explorer 10? No one wants to, but the predictability is too low. You can also say that the cost is too high. It is not necessary for the moment. However, ie9 may be released.Padding: 8px \ 0;This hack of IE8 + will be better if other codes are deleted without affecting backward compatibility. Moreover, if ie10 is released, once this hack is supported, this bug does not exist, the deletion may affect only two browsers, which is more convenient;

3. Save resources as much as possible

   If you do not consider the page loading speed or the server's capacity, you can do a perfect job in backward compatibility and elimination (from the code ), but to some extent, it is better not to do this.

5. Personal Recommendation writing

In fact, there are a lot of confusions. Here we combine the types of A-grade browsers and the types of hack to write two methods that I think are reasonable about hack and backward compatibility, for your reference only.

Economical statement:Pay attention to separate hack. There are many hack in IE, so select the easy-to-remember attribute hack. If there are few hack in other browsers, select the chunk selector hack (recommended)

. Sofish {padding: 10px; padding: 9px \ 9;/* All ie */padding: 8px \ 0;/* The ie8-9 is currently used for IE8 separate hack, the case is relatively small */* padding: 5px;/* ie6-7 */+ padding: 7px;/* IE7 */_ padding: 6px; /* IE6 */}/* WebKit and opera */@ media all and (min-width: 0px ){. sofish {padding: 11px ;}/ * WebKit */@ media screen and (-WebKit-Min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}/ * opera */@ media all and (-WebKit-Min-device-pixel-ratio: 10000 ), not all and (-WebKit-Min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}/ * Firefox */@-moz-document URL-prefix (){. sofish {padding: 11px ;}/ * All Firefox */html>/**/body. sofish, X:-moz-any-link, X: Default {padding: 11px;}/* newest Firefox */
 

Quasi-perfectionist writing:With IE comments, the selector hack is used (recommended)

 HTML: add body class 
    
   
    
   
    
   
    
   
    
   

. Sofish {padding: 10px ;}. non-ie. sofish {padding: 12px ;}. ie9. sofish {padding: 9px ;}. IE8. sofish {padding: 8px ;}. IE7. sofish {padding: 7px ;}. IE6. sofish {padding: 6px;}/* WebKit and opera */@ media all and (min-width: 0px ){. sofish {padding: 11px ;}/ * WebKit */@ media screen and (-WebKit-Min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}/ * opera */@ media all and (-WebKit-Min-device-pixel-ratio: 10000 ), not all and (-WebKit-Min-device-pixel-ratio: 0 ){. sofish {padding: 11px ;}/ * Firefox */@-moz-document URL-prefix (){. sofish {padding: 11px ;}/ * All Firefox */html>/**/body. sofish, X:-moz-any-link, X: Default {padding: 11px;}/* newest Firefox */
 

Then, we can also find the second method. Use ie comments on the body class instead of adding separate<Link/>Or@ ImportIt will be a better choice. Although file splitting is also a good choice, but for the page loading speed, HTTP requests can not be wasted.

It is not recommended to use JS or backend programs unless you have enough resources and cannot solve it (90% won't happen. Attach a table (VIA) for reference:

6. A comprehensive list of IE6 +/Firefox/WebKit/opera CSS hack:

/***** Selector hacks ******/* IE6 and below */* html # Uno {color: Red}/* IE7 */*: first-Child + html # dos {color: Red}/* IE7, FF, SAF, opera */html> body # tres {color: Red}/* IE8, FF, SAF, Opera (everything but IE 6, 7) */html>/**/body # cuatro {color: Red}/* opera 9.27 and below, Safari 2 */html: first-child # cinco {color: Red}/* Safari 2-3 */html [xmlns * = ""] body: Last-child # SEIS {colo R: Red}/* Safari 3 +, chrome 1 +, opera9 +, FF 3.5 + */body: Nth-of-type (1) # siete {color: red}/* Safari 3 +, chrome 1 +, opera9 +, FF 3.5 + */body: first-of-type # Ocho {color: Red}/* saf3 +, chrome1 + */@ media screen and (-WebKit-Min-device-pixel-ratio: 0) {# Diez {color: red}/* iPhone/mobile WebKit */@ media screen and (max-device-width: 480px) {# veintiseis {color: red}/* Safari 2-3.1 */h TML [xmlns * = ""]: Root # Trece {color: Red}/* Safari 2-3.1, opera 9.25 */* | HTML [xmlns * = ""] # Catorce {color: Red}/* Everything But IE6-8 */: Root *> # Quince {color: red}/* IE7 */* + html # dieciocho {color: Red}/* Firefox only. 1 + */# veinticuatro, X:-moz-any-link {color: Red}/* firefox 3.0 + */# veinticinco, X:-moz-any-link, x: Default {color: Red}/***** attribute hacks ****** // * IE6 */# O NCE {_ color: Blue}/* IE6, IE7 */# Doce {* color: Blue;/* or # color: blue */}/* Everything But IE6 */# diecisiete {color/**/: Blue}/* IE6, IE7, IE8 */# diecinueve {color: blue \ 9;}/* IE7, IE8 */# veinte {color/* \ **/: Blue \ 9;}/* IE6, IE7 -- acts as! Important */# veintesiete {color: Blue! IE;}/* string after! Can be anything */

 

From: http://www.happinesz.cn/archives/1331/