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
wow, this is a great idea! never thought of that! thanks.
this is really neat stuff, also never thought of it this way, thx!
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.
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?
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.
This is a good technique indeed … but how is this placed in the semantic correctness world ? Any thoughts ? Im just being curious !
I would just use separate stylesheet with same id for both IE and good browsers.
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.
awesome article, It solve all my dudes , thanks for sharing with us
http://github.com/rafaelp/css_browser_selector
excellent way of quick work.
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.
No, but you could try
Whoops, deleted my HTML tags.
I meant, you could try
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)
Thank you! Helps iron out the IE issues. Hopefully one day we will have browsers that all work the same way.
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.
I always forget to use this snippet. It is a lifesaver! I should just add it to my starting template.
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.
Thank you for this trick.
Thanks.
Great Idea
thank you
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.
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?
It’s a great solution that i am looking for a long long time.
IE 10 no longer supports conditional commenting, so we will need alternate methods like js to detect it.
IE 10 CSS Hacks: http://www.impressivewebs.com/ie10-css-hacks/
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.
Vey useful solution, thanks!