Detailed CSS hack classification and CSS hack three ways

Full text quote from here, great article

• What
  Because of different vendors ' browsers or different versions of a browser (ie6~ie11,firefox/safari/opera/chrome, etc.), the support and parsing of CSS is not the same. At this point, in order to obtain a unified page effect, we need to write a specific CSS style for different browsers or different versions, the process of writing the corresponding CSS code for different browsers/different versions is called CSS hack.

• How
  Because of the different browsers and browser versions of CSS support and parsing results are not the same, and CSS priority on the effect of the browser display, we can apply different CSS for different browser scenarios.

• CSS hack categories
  There are three forms of representation, CSS attribute prefix method, selector prefix method, and IE conditional annotation method.

• Attribute prefix method (i.e., intra-class hack)

• Selector Prefix method

• IE Conditional annotation method
  CSS hack is generally a wide range of applications, the ability to identify a strong CSS defined in front.

• CSS hack method One: Conditional annotation method (for IE10 below, IE10 no longer supports conditional comments)

• Gt:greater than, select the condition version above, and do not include the conditional version.
  Lt:less than, select the following version of the condition version, and do not include the conditional version.
  Gte:greater than or equal, select the condition version above and include the conditional version.
  Lte:less than or equal, select the following version of the condition version, including the conditional version.
  ！ : Select all versions except the conditional version, regardless of high or low.

• Conditional Comment Properties:

• Instance

     <!--[if ie]>   <p class= "P1" > Show only IE5, 6, 7, 8, 9 </p>   <![ Endif]-->   <!--[if! ie]><!-->   <p class= "P5" > Non-ie</p>   <!--<![ Endif]-->

  The usual annotation method in HTML script <!-- --> , conditional annotation method only can be recognized by IE browser below IE10, for other browsers you can only see a pair of closed comments that do not work. For non-IE comments, note that there <!--> is a closed comment on the role.

     <!--[if IE 6]>   <p class= "P2" > Show </p> IE6 only under <![       Endif]-->   <!--[if GTE IE 6]>   <p class= "P3" > Only in IE6 version </p>       <![ Endif]-->   <!--[if! IE 8]>   <p class= "P4" > Non-IE8 of IE browser </p>   <![ Endif]-->

• CSS hack mode two: attribute prefix method in class
  The attribute prefix is the hack prefix that is added to the CSS style property name, which is only recognized by a specific browser, and has achieved the desired page presentation effect.
  The hack method in standard mode is discussed below

• Rules
  *color:ie5.5, 6, 7
  +color:ie5.5, 6, 7
  #color:ie5.5, 6, 7
  -color:ie5.5, 6
  _color:ie5.5, 6
  In these few, I like to use * and _
  COLOR\0:IE8, 9, 10, 11 (more than 12 not measured) (here are some places to say that open gate also recognized, but I test, no matter, do not know AH)
  COLOR\9:IE6, 7, 8, 9, 10 (11 not supported)
  COLOR\9\0:IE8, 9, 10 (others not supported)
  \9\0 takes a common set
  Color:red!important; Increase the priority of this setting

• CSS hack way three: selector prefix method

• Rules
  @media screen\9{...} (Valid only for IE6, 7)
  @media \0screen{...} (only valid for IE8)
  @media \0screen\,screen\9{...} (Effective for ie6,7,8)
  @media screen\0{...} (Valid only for IE8, 9, 10)
  @media screen and (min-width:0\0) {...} (valid only for ie9,10)
  @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {...} (Valid for ie10,11, not measured above)

• Hack pros and cons
  Try to avoid using CSS hack, but in some cases it is necessary to use hack in order to achieve compatibility with the user experience. However, excessive use can cause HTML documents to become cluttered, increasing the burden of management and maintenance.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial