11 Vote

CSS Hacks for the Internet Explorer

Tip by NetGuy | 2018-05-18 at 19:29

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.

11 Vote

I want to note several things about this tip. At first these hacks are nice and good, but I would not use them in practice.

Instead, I'd rather plead for conditional comments, which you can apply for example like this:

<!--[if IE]>
It is an Internet Explorer!

<!--[if IE 6]>
It is an Internet Explorer version 6!

<!--[if gt IE 6]>
It is an Internet Explorer higher than version 6!

Second, you're talking about browsers that actually are not in use by anyone nowadays. Even YouTube does not support version 6 of Internet Explorer 6. Why bother to create extra code for versions 5.0 and 5.5 that no one uses today?

And third, you should mention that Internet Explorer for Mac behaves a little differently. Thus, in the examples above, this browser will always accept the color from the first line and not the one assigned by the hack.
2018-05-19 at 10:41

ReplyPositive Negative

About the Author

AvatarThe author has not added a profile short description yet.
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.