IE, FF, Chrome, and compatibility articles

Source: Internet
Author: User
Document directory
  • 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 code after the browser is eliminated
  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

IE only

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

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: 9px \ 9;/* all ie */
Padding: 8px \ 0;/* The ie8-9 is currently used in IE8 separate 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 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 (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 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 */
[/Css]

Then, we can also find the second method. Use IE comments on the body class instead of adding separate 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:

[Cc lang = "css"]
/***** 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: blue \ 9 ;}

/* IE7, IE8 */
# Veinte {color/* \ **/: blue \ 9 ;}

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.