CSS compatibility ----- Hack and CSS compatibility ----- Hack

CSS compatibility ----- Hack and CSS compatibility ----- Hack

After the National Day, I went out to play and haven't updated my blog for a long time ..

Share a technical blog with you today ..

 

Compatibility in CSS ----- Hack technology Overview

• Compatibility scope:
• IE: 6.0 +, FireFox: 2.0 +, Opera 10.0 +, Sarari 3.0 +, Chrome

• References:

• List of Common Compatibility labels for each Browser:

• Mark	IE6	IE7	IE8	FF	Opera	Sarari
  [* +> <]	√	√	X	X	X	X
  _	√	X	X	X	X	X
  \ 9	√	√	√	X	X	X
  \ 0	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 kernel	Trident	Trident	Trident	Gecko	Presto	WebKit

  (The above. bb can be changed to another style name)

• Note:

• Many documents on the Internet are often used! Important also serves as a hack method, which is actually a misunderstanding .! Important is often used to change styles rather than be compatible with hack. The reason for this misunderstanding is that IE6 does not identify it in some cases! Important, so often misused to identify IE6 hack. However, please note that IE6 is not recognized in some cases (in ie6, the same style attribute is defined in the same braces, when important is added, the important mark is ignored. For example: {background: red! Important; background: green;} ie6 is interpreted as the background color green, and other browsers are interpreted as the background color red. If the same style is defined in different braces, if important is added, important plays a normal role, for example, div {background: red! Important} div {background: green}. In this case, all browsers are interpreted as the background color red .)

• Example:

• Hack Application Scenario (1)

• Applicability: compatibility between IE: 6.0, IE7.0, and IE8.0

• Instance description:

• In this example, we use the progressive recognition method to gradually exclude the local part from the whole. First, cleverly use the "\ 9" mark to separate the IE browser from all situations. Then, use "+" to separate IE8 from IE7 and IE6. At this time, our IE8 has been independently identified.

• Instance code:

• . Bb {
  Height: 32px;
  /* All identifiers */
  ./* IE6, 7, and 8 recognition */
  +/* IE6, 7 recognition */
  _/* IE6 recognition */
  }
  

  /* A div tag whose class is bb */

  <Div class = "bb"> </div>

 

• Hack application situation (2)

• Applicability: compatibility between IE: 6.0, IE7.0, IE8.0, and Firefox

• Instance description:

• You can easily see that this is an enhanced version of situation (1) and is suitable for a wider environment. In fact, situation 1 has also made it possible to distinguish Firefox from IE explorer. Now we have to identify Firefox from other browsers. After you carefully read the code, you will find that the browser recognition is very simple. How does Firefox identify it? By the way, pseudo classes are not widely supported in IE, so pseudo classes are a good way. (. YourClass, x:-moz-any-link, x: default) Note that IE7 can recognize pseudo classes, so it is best to identify IE7 separately, this method is invalid for ff3.6. For firefox, use @-moz-document url-prefix (){}

• Instance code:

• . Bb {
  Height: 32px;
  /* All identifiers */
  /* IE6, 7, and 8 recognition */
  +/* IE6, 7 recognition */
  _/* IE6 recognition */
  }
  . Bb, x:-moz-any-link, x: default {}/* IE7 firefox3.5 and the following identification */
  @-Moz-document url-prefix () {. bb {}}/* firefox only */
  * + Html. bb {}/* Only IE7 recognition */

  
  

  /* A div tag whose class is bb */

  <Div class = "bb"> </div>

 

• Hack application situation (III)

• Applicability: compatibility between IE: 6.0, IE7.0, IE8.0, Firefox, and Safari (Chrome)

• Instance description:

• Now we will reinforce our CSS so that it can recognize the Safari (Chrome) browser. This is identified based on their kernel webkit. Its usage is @ media screen and (-webkit-min-device-pixel-ratio: 0)

• Instance code:

• . Bb {
  Height: 32px;
  /* All identifiers */
  /* IE6, 7, and 8 recognition */
  +/* IE6, 7 recognition */
  _/* IE6 recognition */
  }
  @ Media screen and (-webkit-min-device-pixel-ratio: 0) {. bb {/* safari (Chrome) Valid */
  . Bb, x:-moz-any-link, x: default {}/* IE7 firefox3.5 and the following identification */
  @-Moz-document url-prefix () {. bb {}}/* firefox only */
  * + Html. bb {}/* Only IE7 recognition */

  
  

  /* A div tag whose class is bb */

  <Div class = "bb"> </div>

 

• Hack application situation (4)

• Applicability: IE: 6.0 +, FireFox: 2.0 +, Opera 10.0 +, Sarari 3.0 +, and Chrome compatibility

   

• Instance description:

• The specific code of the instance has been listed in the following instance code. You can use different browsers to check the specific effect at the top of the page. This time, we basically compatible all mainstream browsers. Let's take a look at the code. Opera's recognition is partly due to the "\ 0" mark, which is only recognized by IE8 and Opera. Special marks often create a wider range of hack methods. The Code in the following example is complete. You can select a 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">

• /*************************************** ** Various browsers are compatible with CSS ********************************** ************/
  . Bb {height: 32px; /* all recognition * // * IE6, 7, and 8 recognition */+/* IE6, 7 recognition */_ ">/* IE6 recognition */}
  
  @ Media screen and (-webkit-min-device-pixel-ratio: 0 ){. bb {background-color: # f1ee18 }{}/* Safari (Chrome) Valid */
  @ Media all and (min-width: 0px) {. bb {/* opera and Safari (Chrome) and firefox */}/* only Opera valid */}{}
  
  . Bb, x:-moz-any-link, x: default {/* IE7, Firefox3.5, and the following identification */}
  @-Moz-document url-prefix () {. bb {/* Only Firefox recognizes */}}
  * + Html. bb {}/* Only IE7 recognition */
  
  /* In general, we only need to use + background-color in combination with _ background-color in IE7, if it is necessary to write. code such as bb, x:-moz-any-link, and x: default distinguishes Firefox3.5 from the following, so keep in mind that this method is also effective for IE7, therefore, you need to rewrite + background-color or use * + html. the bb {} method is only valid for IE7. You can use the @-moz-document url-prefix () {} method to differentiate all firefox */
  
  . Browsers td {width: 8%; text-align: center; padding: 8px ;}}
  . Browsercolor {color: #333; font-size: 18px; font-weight: bold ;}
  . Ie6 {
  . Ie7 {background-color: # a200ff}
  . Ie8 {background-color: #00 deff}
  . 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 identification */+ display: none/* differentiate IE7 again */}
  @-Moz-document url-prefix () {# firefoxTip {display: block;/* Only firefox recognizes */}}
  # 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;}/* only valid 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;"> the identification color of Opera is dark green. Is the Opera Browser very fashionable. </Span>
• <Span id = "firefoxTip"> Firefox is light green, and Firefox is a powerful browser. </Span>
• <Span id = "ChromeTip"> the identification colors of Safari and Chrome are golden yellow. Both Safari and Chrome use the Webkit kernel. </span>

• <! -- [If IE 8]> IE8 is blue, but there are many new IE8 features. <! [Endif] -->

• <! -- [If IE 7]> IE7 is purple, and IE7 can be used together! <! [Endif] -->

• <! -- [If IE 6]> IE6 is identified in red, but IE6 is a little behind! <! [Endif] -->

• </Div>
• </Body>
• </Html>