Common CSS Hack technology highlights

Common CSS Hack technology highlights

Source: http://www.ido321.com/938.html

1. What is CSS Hack?

Different browsers have different parsing results for CSS, which may lead to different page effects of the same CSS output. This requires CSS Hack to solve the local compatibility problem of the browser. This process of writing different CSS code for different browsers is called CSS Hack.

CSS Hack has three common forms: CSS attribute Hack, CSS selector Hack, and IE condition annotation Hack. Hack is mainly used for IE browsers.

1. Attribute-level Hack: for example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores "_", firefox does not know either of them.

2. Select character-level Hack. For example, IE6 can recognize * html. class {}, IE7 can recognize * + html. class {} Or *: first-child + html. class {}.

3. IE condition annotation Hack: IE condition annotation is a non-standard logical statement provided by Microsoft since ie5. For example, for all IE: For IE7 or earlier versions: This type of Hack not only takes effect for CSS, but also for all code written in the judgment statement.

PS: Conditional comments can only be executed in IE browser. This code is used as comments for non-IE browsing. You can load different CSS, JS, HTML, and server code through IE conditional annotations.

Ii. Common CSS Hack

/* CSS Attribute-level Hack */color: red;/* all browsers can recognize */_ color: red;/* Only IE6 recognizes */* color: red; /* IE6, IE7 recognition */+ color: red;/* IE6, IE7 recognition */* + color: red;/* IE6, IE7 recognition */[color: red; /* IE6, IE7 recognition */color: red \ 9;/* IE6, IE7, IE8, and IE9 recognition */color: red \ 0; /* IE8 and IE9 recognition */color: red \ 9 \ 0;/* Only IE9 recognition */color: red \ 0;/* Only IE9 recognition */color: red! Important;/* IE6 not recognized! Important */

-----------------------------------------------------------/* CSS Hack */* html # demo {color: red;}/* Only IE6 recognition */* + html # demo {color: red ;} /* Only IE7 recognition */body: nth-of-type (1) # demo {color: red ;} /* IE9 +, FF3.5 +, Chrome, Safari, and Opera can recognize */head: first-child + body # demo {color: red ;} /* IE7 +, FF, Chrome, Safari, and Opera can recognize */: root # demo {color: red \ 9 ;}: /* Only IE9 recognition */--------------------------------------------------------------/* IE condition annotation Hack */
  
  
  
 
 
 
 
 
 

3. IE6 Pairs! Important Support

! Important is generally used to distinguish IE6 from Firefox and other browsers. Because IE6 does not support it! Important, while Firefox can understand it! Important, which changes the style priority. In fact, IE6 can be recognized in some situations! Important.

For example:

www.ido321.com

In the above Code, the font of FF is red and that of IE6 is green. IE6 is ignored! Important.

Let's take a look:

 
www.ido321.com
 

If IE6 is not recognized! If important is used, the content of the above Code. demo should be displayed in green, but not in red. The content of the. demo is displayed in red, indicating that IE6 is recognized! Important.

The difference between the two cases is that when a selector is used! When important changes the style priority, IE6 is invalid, and the subsequent style overwrites the previous one ,! Important is ignored and used! Import

4. Multiple delimiters under IE6

The method of multi-class selector. For example:

# My. c1.c2 {color: red ;}
. C1.c2 {color: red ;}

The above statements are supported by IE7 +/FF/Opera/Safari and other browsers.

However, in IE6, the last class name will overwrite the previous class name. That is to say, IE6 is interpreted:

# My. c2 {color: red ;}
. C2 {color: red ;}

Likewise:

# My. c1.c2. c3 {color: red ;}
IE6 is understood as # my. c3 {color: red ;}
. C1.c2. c3 {color: red ;}
IE6 is interpreted as. c3 {color: red ;}

Therefore, when using multiple types of combinations in development to achieve css effects, pay attention to IE6. The best way is not to use a combination of classes.

Next article: IE 8 compatibility: Explanation of X-UA-Compatible