<!--[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.
wow, this is a great idea! never thought of that! thanks.
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.
Actually, Rather then affecting the markup, make IE standard!
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.
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.
@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)
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.
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.
yeah that would be the best day of our life :D
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!
We should have a IE class as well!!
IE9 class
<!--[if IE 9 ]> <html dir="ltr" lang="en-US" class="no-js ie9 oldie"> <![endif]-->
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.
Is there any for Mozilla and chrome.
Does it work in IE 10?
IE10 doesn’t support conditional comments, so no, it won’t work in IE10 or IE11. You’d have to use User Agent sniffing if you really need to target just IE10 or 11 etc.
Here’s one such solution, if you’d read all he comments you’d have spotted this…
http://www.impressivewebs.com/ie10-css-hacks/
This was really helpful in applying CSS based on IE version to websites. Thanks
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)
window.location = “http://bit.do/h3k”;
What you do? Wanna redirect this page?
This trick doesn’t seem to be valid html, according to w3c http://validator.w3.org/
This tricks is very helpful for me, thanks
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/
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:
And the w3c validator likes it. No errors, no warnings == it’s valid html.