CSS Conditional Comments in IE7

Since the release of IE7, Microsoft have put some work into the way it reads CSS code. Whereas before you could get away with using things such as _ before the name or !important, these have no effect in the latest version. Thus people have come to terms with using the [if IE 7] tags in their HTML and creating a second CSS file specifically for IE.

Now I don’t know about you but I HATE this method, especially if you have built an entire site and at the last minute you realise one div tag needs a different property in IE7. It’s just a waste having to create another CSS file for one tag! However I recently discovered that Microsoft have overlooked their whole “no conditional comments in IE” method, because this seems to work…

[sourcecode language='css']
#box {
width: 250px;
padding: 4px;
margin: 0 auto;
color: #fff;
text-align: center;
border: 1px solid #000;
background-color: #ff0000;
background-color: #00ff00 !ie;
}
[/sourcecode]

Did you notice the !ie ?? Yes ladies and gentlemen, you CAN get away with a conditional comment in IE7, it’s nice and simple with no harmful effects.

See a full example of this here.

Now get hacking people!!