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. User Avatar
    szek
    Permalink to comment#

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

  2. User Avatar
    Niels
    Permalink to comment#

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

  3. User Avatar
    Nathan
    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.

    • User Avatar
      DVLebanon
      Permalink to comment#

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

    • User Avatar
      Matt
      Permalink to comment#

      If we were to have a standard browser, then please-oh-please, don’t let it be the pitiful debacle known as IE; which doesn’t even support many of the latest standards.

  4. User Avatar
    Montana Flynn
    Permalink to comment#

    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?

    • User Avatar
      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. User Avatar
    mysticpixels
    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. User Avatar
    Ant

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

  7. User Avatar
    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

    • User Avatar
      Rob Fletcher
      Permalink to comment#

      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.

    • User Avatar
      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)

    • User Avatar
      Emmanuel
      Permalink to comment#

      Deiga , I read your comment on the site and am new in web designing . I will like to have you as a teacher . I would be grateful if you could help.

  8. User Avatar
    nudier mena
    Permalink to comment#

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

  9. User Avatar
    Shami Photos

    excellent way of quick work.

  10. User Avatar
    Fredconv
    Permalink to comment#

    Great ideo thanks
    Wonder if

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

    is possible ?

    • User Avatar
      Umar Farooque
      Permalink to comment#

      Well, the idea by Chris is really GREAT.

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

    • User Avatar
      russellsayshi
      Permalink to comment#

      No, but you could try

    • User Avatar
      russellsayshi
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Megan
    Permalink to comment#

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

    • User Avatar
      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.

    • User Avatar
      frank
      Permalink to comment#

      yeah that would be the best day of our life :D

  12. User Avatar
    Art Webb
    Permalink to comment#

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

  13. User Avatar
    Maidul
    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. User Avatar
    Rahnamafard
    Permalink to comment#

    Thank you for this trick.

  15. User Avatar
    aminner
    Permalink to comment#

    Great Idea
    thank you

  16. User Avatar
    Stefan
    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. User Avatar
    shane prendergast
    Permalink to comment#

    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. User Avatar
    Joel Norman
    Permalink to comment#

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

  19. User Avatar
    Chris
    Permalink to comment#

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

  20. User Avatar
    Donna
    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. User Avatar
    Ben
    Permalink to comment#

    Vey useful solution, thanks!

  22. User Avatar
    Imran
    Permalink to comment#

    We should have a IE class as well!!

    • User Avatar
      Imran
      Permalink to comment#

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

  23. User Avatar
    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. User Avatar
    kaostricks
    Permalink to comment#

    Is there any for Mozilla and chrome.

  25. User Avatar
    Ashok
    Permalink to comment#

    Does it work in IE 10?

  26. User Avatar
    Kavyansh
    Permalink to comment#

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

  27. User Avatar
    tarun
    Permalink to comment#

    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. User Avatar
    window.location = "http://bit.do/h3k";
    Permalink to comment#

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

  29. User Avatar
    Henrik
    Permalink to comment#

    This trick doesn’t seem to be valid html, according to w3c http://validator.w3.org/

  30. User Avatar
    Prakhar Maheshwari
    Permalink to comment#

    This tricks is very helpful for me, thanks

  31. User Avatar
    Abbas Haroon
    Permalink to comment#

    That’s is one kind of approach, besides that, You can include a css file just for IE, or can use special characters as prefix to css properties which will only work in IE or You can use media Queries to use CSS properties only for IE browsers. They can be even used for separate versions of Internet Explorer. Here is a detailed article about it http://abbasharoon.me/css-hacks-for-internet-explorer/

  32. User Avatar
    André Wessel

    Hey guys,
    I am aware of the fact that I am replying to a very old comment. But maybe this will save someone some time.
    Henrik wrote that the html of the above css-trick isn’t valid using the w3c validator. I just checked it with this snippet:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Foo</title>
      </head>
    <!--[if IE ]>
       <body class="ie">
    <![endif]-->
    <!--[if !IE]>-->
       <body>
    <!--<![endif]-->
    </body>
    </html>
    

    And the w3c validator likes it. No errors, no warnings == it’s valid html.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag