Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is CSS Hack technology". In daily operation, I believe many people have doubts about what is CSS Hack technology. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what is CSS Hack technology"! Next, please follow the editor to study!

What is CSS Hack?

The parsing results of CSS are different in different browsers, so the page effect of the same CSS output is different, which requires CSS Hack to solve the local compatibility problem of the browser. The process of writing different CSS code for different browsers is called CSS Hack.

There are three common forms of CSS Hack: CSS attribute Hack, CSS selector hack, and IE conditional comment Hack. Hack is mainly aimed at IE browsers.

1. Attribute-level Hack: for example, IE6 can recognize underscores "_" and asterisks "*", IE7 can recognize asterisks "*", but can not recognize underscores "_", and firefox can not recognize either.

2. Select symbol-level Hack: for example, IE6 can recognize * html .class {}, IE7 can recognize * + html .class {} or *: first-child+html .class {}.

3. IE conditional comment Hack:IE conditional comment is a non-standard logic statement provided by Microsoft since IE5. For example, for all IE:, for IE6 and the following versions: this type of Hack works not only for CSS, but also for all code written in the judgment statement.

PS: conditional comments can only be executed in IE browsers, and this code is ignored as comments under non-IE browsing. You can load different CSS, JS, HTML, server code, and so on through IE conditional comments.

Second, the commonly used CSS Hack

The code is as follows:

/ * CSS attribute level Hack * /

Color:red; / * all browsers can recognize * /

_ color:red; / * only IE6 recognition * /

* color:red; / * IE6, IE7 identification * /

+ color:red; / * IE6, IE7 Identification * /

* + color:red; / * IE6, IE7 recognition * /

[color:red; / * IE6, IE7 Identification * /

Color:red\ 9; / * IE6, IE7, IE8, IE9 recognition * /

Color:red\ 0; / * IE8, IE9 Identification * /

Color:red\ 9\ 0; / * only IE9 recognition * /

Color:red\ 0; / * only IE9 recognition * /

IE6 does not recognize! important*/

/ * CSS selector level 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, Opera can recognize * /

Head:first-child+body # demo {color:red;} / * IE7+, FF, Chrome, Safari, Opera can recognize * /

: root # demo {color:red\ 9;}: / * only IE9 recognition * /

/ * IE condition Notes Hack * /

Third, IE6's support for! important

! important is generally used as a basic Hack technique to distinguish browsers such as IE6 and Firefox. Because IE6 does not support! important, and Firefox can read! important, it changes the priority of the style. In fact, IE6 can also know important in some cases.

For example:

The code is as follows:

.demo {

Color:red! important

Color:green

}

Www.yisu.com

The above code is red under FF and green under IE6. It shows that IE6 ignores the existence of important.

Let's take another look:

The code is as follows:

.demo {color:red! important;}

.demo {color:green;}

Www.yisu.com

If IE6 does not recognize! important, the content of the above code .demo should be displayed in green, but it is not. The content of .demo is shown in red, indicating that IE6 recognizes! important.

The difference between the two cases is: when in a selector, use! important to change the style priority, the IE6 is invalid, the latter style overwrites the front,! important is completely ignored, use! import

4. Multiple selector under IE6

The writing of multi-class selectors. For example:

The code is as follows:

# my.c1.c2 {color:red;}

.c1.c2 {color:red;}

The above writing is supported in browsers such as IE7+/FF/Opera/Safari.

However, in IE6, the latter class name overrides the previous class name, that is, the above example is understood by IE6 as:

The code is as follows:

# my.c2 {color:red;}

.c2 {color:red;}

By the same token:

The code is as follows:

# my.c1.c2.c3 {color:red;}

IE6 is understood as # my.c3 {color:red;}

The code is as follows:

.c1.c2.c3 {color:red;}

IE6 is understood as .c3 {color:red;}

So when you use multiple classes to combine to achieve css effects, pay attention to this problem of IE6. The best way is not to use the form of class combinations.

At this point, the study of "what is CSS Hack technology" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.