CSS Hack Tips Daquan

--Wu Leijun

• Compatibility range:
• Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome

• Resources:

• List of common compatible tags for each tour:

• Mark	IE6	IE7	IE8	FF	Opera	Sarari
  [*+><]	√	√	X	X	X	X
  _	√	X	X	X	X	X
  \9	√	√	√	X	X	X
  /	X	X	√	X	√	X
  @media screen and (-webkit-min-device-pixel-ratio:0) {. bb {}}	X	X	X	X	X	√
  . BB, X:-moz-any-link, X:default	X	√	X	√ (ff3.5 and below)	X	X
  @-moz-document Url-prefix () {. bb{}}	X	X	X	√	X	X
  @media all and (min-width:0px) {. bb {}}	X	X	X	√	√	√
  * +html . bb {}	X	√	X	X	X	X
  Browser Core	Trident	Trident	Trident	Gecko	Presto	Webkit

  (Above. BB can be changed to another style name)

• Note the point:

• Many information on the internet often put!important also as a means of hack, in fact, this is a misunderstanding.!important is often used by us to change the style, not to be compatible with hack. The cause of this misunderstanding is that IE6 in some cases do not actively identify!important, so often misused to identify IE6 hack. However, it is important to note that IE6 is not recognized in some cases (IE6, the same style attribute is defined in the same curly brace, where one plus important important tag is ignored, for example: {background:red! Important Background:green;} IE6 is interpreted as background color green, and other browsers are interpreted as background color red; If the same style is defined in different curly braces, one of the important will important play a normal role, for example: Div{background:red!important } Div{background:green}, when all browsers are interpreted uniformly as background color red. )

• Example Explanation:

• Hack application Scenario (i)

• Scope of application: compatibility between ie:6.0,ie7.0,ie8.0

• Example Description:

• In this example, we use progressive recognition to gradually exclude parts from the population. First, the use of the "\9" Mark, the Internet Explorer is separated from all situations. Then, once again using "+" to separate IE8 and IE7, IE6, at this time, our IE8 has been independently identified.

• Instance code:

• . bb{
  height:32px;
  Background-color: #f1ee18; / * All recognition */
  . Background-color: #00deff \9; /*ie6, 7, 8 identification */
  +background-color: #a200ff; /*IE6, 7 identification */
  _background-color: #1e0bd1; /*ie6 Recognition */
  }
  

  /* A DIV tag for display class BB */

  < div class = "BB" ></ div >

• Hack application situation (II.)

• Scope of application: compatibility between Ie:6.0,ie7.0,ie8.0,firefox

• Example Description:

• It is easy to see that this is the enhanced version of scenario (i) and is applicable to a wider range of environments. In fact, the situation (a) has been done to distinguish Firefox and IE Explorer, now we have to do is to make Firefox from other browsers to recognize again. Look at the code carefully, you will find that the fact that the viewer recognition is very simple. How does Firefox identify? Yes, the pseudo-class support is not widespread in IE, so pseudo-class is a good way. (. Yourclass,x:-moz-any-link, X:default) Note that this distinction pseudo-class is often IE7 can also be recognized, so it is best to identify the IE7 alone, and this method is invalid for ff3.6, Firefox can be used to differentiate @-moz-document Url-prefix () {}

• Instance code:

