Pressure is nothing more than the shadow of great opportunity. - Michael Johnson

CSS Tip: Targeting IE 5.x, 6 and 7 Separately

8 years, 2 months ago

In rare situations it may be necessary to provide different rules, not only to the Internet Explorer family in general, but also to each individual version. We can combine 3 CSS Hacks to achieve this.

Differentiating between IE 6 and below and IE 7

Firstly we can target IE 6 and IE 7 separately using the underscore hack and far less well documented star property hack (commonly mistaken for the star HTML hack).

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #f60; /* IE 6 and below */
   padding: 7px;
   color: #fff;
}

View Example

In this example all non IE browsers (which also includes Mac IE) see the first background rule. This sets the box colour to blue. Both IE 6 & 7 then see the next rule (prefixed with a star) which overrides the first rule and sets the background colour to red. Finally IE 6 and below also see the final rule (prefixed with an underscore) and set the background colour to orange.

Differentiating between IE 6 and IE 5.x

We can expand on this ruleset by making use of the backslash part of the Simplified Box Model Hack described here. Escaping any letter within the property name which isn't in the range a-f, A-F, 0-9 will hide that rule from IE 5.x. We can therefore define a rule for IE 5.x, which will also be seen by IE 6, and then override that with a backslash commented rule for IE 6.

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #0f0; /* IE 6 and below */
   _bac\kground: #f60; /* IE 6 only */
   padding: 7px;
   color: #fff;
}

View Example

The background colour in IE 5.x will now be green rather than the orange specified for IE 6.

Conditional Comments

Of course IE already provides the ability to target different versions via conditional comments. You should generally favour these over the method described above. There are, however, situations where you may want to consider it, such as when the scope of changes are so small that you don't want to incur the overhead of an additional HTTP request if included in an external file or if don't want to include the IE specific rules inline.

Disclaimer

You should always be careful when implementing CSS hacks and first make sure that the problem you're trying to solve is in fact something that needs hacking around and not something you've implemented incorrectly. Tantek Çelik article on the Web Standards Project Website provides interesting reading on the history of hacks and when and when not to use them.

