Noscope is a bi-weekly journal serving up snacksized portions of pointless stuff since 2001.
I also do freelance design and usability via dejligt.com

Showing CSS to IE only (The Underscore Hack) [Update]

    13:05 on January 23rd, 2005 , ,

This page details an inline CSS hack for Internet Explorer 6 on Windows.

You can also find an inline CSS hack for Internet Explorer 7.

The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.

Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.

It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.

This is different from conditional comments in the following way:

  • It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
  • It works for IE 5.0, 5.5 and 6.0
  • It’s a hack
  • It’s very simple to work with.

The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:

body {
    background: green; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */
}

Cons

Sample Page

View sample page, including CSS

More Information on CSS filtering

John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:

Managing CSS Hacks

Pings

  1. The Underscore CSS Hack | Blogmarks | Math Jazz
  2. Weon » Blog Archive » Three Great CSS Thingies
  3. Amnesia’s Corner » IE CSS Hack
  4. Scott » Blog Archive » Hacking CSS so only shows on IE
  5. Tims Blog » Blog Archive » Hackery
  6. softyare.com » Blog Archive » Showing CSS to IE only (The Underscore Hack)
  7. GUIWOOD.COM » Blog Archive » IE6 Underscore Hack
  8. Showing CSS to IE only (The Underscore Hack) | Likoma
  9. 3by9 » CSS Hacks Are Just A Way Of Life
  10. nic’s blog » Blog Archive » Apply CSS to IE7 only

Comments

  1. Brian Meidell says:
    March 27th, 2008 at 14:50

    I love this trick, and miss it in IE7 :)

  2. Ciprian Amariei says:
    October 01st, 2008 at 01:03

    nice tip, works in IE7 and IE8 beta 2 ( Browser Mode: IE7 / IE8 compatibility view / IE8 with Document Mode:Quirks ( Page Default ) ) also.

  3. c says:
    October 01st, 2008 at 01:19

    it is compatible with ie7 and ie8 in quirks mode as I mentioned above. This means you need a non valid HTML page :( for this to work.

  4. webdesign says:
    January 23rd, 2009 at 14:09

    Great hack! Nice it works in IE8 too. care if it’s not valid, as long as it works :)

  5. Pratik Chourdia (subscribed) says:
    February 19th, 2009 at 04:43

    Thanks Dear,,,

    Its really works

  6. James John Malcolm says:
    February 20th, 2009 at 17:42

    This is rather outdated. Please, please use conditional comments. They are far, far, less likely to break things in the future. (As long as you don’t target future IE versions)

    Read more about it at sitepoint: http://reference.sitepoint.com/css/conditionalcomments

  7. Prasad says:
    June 10th, 2009 at 10:04

    I’m not able to use this hack, as it is not working with my IE7 version 7.0.5730.11

    How come?

1 2