CSS hack and backward compatibility FAQ

Once you get used to something, it's hard to change it, and for all sorts of reasons, there's more and more new browsers, and the old ones can't be eliminated. Growth is always faster than extinction, which makes browser compatibility a topic of endless conversation. When it comes to browser compatibility, CSS hack is naturally remembered by us. Today, we usually have a team or a team of people in a company to do the same thing, we need to have a uniform specification for coding to facilitate maintenance. and the solution to compatibility is (must be, because this is the most easily problematic) one of the most important to solve the specification.

In solving the compatibility method, want to set a uniform specification, the individual thinks should take the following 3 points as the basic principle:

Tradeoff cost: How to quickly clean out unwanted code when the browser is eliminated: backward compatibility between resource cost and perfect balance: Labor-saving, easy to remember

The cost here is the first, not that we don't want to be perfect, but that too much of the pursuit of perfection can sometimes hinder us, and that after the cost, it should be maintainable and readable, which is critical to team cooperation, and the end result is to reduce costs.

First put these three principles aside, to see our usual solution to the compatibility of the writing (followed by a detailed list of hack methods):

A, 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 formulation are:

Advantages: Comprehensive, all kinds of Hack are available; cleaning up useless code is easy to recognize the disadvantage: The selector name is not easy to remember; more code (to repeat the selector) two, CSS properties 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 formulation are:

Advantages: Easy to remember; code less disadvantage: not comprehensive three, ie annotation ie only

　　

The advantages and disadvantages of this formulation are:

Advantages: safe, backward compatible, easy to maintain the disadvantage: the use of bad will increase the HTTP request; The code is more than four, browser detection: js/Back-end program to judge//jquery as an example, detection is IE6, is to add class= "IE6"

if ($.browser.msie && $.browser.version =6) {

$ (' div '). addclass (' IE6 ');

}

The advantages and disadvantages of this formulation are:

Advantages: Comprehensive; easy to maintain; High readability disadvantage: resource; large amount of code (to override selector)

The above 4 kinds are our most common method. Now, let's take the 3 principles that we have in mind and see how we choose. Do you need time to think about it? Here's a quick way to say my choice:

Try to use a separate hack

This maintenance cost is lower, the changes will not affect other browsers, and once the browser is eliminated, as long as the search keyword, you can bulk out the code. For example, IE6 alone hack:_padding:6px;;

Backward-compatible goals: 1 years

Do you want to present the website compatible IE10, who does not want, but this predictability is too low, also can say, the cost is too high. Not necessary for the time being. However, IE9 may have to be released, so it would be better to choose a ie8+ hack like padding:8px, which does not affect backwards compatibility, and if IE10 comes out, once this hack is supported without the bug, it may erase only 2 browsers, will also be more convenient;

Save as much resources as possible

If you don't consider the page loading speed, regardless of server affordability, it can be perfect for backwards compatibility and elimination processing (from the code), but in a way, it is better not to do.

Five, the individual recommended the wording

In fact, can be entangled in a lot, here combined with the type of A-grade browser and hack, write two kinds of personal think more reasonable hack and backward compatibility of the writing, for everyone's reference.

Economic benefits Type: Pay attention to individual hack. The hack of IE is more, the choice is easy to remember the attribute hack, the other browser hack is few, select Block selector hack (recommended)

. sofish {

padding:10px;

padding:9px9;/* All IE *

padding:8px;/* ie8-9 is currently applied to the IE8 alone hack, the situation is relatively 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 annotation, all adopt selector hack (optional recommended)

HTML: Adding the 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 * *

And then, from the second way, we can also find out. Using IE annotations on the body class instead of adding individual or @import will be a better choice. Although the sub file is a good choice, but for the page load speed, HTTP requests can not be wasted.

As for the use of JS or back-end program to judge, unless you have enough resources, unless you can not solve (90% will not happen), otherwise, not recommended. Attached is a table (via), which can be used for reference:

VI: 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 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 * *

#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 an!important * *

#veintesiete {Color:blue!ie}/* string after! can be anything * *

The rest is not much to say. However, it is also important to note that annotations are also significant. Although it is hack, but the reality of the situation is sometimes more complex than imagined, give code a comment, better than words.

Finally, or that sentence, hope to see you a better way!