Common CSS Hack technology highlights, csshack highlights

Common CSS Hack technology highlights, csshack 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: <! -[If IE]> <! -Your code-> <! [Endif]-> for IE7 or earlier versions: <! -[If lt IE 7]> <! -Your code-> <! [Endif]-> 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 comment Hack */<! -- [If IE]> the content here is only visible to IE <! [Endif] --> <! -- [If IE 6]> the content here is only visible to IE6.0 <! [Endif] --> <! -- [If IE 7]> the content here is only visible to IE7.0 <! [Endif] --> <! -- [If! IE 7]> only IE7 cannot be identified, and other versions can be identified. Of course, IE5 and later are required. <! [Endif] --> <! -- [If gt IE 6]> IE6 and later versions are recognizable, and IE6 cannot recognize <! [Endif] --> <! -- [If gte IE 7]> IE7 and IE7 versions can be identified <! [Endif] --> <! -- [If lt IE 7]> versions earlier than IE7 can be identified, and IE7 cannot. <! [Endif] --> <! -- [If lte IE 7]> versions earlier than IE7 and IE7 are recognizable <! [Endif] --> <! -- [If! IE]> the content here is only non-IE visible <! [Endif] -->

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:

<style type="text/css">.demo{color:red !important;color:green;}</style><div class="demo">www.ido321.com</div>

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:

<style type="text/css"> .demo{ color:red !important; } .demo { color:green; } </style> <div class="demo">www.ido321.com</div> 

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

For the CSS Hack technology,

* Html. test {color: #090;}/* For IE6 and earlier */
* + Html. test {color: # ff0;}/* For IE7 */
. Test: lang (zh-cn) {color: # f00;}/* For IE8 + and not IE */
. Test: nth-child (1) {color: # 0ff;}/* For IE9 + and not IE */

_:
Select IE6 and below. A hyphen (-) can also be used. To avoid confusion with certain properties of a hyphen, it is more appropriate to use an underscore.
*:
Select IE7 and below. Such as: (+) and (#) can be used, but the industry has a higher awareness (*).
\ 9:
Select IE6 +
\ 0:
Select IE8 + and Opera
[; Property: value;];:
Select the webkit core browser (Chrome, Safari ). IE7 and below can also be identified. The three semicolons inside and outside the brackets must be retained. The first semicolon can be any rule or any number of rules.
[; Color: # f00;]; and [color: # f00; color: # f00;]; and [margin: 0; padding: 0; color: # f00;]; is equivalent. The last rule in brackets always takes effect, so the first method is usually the most concise.

CSS hack

Friend:
You should check it out here. Www.52css.com/css/