Question

That title isn’t quite as crazy it seems. I promise!!

While researching for another question, I noticed the following in Stack Overflow’s stylesheets:

...
width: auto;
...
width: 650px!ie7;
padding-bottom: 20px!ie7;
...

Is this an odd type of conditional styling? Is this a mistake? Assuming it isn’t a mistake, does this work with all IE versions? Is there a way of specifying that a given rule should only be applied to versions of IE greater than – say – 7?

I have never encountered of this before – I’ve always used conditional comments for IE-specific styles (and for what it’s worth, I prefer keeping all IE-specific styles completely separate).

Answer 1

I have heard of this before, but not with the exact text !ie7.

I found a reference here: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

!ie

Internet Explorer 7 fixed one of the
issues with the !important identifier,
but it still has problems when the
identifier has an error in it. If an
illegal identifier name is used in
place of important, Internet Explorer
7 and below will handle the property
normally instead of failing.
Therefore, in any style declaration
block, you can include properties
intended to only apply to Internet
Explorer and add an !ie identifier.
Almost any word can be used in place
of ie.

The !ie identifier allows the property
to be applied in IE 7 and below. It
may or may not work in future
versions. Warning: this uses invalid
CSS!

So, width: 650px!ie7; will be applied in only IE 7 and below.

The actual text ie7 is not required, but it’s a sensible string to use, to remind people of the purpose behind the hack.