Detailed explanation of the classification of css hack and the three methods of css hack

The full text is quoted from here, a great article

• what
  Due to browsers from different manufacturers or different versions of a certain browser ( IE6~IE11, Firefox/Safari/Opera/Chrome, etc.) have different support and parsing of css. At this time, in order to obtain a unified page effect, we need to write specific css styles for different browsers or different versions. This process of writing corresponding css code for different browsers/different versions is called css hack.

• how
  Because different browsers and browser versions have different support and parsing results for css, and css priority The impact on the browser display effect, we can apply different css according to different browser scenarios.

• css hack classification
  has three forms of expression, cssattribute prefix method, selector prefix method, and IE conditional comment method .

• Attribute prefix method (i.e. class internal hack)

• Selector prefix method

• IE conditional comment method
  css hack generally defines CSS that has a wide range of applications and strong recognition capabilities at the front.

• css hack method one: conditional comment method (applicable to IE10 and below, IE10 and later will no longer support conditional comments)

• gt: greater than, select the conditional version or above, excluding the conditional version.
  lt: less than, select the version below the conditional version, excluding the conditional version.
  gte: greater than or equal, select the conditional version or above, including the conditional version.
  lte: less than or equal, select the version below the conditional version, including the conditional version.
  ! : Select all versions except the conditional version, regardless of high or low.

• Conditional comment attributes:

• Example

     <!--[if IE]>
     <p class="p1">只在IE5、6、7、8、9下显示</p>
     <![endif]-->
     <!--[if ! IE]><!-->
     <p class="p5">非IE</p>
     <!--<![endif]-->

  Common comment method in html script ##, the conditional comment method can only be recognized by IE browsers below IE10. For other browsers, they can only see a pair of closed Comments that don't work. For non-IE comments, note that there is a in it, which acts as a closed comment.

     <!--[if IE 6]>
     <p class="p2">只在IE6下显示</p>    
     <![endif]-->
     <!--[if gte IE 6]>
     <p class="p3">只在IE6以上版本</p>    
     <![endif]-->
     <!--[if ! IE 8]>
     <p class="p4">非IE8的的IE浏览器</p>
     <![endif]-->

• css hack method two: intra-class attribute prefix methodThe attribute prefix is ​​to add some attributes to the CSS style attribute name that are only available for specific browsers The hack prefix can only be recognized by the browser and has achieved the expected page display effect.
  The following discussion is about the hack method in standard mode
  

• Rules

  *color: IE5.5, 6, 7
  +color: IE5. 5, 6, 7
  #color: IE5.5, 6, 7
  -color: IE5.5, 6
  ＿color: IE5.5, 6
  Among these, I like to use * and _
  color\0: IE8, 9, 10, 11 (not tested above 12) (Some places here say that OPEN also recognizes it, but I tested it and it doesn’t work, I don’t know)
  color\ 9: IE6, 7, 8, 9, 10 (11 is not supported)
  color\9\0: IE8, 9, 10 (others are not supported)
  \9\0 took the total set
  color :red!important;Increase the priority of this setting
  

• css hack method three: selector prefix method

• Rules

  @media screen\9{……} (only valid for IE6 and 7)
  @media \0screen{……} (only valid for IE8)
  @media \ 0screen\,screen\9{……} (valid for IE6, 7, 8)
  @media screen\0{……} (valid for IE8, 9, 10 only)
  @media screen and (min -width:0\0){……} (only valid for IE9 and 10)
  @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){…… } (valid for IE10,11, the above has not been tested)
  

• hack pros and cons

  Try to avoid using css hack, but in some cases, in order to consider the user experience, implement downward Compatible, use hacks only as a last resort. However, excessive use will cause confusion in the
  html document and increase the burden of management and maintenance.

【Related recommendations】

1.

Free css online video tutorial

2. c

ss Online Manual

3.

php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of the classification of css hack and the three methods of css hack. For more information, please follow other related articles on the PHP Chinese website!