IE-only CSS for Your Sanity

I stumbled upon an accident the other day. One of those oh wow moments.  Haven’t you always been a bit ticked off how Microsoft has gone and decided their own way of implementing many things in CSS, deciding to be different where the standard doesn’t specify, if only to be a pain in the….. yeah.

You know the story.  CSS differences between IE and Firefox / Opera / Safari / Chrome / Everyone Else have always been a pain.

Well, as it turns out, most browsers use C-Style comments in their CSS.  C has two style of comments:  /* Like this */ which comments out a block, and // Like This

The above comments everything after the // on the line.

I haven’t found // in the CSS standard, and … IE just ignores these characters.  It proccesses anything after the // as if the // wasn’t there at all.  Other browsers seem to think it’s a comment, and ignore the // and everything after.

In other words if you have this tag:

#myblock {
margin: 0px;
// margin: 10px;
}

IE will use a margin of 10px, and all the other browsers: 0px.

I haven’t tested it out with IE8 yet.  But works in IE6 and 7 which are the biggest pains anyway.

I’ll come up with a better example later but this is HUGE!  Now we can put IE-specific CSS in our CSS files, to make IE do things that the other browsers will just ignore!

Of course, anyone that’s reading this that’s using IE6 or IE7 – UPGRADE.  You are exposing yourself to serious security problems.  Latest news is that these old browsers are susceptible to virus attacks that can take over your machine.  I’ve a mind to make my websites display “Upgrade your browser – You’re in DANGER!” if they are using an old version of IE.

Now, I could do that conditional stuff with just CSS!