CSS Hacks for the Internet Explorer

In this tip I would like to introduce you to the CSS hacks for the Internet Explorer, with which different CSS rules can be defined for different versions of Internet Explorer. Here is the first example:

Rules for IE 7, IE 6 and lower, other browsers

p {
  color: #F00;   /* all browsers */
  *color: #0F0;  /* IE 7 and lower versions */
  _color: #00F;  /* IE 6 and lower versions */
}

These CSS rules for a paragraph p define a font color only for Internet Explorer 7, another font color for Internet Explorer 6 and deeper versions of Internet Explorer, and another color for all other browsers, including Internet Explorer 8.

The principle is this: the interpretation starts with "color: #F00", which all browsers understand. The second line is only understood by IE7, IE6 and lower, which is why the color from the second line is set for these browsers. The third line is no longer understood by IE7, but by IE6 and all lower versions, so we could define three colors for the different versions.

Rules for IE 7, IE 6, under IE 6, other browsers

p {
  color: #F00;   /* all browsers */
  *color: #0F0;  /* IE 7 and lower */
  _color: #00F;  /* IE 6 and lower */
  _co\lor; #FF0; /* IE 6 only */
}

Expanding our hack in that way, we get the opportunity to only address the Internet Explorer 6. The line "IE6 and lower" then only refers to versions under version 6, because only in version 6, the fourth line overwrites all others.

Rules for IE 7, IE 6, IE 5.5, IE 5.0, other browsers

p {
  color: #F00;          /* all browsers */
  *color: #0F0;         /* IE 7 and lower */
  _color/**/: #00F;     /* IE 5.0 only */
  _color:/**/ #FF0;     /* IE 5.5 only */
  _color/**/:/**/ #0FF; /* IE 6 only */
}

In the next step we want different colors for the versions 7, 6, 5.5 and 5 of the Internet Explorer and another color for all other browsers. The example above shows how it works.

In the examples, we always displayed the color of a paragraph differently for different browsers. Of course, such a thing is less common in practice, it is usually more about compensating for errors in the appropriate browser. The examples should only clarify the hacks, which of course you can use with all other CSS properties, too.