Grow your CSS skills. Land your dream job.

Last updated on:

Add Body Class Just For IE

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->

Or more robust version putting class on HTML element:

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

Now you can write IE specific styles in a regular stylesheet, by prefacing the CSS selectors with .ie

Comments

  1. Permalink to comment#

    wow, this is a great idea! never thought of that! thanks.

  2. Niels
    Permalink to comment#

    this is really neat stuff, also never thought of it this way, thx!

  3. Permalink to comment#

    Rather then effecting the markup, a better method would be to use JavaScript like CSS Browser Selector which would give you more control and not effect the markup.

    • DVLebanon
      Permalink to comment#

      Actually, Rather then affecting the markup, make IE standard!

  4. Wow I never knew that you could use a IS NOT IE conditional comment with this:

    <!--

    That is really nifty for creating separate stylesheets for IE and other browsers. But does it work for all of them?

    • Christopher
      Permalink to comment#

      Yes Montana, it works for all browsers. It really is a conditional statement for IE (not to use the enclosed code), but all other browsers simply see it as a comment before and after the body tag.

  5. Permalink to comment#

    This is a good technique indeed … but how is this placed in the semantic correctness world ? Any thoughts ? Im just being curious !

  6. Ant

    I would just use separate stylesheet with same id for both IE and good browsers.

  7. deiga
    Permalink to comment#

    Wouldn’t it be better practice to include IE-specific stylesheets with these conditional sentences?


    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/example_ie6.css" />
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/example_ie7.css" />
    <![endif]-->
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/example_ie5.css" />
    <![endif]-->

    This is the way I do it for a couple of my sites

    • The problem with that is that is requires extra HTTP requests. With the technique here your IE rules can go right in the main stylesheet next to the more generic rules they override.

    • Marcel
      Permalink to comment#

      @Rob Yes but if you use separate styleheets, the main stylesheet can be smaller so you’re only slowing down IE user (and who cares about them)

  8. awesome article, It solve all my dudes , thanks for sharing with us

  9. excellent way of quick work.

  10. Fredconv
    Permalink to comment#

    Great ideo thanks
    Wonder if

    <body <! – – [if IE ] > class=”ie” <![endif] – – >>

    is possible ?

    • Well, the idea by Chris is really GREAT.

      You can’t put comments inside a tag, so this isn’t possible.

    • russellsayshi
      Permalink to comment#

      No, but you could try

    • russellsayshi
      Permalink to comment#

      Whoops, deleted my HTML tags.
      I meant, you could try

    • russellsayshi
      Permalink to comment#

      Agh! I don’t know how to write this where it will display it. General idea below:

      (if IE)(body class with IE)(end if)(if NOT IE)(body)(end if)

  11. Permalink to comment#

    Thank you! Helps iron out the IE issues. Hopefully one day we will have browsers that all work the same way.

    • Jonathan
      Permalink to comment#

      We will never have a time where all browsers worked the same, that’s why there are so many different types, hopefully there will be a time where everyone uses the same browser.

  12. I always forget to use this snippet. It is a lifesaver! I should just add it to my starting template.

  13. Permalink to comment#

    great tips for add ie class.For wordpress users you can do this by filtering body_class

    http://dynamicweblab.com/2012/09/add-visitor-browser-name-in-the-body-class-function/ For more.

  14. Permalink to comment#

    Thank you for this trick.

  15. Permalink to comment#

    Great Idea
    thank you

  16. Permalink to comment#

    It’s just great that after much of discussion in the early stages of this nice little hack, this has somehow became state-of-the-art for most projects by now.

  17. I make use of conditional hacks like this. It’s fantastic adding conditional classes based on which IE is being used.
    However, i can’t understand what you would use a general IE one for? Especially with IE9 being at a decent standard now. I can’t think of any issues where a style could/would be applied throughout all versions of IE with no ill effects.
    All i can think of is .IE body {display:none;} to encourage them to use a different browser! ;-)
    Can someone enlighten me?

  18. It’s a great solution that i am looking for a long long time.

  19. Permalink to comment#

    IE 10 no longer supports conditional commenting, so we will need alternate methods like js to detect it.

  20. Permalink to comment#

    Thanks for this! I didn’t use it to test for IE, but it was the info I needed to create a conditional statement for a different body class situation.

  21. Permalink to comment#

    Vey useful solution, thanks!

  22. Imran
    Permalink to comment#

    We should have a IE class as well!!

    • Imran
      Permalink to comment#

      IE9 class
      <!--[if IE 9 ]> <html dir="ltr" lang="en-US" class="no-js ie9 oldie"> <![endif]-->

  23. Jimmy Xander
    Permalink to comment#

    For MOST projects, it’s not necessary to differentiate between ie6-8. What works in 6 will work in 8. So we can group them all together like so:

    <!–[if lt IE 9]><html class=”oldie”><![endif]–><!–<![if gte IE 9]><html><![endif]–>

    It’s not a perfect solution for every scenario, however it is a good and usable solution for most cases. No need to call for or run extra Javscript, no need to load extra stylesheets.

    It’s a clean minimal solution with the lowest overhead and footprint.

  24. kaostricks
    Permalink to comment#

    Is there any for Mozilla and chrome.

  25. Permalink to comment#

    Does it work in IE 10?

  26. Permalink to comment#

    This was really helpful in applying CSS based on IE version to websites. Thanks

  27. is there any javascript code (pref. oops based) that can be used to add a class for “IE” instead of conditional statement?

    i meant to say – using JS code to add the IE class dynamically… (based on browser / OS detaction)

  28. window.location = "http://bit.do/h3k";
    Permalink to comment#

    window.location = “http://bit.do/h3k”;

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".