CSS hack and CSS conditional comments

ArticleDirectory

• 1. _ * \ 9! Important
• 2. About! Important and * + html
• 1. Basic usage
• 2. Judge the basic syntax of IE browser
• 3. logical judgment
• 4. Use

If your web site or applicationProgramIt is intended for different browser users, so you may need to use CSS hack and CSS conditional comments. In essence, CSS conditional comments is a type of CSS hack. If the CSS of your web site is not particularly complex, CSS hack can solve the problem of CSS compatibility in the browser. However, if your site has high requirements on user experience or has a very brilliant design, using CSS conditional comments (CSS condition annotation) will be a better choice. To put it simply, CSS hack uses some special characters to distinguish IE6, 7/8, and Firefox. CSS conditional comments loads different CSS files for different browsers (of course, this can also be done using JS ).

I. CSS hack

CSS hack uses some special characters to distinguish IE 6, IE 7, IE 8, and Firefox. the browser will directly filter out unrecognized characters, there are many characters that can be used for CSS hack. Here is a very detailed list. Below I only list some common hack characters.

	IE6	IE7	IE8	Firefox
_	√	×	×	×
*	√	√	×	×
* + HTML	×	√	×	×
! Important	×	√	√	√
\ 9	√	√	√	×
@ Import 'style.css' @ Import export style.css" @ Import url(style.css) @ Import url('style.css ') @ Import url(“style.css ")	√	√	√	√

 

1. _ * \ 9! Important

Differences between Firefox and IE 6

 

 
/* Difference between Firefox and IE 6 */body {background-color: red;/* Firefox */* Background-color: yellow;/* IE6/7 */}
 

 

Differences between Firefox and IE 7

 
/* Difference between Firefox and IE 7 */body {Background: orange; * Background: green ;}
 
 
Differences between IE 7 and IE 6
 
 
 
 
/* Difference IE 7 and IE 6 * // * IE7 green, IE6 blue */body {Background: Green! Important; * Background: Blue ;}
 
 
 
 
 
 
 
 
Differences between IE and Firefox
 
 
/* Difference between IE and Firefox */body {background-color: red;/* all browsers support */background-color: yellow \ 9;/* IE6/7/8 */}
 
 
Difference FF/IE8/IE7/IE6
 
 
/* The difference between IE6/7/8 and other browsers */body {background-color: red;/* all browsers support red display in Firefox */background-color: Green \ 9; /* IE6/7/8ie8 green */* Background-color: yellow;/* IE6/7ie7 yellow */_ Background-color: blue; /* ie6ie6 blue */}
 
 
 
 
 
From the aboveCodeAs you can see, the order of CSS hack writing is firefox <IE8 <IE7 <IE6, which goes from high standards to low standards.
 
2. About! Important and * + html
 
Reference: http://www.neoease.com/css-browser-hack/
 
Priority: (* + HTML +! Important)>! Important> + html
 
 
# Bgcolor {Background: red! Important;/* Other Firefox browsers */Background: Blue;/* IE6 */} * + html # bgcolor {Background: Green! Important;/* IE7 */}
 
Ii. CSS conditional comments
 
Reference: http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/
 
 
Http://www.yaosansi.com/post/1000.html
 
 
Conditional comments contain some judgments. However, these judgments are not executed in JS, but in HTML. The method used is also very simple.
 
1. Basic usage
 
<! -- [If XXX]> here is the normal HTML code <! [Endif] -->
 
2. Judge the basic syntax of IE browser
 
<! -- [If IE]>/If the browser is IE/<! -- [If IE 6]>/If the browser version is IE 6/<! -- [If IE 7]>/If the browser version is IE 7/<! -- [If IE 8]>/If the browser version is IE 8/
 
3. logical judgment
 
Logical judgment is not very common, "!" Often used to judge non-ie browsers
 
LTE: Short for less than or equal to, that is, less than or equal.

LT: Short for less than, that is, less.

GTE: Short for greater than or equal to, that is, greater than or equal.

GT: Short for greater than, that is, greater.

! : It means not equal to, which is the same as the non-equal identifier in JavaScript.
 
 
Example:
 
 
<! -- [If gt ie 6]>/If the IE version is later than 6/<! -- [If lte ie 7]>/If the IE version is earlier than or equal to 7/<! -- [If! IE]>/If the browser is not IE/
 
4. Use
 
 
           
           
           
           
           
           
           
           
           
           
 
 
 
             
            
             
            
             
           >
            -->