"Recommended" to talk about CSS Hack and backwards compatibility

Once a person gets used to something it's hard to change, and all sorts of reasons, the new browser more and more, and the old always can not be eliminated. Growth is always faster than the demise of the browser-compatible is becoming a topic of endless conversation. When it comes to browser compatibility, CSS hack is naturally remembered. Today, we usually have a team or will have a team of people in a company to do the same thing, we need to have a uniform standard to carry out coding, to facilitate maintenance. And the solution to the compatibility is one of the most important, to be addressed, which is (must be, because this is the most problematic).

In the resolution of the compatibility method, want to set a unified specification, personally think should be based on the following 3 points as the basic principle:

1. Tradeoff cost: How to quickly clean up useless code after a browser is retired
2. Maintainable: Backward compatibility between resource cost and perfect balance
3. Readable: Labor-saving, easy to remember

Here the cost of the first place, not that we do not want to pursue perfection, but just, too deliberately pursuit of perfection can sometimes hinder our progress, after the cost, should be maintainable and readable, which is essential for teamwork, and the end result is to reduce costs.

Save these three principles first to see how we usually solve the compatibility of the wording (the following will be attached to a detailed list of hack methods):

First, 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 pros and cons of this notation are:

• Advantages: Comprehensive, all kinds of hack have; clean up useless code easy to recognize
• Disadvantage: The selector name is not easy to remember; more code (to repeat the selector)

Second, CSS properties 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 pros and cons of this notation are:

• Advantages: easy to remember; less code
• Cons: Not comprehensive

Third, IE notes

<!--[if Ie]>ie only<! [endif]--><!--[if! Ie]>not ie<! [endif]-->

The pros and cons of this notation are:

• Advantages: safety, backward compatibility good, easy maintenance
• Cons: The use of bad will increase the HTTP request, the use of good code more

Four, browser detection: js/Back-end program judgment

In the case of jquery, check if it is IE6, yes add class= "IE6" if ($.browser.msie && $.browser.version = 6) {     $ (' div '). addclass (' IE6 ');}

The pros and cons of this notation are:

• Advantages: Comprehensive, easy to maintain, high readability
• Cons: Account for resources; Large code size (to override selectors)

4 of the above are our most common methods. Now, let's take the 3 principles that we have in mind and see how we choose. Want time to think about it? Here is a brief look at my choice:

1. Try to use a separate hack so that the maintenance cost is low, the changes will not affect other browsers, and once the browser is eliminated, as long as the search for keywords, you can remove the code in bulk. For example, IE6 's separate hack:_padding:6px;；
2. Backward compatible target: 1 years you want to now the website compatible IE10, who do 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 be released, so, choose ie8+ like padding:8px\0; this hack, in the deletion of other code does not affect the backward compatibility, will be better, and, if IE10 out, once support this hack, and do not have this bug, it may be deleted only affects 2 browser, it will be more convenient;
3. Save as much as you can. If you don't consider the page load speed, regardless of the server affordability, that in the backward compatibility and elimination of the processing could be done very well (from the code), but this in some way, not to do.

Five, the personal recommendation of the wording

Actually can tangle of really many, here combine A-grade browser of kind and hack type, write two kind of personal think more reasonable hack and backward compatibility of writing, only for everybody reference.

Affordable Type: pay attention to individual hack. IE hack more, choose the property hack easy to remember; other browsers hack less, select the block selector hack (recommended)

. sofish{        padding:10px;        padding:9px\9; /* All IE */        padding:8px\0;/* ie8-9 currently applied to IE8 separate hack, 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 all and (-webkit-min-device-pixel-ratio:0) {. Sofis h{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 wording: with IE annotations, all use selector hack (optional recommendation)

HTML: Adding Body class

<!--[if Ie6]><body class= "IE6" ><! [endif]--><!--[if Ie7]><body class= "IE7" ><! [endif]--><!--[If Ie8]><body class= "IE8" ><! [endif]--><!--[If Ie9]><body class= "IE9" ><! [endif]--><!--[if! Ie]><body class= "Non-ie" ><! [endif]-->

Then, from the second way we can also find. Use IE annotations on the body class instead of adding individual <link /> or @import better choices. Although the sub-file is also 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 to a table (via), you can refer to the reference:

Six: Comprehensive list of ie6+/Firefox/webkit/opera CSS hack:

/***** Selector Hacks ******//* IE6 and below */* html #uno {color:red} or *html #uno {color:red}/* IE7 */*+html #dieciocho {color:red} or *:first-child+html #dos {color:red}/* IE7, FF, Saf, Opera */html>body #tres {color:r Ed}/* IE8, FF, Saf, Opera (Everything but IE 6,7) */html>/**/body #cuatro {color:red}/* Opera 9.27 and below, SAFA RI 2 */html:first-child #cinco {color:red}/* Safari 2-3 */html[xmlns*= ""] body:last-child #seis {color:red}/* SAFA RI, Chrome 1+, opera9+, FF 3.5+ */body:nth-of-type (1) #siete {color:red}/* Safari, 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[xml Ns*= ""] #catorce {color: Red}/* Everything but ie6-8 */:root *> #quince {color:red}/* Firefox only.  1+ */#veinticuatro, X:-moz-any-link {color:red}/* Firefox 3.0+ */#veinticinco, X:-moz-any-link, x:default {color: Red}

The rest is not much to say. However, it is important to note that annotations are also essential. Although it is hack, the reality is sometimes much more complicated than imagined, and giving the code a comment is better than words.

Finally, the sentence, I hope to see you a better way!

"Recommended" to talk about CSS Hack and backwards compatibility