Simplest Css Hack Ever

Posted on

“What?!! the dawn of IE8 is upon us and someone is writing about css hack for IE”

Well… my response is simple, you don’t need to use this it’s just for your knowledge. 😉

I have been using this trick for two years now, as most of the other magical css hack were above my head.

I discovered this accidentally, and it might not be an hack also, but i use it a lot in my work.

So what is this hack?

Simple, just put ‘//’ in front of any valid css declaration, most of the other browser will treat this as comment and ignore it, while our friend Internet Explorer will not treat this as comment and render the property.

<style>

.test{
     color:red;
     //color:green;
}

</style>

<p class='test'>I will be green in Internet Explorer, red in all other browsers</p>

The only thing that you must note is the sequence of statements. The declaration that you want to override in IE should come after the declaration for other browsers. What it means is that if you put the //color:green first in above example then even IE will show the color of text as red.

Example:

I will be green in Internet Explorer, red in all other browsers.


How it works?

The idea is very simple as second line is treated as comment by other browsers like firefox, they simply ignore it. Internet Explorer on the other hand does not treat second statement as comment, so it simply overrides the first statement. The only know limitation is that it does not provide you with any means to differentiate IE6 and IE7

This is kind of interesting, for once i think IE followed the right path while others deviated to make writing comments easier for us developers.

I had googled to check if some one has already written about it, but i was surprised to see that no one had written anything about it, while they have listed all the big and complex hacks.

I thought it must be because this is so simple… or may be nobody ever tried it? who knows?

While writing this post i was even tempted to name this hack as ‘akHack’, and thought better off it.

Any ways I just want to satisfy my curiosity, did you knew about this?

update [10 may]: finally i know the name for this hack it is called Underscore hack, thanks to neil and chris. So what i am using is basically a variation of or extended underscore hack.

26 thoughts on “Simplest Css Hack Ever”

  1. Interesting, I’ve never heard of that before. I’ll have to try it out. Do all other browsers but IE ignore it?

    My favorite hacks are the underscore _ and the star *, but hopefully with IE 8 we won’t need them anymore.

  2. Well, 30% of my visitors are still on IE6, no idea what will make them want to move up to IE 8 if they still don’t know there is an IE 7 our there. SP 3 in XP doesn’t even update the browser.

    That’s a pretty good hack though. I usually just make 3 style sheets, one for real browsers, one for IE 6 and occasionally one for IE 7, then I use IEs

  3. @ryan
    my feeling is that many people are holding out on IE7 because it’s not as good as IE6 is when it comes to user friendliness of the browser. I was one of those users, till windows auto updater, installed IE7 on my machine last december.

    It’s similar to why people are not upgrading from XP to vista.

    I just hope IE8 will be as compelling to normal users as it is to us developers.

  4. // – is not a valid comment mark, according to the W3C spec… and the good browsers are not treating it as a comment.

    Instead they are seeing it as an invalid CSS rule, and ignoring it (which is following the spec).

    I know the difference is small, but it kind of explains how this works… as IE tries to cater for bad developers who make mistakes in code (or even code from bad WYSIWYG editors), it will continue blindly over this.

    Ultimately though, this is yet another thing that IE got wrong, as in the future, when the CSS spec is expanded, these kinds of “I’m going to guess what you mean” type of features found in IE will mean that future rules (CSS3?), instead of being ignored, and hopefully leaving an ugly, but still working site, will be second-guessed by IE5/6/7 and all kinds of weird things will happen in each and every version (all probably doing a different thing based on their own guesswork).

    Oh well… for now though, that does kind of provide a good hack… but, like all hacks, I would advise against you using them. Rather you should write code which is kind of redundant.

    For example, if floating an element with a margin, you might find that the margin value is doubled… instead of putting in a hack to specify a different margin size, you should add the “display: inline” rule… according to the spec, a floated element over-rides the “display” rule, so it shouldn’t (and at the moment doesn’t) effect any other browsers… but for some reason, it gives IE5/6 a little kick (hasPosition), and fixes it’s bug.

  5. @Craig: it’s hasLayout not hasPosition, and as for the main point – you’re right, the “//” style comments is invalid (css won’t validate) and is skipped by modern browsers.

  6. @craig
    you are right ‘//’ it is invalid as far as css specs is concerned, but just for sake of developers i said that it is commented out as this ‘//’ is comment symbol for most of the programming knowledge.

    anyways you explained it well though.

  7. one could replace the // with ##, $$, %%, etc to achieve the same non-valid effect.

  8. Why not use the _ before an element instead.

    height:10px;
    _height:20px;

    Its valid for CSS 2.1 spec and all browsers but IE 6 and 5.5 ignore it.

  9. Look into the underscore (IE 6) and star (IE 7) hacks. They do the same thing you describe but can target versions of IE

  10. @neil & @chris : thanks for pointing out the underscore hack to me. now i know the name of the hack that i was using 😀

    @bobby: you are right.

  11. Pingback: Center align a container in IE | am i works?

  13. conditional comment is a better option, but sometimes using conditional comments could be tedious(say for just changing a margin or width) in that situations i would prefer to use underscore css hack.

  15. hey Thanbks for the info but I think you can even use the !important, It works as this comment like

    .test{
    color:red !important;
    color:green;
    }

    I will be green in Internet Explorer, red in all other browsers

    now FF will take red and IE 6 will take green

  20. You are the coolest person I know right now. I just got IE 8 and was banging my head against a wall trying to optimize a site for all the major browsers and this information seriously made my day. Thank you sooo much for the post!!!!

  21. Pingback: The bestist CSS Hack EVER (desipte it’s imperfections) in conjuction with what I learned about drop down menus and css in IE.

  23. This // hack only work in IE6 not work in IE7, IE8… so please don’t say that this work in all IE. visit this site and know how to work with minimum using HACK as you know that all are not considered best in W3C.
    Satya

  24. Guys always use this code example=position:relative9; before the other hack symbol codes(#abc,_abc,*abc)etc. otherwise it does not work in ie8.

Comments are closed.