Is there any way to do "if IE" inside of a CSS file?

Question

I know you can put conditional statements to load different CSS files if you are in Internet Explorer, but can you do this inside of a CSS file?

I have a situation where I want the right margin to be 20 if it's Internet Explorer but 10 if it's any other browser.

Maybe this is somehow doable by misusing IEs #expression syntax? — thejh, Dec 12 '10 at 16:06

score 14 · Accepted Answer · answered Dec 12 '10 at 16:07

14

The easiest way to handle this is with conditions in your HTML that put a div with a specific id around the rest of the page.

<!--[If IE 8]>
<div id="IE8">
<![endif]-->
  .
  .
  .
<!--[If IE 8]>
</div>
<![endif]-->

Then, your CSS can do this:

#IE8 div.whatever { ... }

This sort of makes all those CSS hacks unnecessary.

answered Dec 12 '10 at 16:07

John Fisher

22,355
2
39
64

I like this approach. It's really clean. +1 – BoltClock Dec 12 '10 at 16:11
1

Except that an extra element is added. Preferrably you should do like the HTML boilerplate does, take an existing element and if it's IE add an "IE" class to it. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ – Stephan Muller Dec 12 '10 at 16:24
2

That's a great trick, but it might make your HTML a bit messy when you want to build in exceptions for different IE versions (like IE6 and IE7). – GolezTrol Dec 12 '10 at 16:26
@GolezTrol: You could do the conditional work from the server or with javascript, if you want to keep things clean. – John Fisher Dec 12 '10 at 19:14
I was trying to get around certain CSS attributes that don't work on IE and had problems getting this to work. Found out I was testing in IE11 and conditional statements aren't supported after IE 10...I hate IE – FearlessHyena Sep 05 '14 at 20:08
@SHA1: You can have the server detect the browser and place the approprite wrapper divs around the content, too. – John Fisher Sep 05 '14 at 22:36

score 2 · Answer 2 · edited May 23 '17 at 12:31

There is no official conditional comment syntax for CSS. There are only conditional HTML and JavaScript comments, so get creative with those (John Fisher shows one way).

You could emulate conditional CSS by using the very well-known CSS hacks, but I'd rather not. They could break or otherwise work unexpectedly at any arbitrary version of IE, because hacks are meant to exploit bugs in IE's handling of CSS.

score 2 · Answer 3 · answered Dec 12 '10 at 16:08

There are hacks like this one where using rules that IE fails to interpret means that IE stops processing a rule leaving it safe to use for other browsers.

Like this:

div.iehack { 
  margin-right:20px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  margin-right:10px; 
}

score 0 · Answer 4 · answered Dec 12 '10 at 16:23

You will make a mess of your css files doing these kind of hacks. Better make a separate file for IE. Set the margin to 10 in your general css file, and set it to 20 in your IE specific file, which should be (conditionally) loaded after your general css file. You know how to do this and there's hardly a reason to do it any other way.

Is there any way to do "if IE" inside of a CSS file?

4 Answers4

Linked