Bang IE7 - What does it mean?

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.