CSS Hack and backward compatibility Frequently Asked Questions

CSS Hack and backward compatibility Frequently Asked Questions

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:

Weigh costs: How to quickly clear useless code after the browser is eliminated can be maintained: the balance between resource costs and perfection is backward compatible and readable: effort-saving, 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 alland (-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 disadvantages in useless code: the selector name is not easy to remember; a large amount of code (repeated selector writing) II. CSS attribute Hack. sofish {

Padding: 10px;

Padding: 9px9;/* all ie */

Padding: 8px;/* 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 disadvantages: not comprehensive 3. IE comment only

　　

The advantages and disadvantages of this method are:

Advantages: security; good backward compatibility; easy maintenance disadvantages: poor use will increase HTTP requests; good code and more 4. browser Detection: JS/backend program judgment // use jQuery as an example to check whether it is IE6, and 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; high readability disadvantages: Resource occupation; large amount of code (to override 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:

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 ;;

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. Therefore, it would be better to select an IE8 + hack such as padding: 8px; to delete other codes without affecting backward compatibility, if IE10 is released, once this hack is supported, and this bug is not found, it may be easier to delete only two browsers;

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.

Economic practical expression: 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: 9px9;/* all ie */

Padding: 8px;/* The ie8-9 is currently used for IE8 separate hack, the case is less */

* 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 alland (-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 (selective recommendation)

HTML: add body class

<! -- [If IE6] --> <! [Endif] -->

<! -- [If IE7] --> <! [Endif] -->

<! -- [If IE8] --> <! [Endif] -->

<! -- [If IE9] --> <! [Endif] -->

<! -- [If! IE] --> <! [Endif] -->. 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 alland (-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. It is better to use IE comments on the body class instead of adding a separate annotation or @ import. 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. Comprehensive IE6 +/Firefox/Webkit/Opera css hack list:/****** 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 {color: 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 */

Html [xmlns * = ""]: root # trece {color: red}

/* Safari 2-3.1, Opera 9.25 */

* | Html [xmlns * = ""] # catorce {color: red}

/* Everything 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 */

# Once {_ color: blue}

/* IE6, IE7 */

# Doce {* color: blue;/* or # color: blue */}

/* Everything but IE6 */

# Diecisiete {color/**/: blue}

/* IE6, IE7, IE8 */

# Diecinueve {color: blue9 ;}

/* IE7, IE8 */

# Veinte {color/***/: blue9 ;}

/* IE6, IE7 -- acts as! Important */

# Veintesiete {color: blue! Ie;}/* string after! Can be anything */

I will not talk about anything else. However, note that annotations are also important. Although it is a HACK, in reality, the situation is sometimes much more complicated than imagined. It is a thousand words better to give a comment to the code.

Finally, I want to see a better way!