Talking about CSS hack writing

【Introduction】

Simple understanding, CSS hack is to make CSS code compatible with different browsers

CSS hack is to let different browsers recognize different symbols by adding some special symbols to CSS styles (there is a standard for what kind of browser recognizes which symbols, CSS hack is to let you remember this standard), In order to achieve the purpose of applying different CSS styles, such as .kwstu{width:300px;_width:200px;}, the general browser will first use the width:300px; style for the element, followed by _width:200px; Since the underline _width can only be recognized by IE6, this style actually sets the width of the object to 200px in IE6, and the latter overwrites the former, and other browsers do not recognize _width and will not execute _width: 200px; this sentence style, so the width of the object set in other browsers is 300px;

【Browser】

Note: The browsers we usually mainly consider are IE6, IE7, IE8, Google Chrome (chrome), Mozilla Firefox (Mozilla Firefox). As for our commonly used Maxthon and QQ TT browsers, use the system installed in your computer It comes with the browser's kernel, so it only needs to be compatible with the above browsers to be compatible with TT\ Maxthon browser.

【List】

(1) 3 kinds of expressions

(2) Writing order

(3) Correspondence table of browser recognition character standard

(4) Introduction to various CSS hacks

【Introduction】

(1) 3 kinds of expressions

There are roughly three forms of CSS Hack: CSS class internal Hack, selector Hack, and HTML header reference (if IE) Hack

①Internal Hack: CSS Hack is mainly aimed at the internal Hack of the class. For example, IE6 can recognize the underscore "_" and asterisk "*", IE7 can recognize the asterisk "*", but cannot recognize the underscore "_", and firefox cannot recognize both know, etc.

②Selector Hack: For example, IE6 can recognize *html .class{}, IE7 can recognize *+html .class{} or *:first-child+html .class{}. etc

③HTML header reference (if IE) Hack: for all IE: <![endif]-->, for IE6 and below: <! --[if lt IE 7]><![endif]-->, this kind of Hack is not only effective for CSS, but also for all code written in the judgment statement

(2) Writing order

The writing order is generally to write the CSS of the browser with strong recognition ability at the back. They will be introduced in sequence later.

(3) Correspondence table of browser recognition character standard

The main situations are:

①Most special characters are supported by IE browsers, but not supported by other mainstream browsers such as firefox, chrome, opera, and safari (except for opera recognition).

②\9 : All IE browsers support

③_and-: only supported by IE6

④*: IE6, E7 support

⑤\0: IE8, IE9 support, opera partial support

⑥\9\0: IE8 partial support, IE9 support

⑦\0\9: IE8, IE9 support

(4) Introduction to various CSS hacks

1. Difference between IE and non-IE browsers

#tip{
background:blue;/*Non-IE background blue because all browsers can interpret it*/
background:red\9;/*IE6, IE7, IE8, IE9 background red because \9 can be recognized in IE6.7.8.9,
                  Overriding the above styles IE10 and 11 should not be recognized, IE11 test is determined */
}

2. Difference between IE6, IE7, IE8, FF

[Difference symbols]: "\9", "*", "_"

#tip{
background:blue;/*The Firefox background turns blue all browsers support*/
background:red\9;/*IE8 background turns red IE6, 7, 8, 9 support overriding the above styles*/
*background:black;/* IE7 background becomes black IE6, 7 support to cover the above style again*/
_background:orange;/* IE6 background turns orange, tight IE6 support overwrites the above style again*/
}

【Explanation】: Because IE series browsers can read "\9", while IE6 and IE7 can read "*" (meter size), and IE6 can recognize "_" (underline), so you can write them down in order, and you will Let the browser correctly read and understand CSS syntax, so you can effectively distinguish between IE versions and non-IE browsers (such as Firefox, Opera, Google Chrome, Safari, etc.)

3. Difference between IE6, IE7, Firefox (method 1)

[Difference symbols]: "*", "_"

#tip{  
background:blue;/*Firefox background turns blue*/  
*background:black;/*IE7 background becomes black*/  
_background:orange;/* IE6 background turns orange*/  
}

【Explanation】: IE7 and IE6 can read "*" (meter size), IE6 can read "_" (bottom line), but IE7 cannot read "_", as for Firefox (non-IE browser), it is completely unrecognizable "*" and "_", so you can distinguish IE6, IE7, Firefox through such differences

4. Difference between IE6, IE7, Firefox (method 2)

[Difference symbols]: "*", "!important"

#tip{  
background:blue;/*Firefox background turns blue*/  
*background:green!important;/*IE7 background turns green*/  
*background:orange;/* IE6 background turns orange*/  
}

[Explanation]: IE7 can recognize "*" and "!important", but IE6 can only recognize "*", but cannot recognize "!important", as for Firefox, it can read "!important" but cannot recognize "*", so it can Through such differences to effectively distinguish IE6, IE7, Firefox.

5. Summary of hack in IE browser

element{
color：#666\9； //IE8 IE9
* color：#999；   //IE7
_color:#EBEBEB； //IE6
}

It can be seen that IE8 and IE9 cannot be distinguished by character recognition, and we can distinguish from the identification of pseudo-classes

element{
color：#666\9；      //IE8
* color：#999；        //IE7
_color:#EBEBEB；      //IE6
}
:root element{color：#666\9;}//IE9

【Explanation】: The ":root" pseudo-type IE series is only supported by IE9, and other mainstream browsers support it. Use this to distinguish IE8 from IE9. In addition, considering the partial support of opera, it fully supports: root, so do not use

Talking about CSS hack writing

Guess you like