• . bb{
  height:32px;
  Background-color: #f1ee18; / * All recognition */
  Background-color: #00deff \9; /*ie6, 7, 8 identification */
  +background-color: #a200ff; /*IE6, 7 identification */
  _background-color: #1e0bd1; /*ie6 Recognition */
  }
  . BB, X:-moz-any-link, X:default{background-color: #00ff00;} /*ie7 firefox3.5 and below identification */
  @-moz-document Url-prefix () {. Bb{background-color: #00ff00;}} / * Only Firefox identification */
  * +html. Bb{background-color: #a200ff;} / * Only IE7 recognition * /

  
  

  /* A DIV tag for display class BB */

  < div class = "BB" ></ div >

• Hack application Scenario (iii)

• Scope of application: Compatibility between Ie:6.0,ie7.0,ie8.0,firefox,safari (Chrome)

• Example Description:

• We will now again strengthen our CSS so that it can recognize the Safari (Chrome) browser. This is recognized based on their kernel WebKit, using @media screen and (-webkit-min-device-pixel-ratio:0)

• Instance code:

• . bb{
  height:32px;
  Background-color: #f1ee18; / * All recognition */
  Background-color: #00deff \9; /*ie6, 7, 8 identification */
  +background-color: #a200ff; /*IE6, 7 identification */
  _background-color: #1e0bd1; /*ie6 Recognition */
  }
  @media screen and (-webkit-min-device-pixel-ratio:0) {. Bb{background-color: #f1ee18}}{} /*safari (Chrome) valid */
  . BB, X:-moz-any-link, X:default{background-color: #00ff00;} /*ie7 firefox3.5 and below identification */
  @-moz-document Url-prefix () {. Bb{background-color: #00ff00;}} / * Only Firefox identification */
  * +html. Bb{background-color: #a200ff;} / * Only IE7 recognition * /

  
  

  /* A DIV tag for display class BB */

  < div class = "BB" ></ div >

• Hack application Scenario (iv)

• Scope of application: Ie:6.0+,firefox:2.0+,opera 10.0+,sarari 3.0+,chrome fully compatible

• Example Description:

• The specific code for the instance is listed in the following instance code, which results in the top part of the page, and you can detect the effect from different viewers. This time we basically have all the mainstream of the tour device is compatible, we look at the code. Opera's recognition is partly attributed to the "IE8" Mark, which is only recognized by the two, and the special markings often create our broader hack approach. The following example of the code is more complete, you can choose to reference.

• Instance code:

• <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

  <html xmlns= "http://www.w3.org/1999/xhtml" lang= "gb2312" >
• <head>
• <Meta http-equiv=content-type Content= "text/html; charset=gb2312"/>
• <style type= "Text/css" >

• /***************************************** each browser compatible with CSS **********************************************/
  . Bb{height:32px;background-color: #f1ee18;/* All recognition */background-color: #00deff \9;/*IE6, 7, 8 identification */+background-color: #a200ff;/*IE6, 7 recognition */_background-color: #1e0bd1/*IE6 Recognition */}
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {. Bb{background-color: #f1ee18}}{}/* Valid for Safari (Chrome) */
  @media all and (min-width:0px) {. Bb{background-color: #f1ee18;/*opera and Safari (Chrome) and firefox*/background-color: #4cac70;}/* Only valid for Opera *}}
  
  . BB, X:-moz-any-link, X:default{background-color: #4eff00;/*ie7, Firefox3.5 and below identification */}
  @-moz-document Url-prefix () {. Bb{background-color: #4eff00;/* Only Firefox recognition */}}
  * +html. Bb{background-color: #a200ff;}/* Only IE7 recognition */
  
  /* In general, we distinguish IE7 only with +background-color with _background-color on the line if you have to write. BB, X:-moz-any-link, X:default This code distinguishes between Firefox3.5 and the following Keep in mind that this is also valid for IE7, so rewrite the +background-color again or use the * +html. Bb{background-color:blue;} method is only valid for IE7. can be used@-moz-document Url-prefix () {} method distinguishes all firefox*/independently
  
  . browsers td{width:8%;text-align:center;padding:8px;}}
  . Browsercolor{color: #333; font-size:18px;font-weight:bold;}
  . Ie6{background-color: #1e0bd1}
  . Ie7{background-color: #a200ff}
  . Ie8{background-color: #00deff}
  . Firefox{background-color: #4eff00}
  . Opera{background-color: #4cac70}
  . Other{background-color: #f1ee18;}
  
  #tipTable TD, #tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}
  #wordTable td{margin-left:8px;}
  #firefoxTip {display:none;}
  #firefoxTip, X:-moz-any-link, X:default{display:block;/*ie7 firefox3.5 and the following identify */+display:none/* to differentiate once ie7*/}
  @-moz-document Url-prefix () {#firefoxTip {display:block; /* Only Firefox recognition */}}
  #ChromeTip {display:none;}
  @media screen and (-webkit-min-device-pixel-ratio:0) {#ChromeTip {display:block;}} {} //Safari (Chrome) valid */
  @media all and (min-width:0px) {#ChromeTip {display:none\0;} / * Valid only for Opera */} {}

• </style>
• </head>
• <body>
• <table class= "Browsers" width= "100%" cellspacing= "0" cellpadding= " 0 ">
• <tr>
• <TD>ie6</TD>
• <TD></TD>
• <TD>ie7</TD>
• <TD></TD>
• <TD>ie8</TD>
• <TD></TD>
• <TD>firefox</TD>
• <TD></TD>
• <TD>opera</TD>
• <TD></TD>
• <TD>safari (CHROME) </td>
• <TD></TD>
• </tr>
• <tr class= "Browsercolor" >
• <td Class= "IE6" >ie6</td>
• <TD></TD>
• <td Class= "IE7" >ie7</TD>
• <TD></TD>
• <td Class= "IE8" >ie8</td>
• <TD></TD>
• <td Class= "Firefox" >firefox</td>
• <TD></TD>
• <td Class= "Opera" >opera</td>
• <TD></TD>
• <td Class= "Other" >safari (Chrome) </td>
• <TD></TD>
• </tr>
• </table>
• <div class= "BB" >
• <span style= "display:none;display:block\0;display:none\9;" >opera color is dark green, opera tour is very fashionable. </span >
• <span id= "firefoxtip" >firefox color is light green, Firefox is a very powerful browser. </span >
• <span id= "chrometip" >safari and chrome are golden yellow, Safari and chrome use WebKit kernel </span >

• <!--[if IE 8]>ie8 color is blue, the new version IE8 is a lot of features. <! [endif]-->

• <!--[if IE 7]>ie7 color is purple, IE7 can be used! <! [endif]-->

• <!--[if IE 6]>ie6 color is red, however, IE6 is a bit behind! <! [endif]-->

• </div>
• </body>
• </html>

CSS Hack Tips Daquan