Comments

  • Nice hack, you can take this a step further for IE 5.0, and IE 5.5 by using comments in your rules. So your example would be:

    .box {
       background: #00f; /* all browsers including Mac IE */
       *background: #f00; /* IE 7 and below */
       _background/**/: #0f0; /* IE 5.0 */
       _background:/**/ #f62; /* IE 5.5 only */
       _background/**/:/**/ #f61; /* IE 6 only */
       padding: 7px;
       color: #fff;
    }

    Andy Beeching - 9th October 2006 #

  • If you're just worried about targeting specific IE versions, conditional comments are probably safer. They've been around since IE 5, and you can even use them to target non-ie browsers using the ! (not) syntax. The official About Conditional Comments page may be of use if you want to dig into the details.

    As an aside, please fix the comment area size (it's tiny! 32 characters across is hardly big enough for writing comments). Also, the cursor is practically invisible because of the gray background color in the comment box. In general, the site could benefit from a little more contrast between text and background color, it's tiring to read more than a few lines on this color scheme.

    Mark Reeder - 9th October 2006 #

  • Andy - thanks for the additional tip, really interesting.

    Mark - re conditional comments, agree to some extent hence the section on them in my post.

    The comment forms definately needs some work and I'll be looking at improving it shortly.

    Ed Eliot - 9th October 2006 #

  • No worries, it's useful for development purposes at least as you can quickly isolate rules down to a particular version, and then stick them in their respective conditional comment stylesheets later (though I only have one and use @import to pull in separate sheets for different browsers)

    Andy Beeching - 10th October 2006 #

  • Thanks for sharing this with us! It is important to know how to feed IE7 only with CSS rules, as I have information that IE7 is not as standard compliant as FF is.

    We will still need to use these hacks... unfortunately...

    Stefan Isarie - 11th October 2006 #

  • Hi

    Can you help me with some advice? I am trying to get this site to look right in IE 5. Another consultant said it was unsupported but i can see other blogs in 5 just fine.

    sorry to be a noob idiot but i am trying to learn as much as fast as i can thank you

    jeff - 1st December 2006 #

  • jeff - which site exactly? IE 5.0 is a really old browser now so it's likely that many sites won't actively support it.

    Ed Eliot - 1st December 2006 #

  • Really interesting and informative, pleased to know the facts.

    Jayanta Banerjee - 9th January 2007 #

  • Man thanks for this info.

    IE hacks make my brain hurt and this probably just saved me a few hours of Google time!

    Ian - 15th February 2007 #

  • This no longer works for me in IE7.

    Jonathan Kemp - 7th February 2008 #

  • This was written ages ago and I have just found it - but it has helped me out of a very sticky situation - excellent - works a treat - just designed a page in FFox on a mac, uploaded and using the hack for IE on PC tested both - the rules applied and it looks grand on both systems and browsers.

    Thank you!

    rachy - 1st April 2008 #

  • Not sure if this is true for everyone... but it appears the Underscore hack is now also being read in IE7 which is not as described above.

    Has anyone else noticed this problem?

    an example:

    old functionality

    width:100px - all browsers 100px _width:80px - both IE7 and IE6 now use this value where previously this only worked for IE6.

    Maybe MS did an update?

    Your thoughts

    MikeB - 15th April 2008 #

  • Thanks for tip Ed, I appreciate. I was looking for a solution like this, instead of classic

    Roma - 4th June 2008 #

  • I know this is an old post but I see the post is still active and people still use these hacks. Wouldn't it be better to make separate style sheets for handicapped browsers and use some (PHP) code to define the users' browser? And if they have any browser lower than IE6, redirect them to a page where you inform them to upgrade :) IE6 is from 2001, so it's 7 years old. Microsoft stopped adding new technology in 2004! And soon they will stop releasing security updates. So do your visitors a favor and inform them to use a save and up-to-date browser. I didn't even mean Firefox or Opera with that ;) You help them and they help you to make your job easier.

    maastrix - 18th October 2008 #

  • Thanks for the tip! :-)

    Jo - 6th January 2009 #

  • Thanks a lot for this tip i was having a problem with it

    Zazoo - 7th January 2009 #

  • I was just looking for an explanation of both star hacks..

    Ionut Popa - 22nd February 2009 #

  • Thanks for this - i have used this page for a while now, and is great for quick fixes/ testing. Thanks.

    Tom Gurney - 23rd March 2009 #

  • Thx, this helped much.

    DarkMetatron - 22nd March 2010 #

  • What about IE 8?

    Jeff - 6th August 2010 #

  • Thanks a lot! I built recently a horizontal drop down menu using jQuery and CSS and I had trouble with IE6 regarding the parent > child selector. I now fixed it by adding an additional CSS code that read only IE6.

    Greetings from Montenegro!

    Kristijan - 11th September 2010 #

  • Very nice & use full code this

    sudharsan - 22nd June 2011 #

  • wonderful css hack with example. thanks.

    baagdi - 31st October 2011 #

  • Truely this example is best example i have found saved, my min 3-4 hrs. Really appricate your work. Have a nice life. love you dude.

    Anant Tiwari (India) - 30th November 2011 #

  • This will grate. Bill Gates the bullshit created damn shit ie with lots of bugs. Even IE cannot install xp or lower versions. bill gates all are shits.

    Isuru Sam - 31st May 2012 #

  • This will grate. Bill Gates the bullshit created damn shit ie with lots of bugs. Even IE 9 cannot install xp or lower versions. bill gates all are shits.

    Isuru Sam - 31st May 2012 #

  • Hi there! Do anyone knows a full description of all browsers hacks? Please, Share with others and me :)

    Michael - 13th June 2012 #

  • nice....

    Sandy - 19th July 2012 #

  • This is very nice tutorial and with example for CSS hack rules. I have read most browser support tutorial here. Hope it might be useful for all you guys.

    Selector Hacks:

    http://mydons.com/browser-specific-css-rules-you-must-memorize-part-1/

    Attribute Hacks:

    http://mydons.com/browser-specific-css-rules-you-must-memorize-part-2/

    Stephen - 5th October 2012 #

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index