How do I do IE conditionals in CSS?

Question

If I want to add padding based on the browser the user is viewing the page in, is there a way in CSS that I can do something like:

if IE do padding:5px; else if not IE do padding 10px;

Answer 1

Here is a great reference: Quirksmode.org Conditional Comments.

Although the control structure is in the markup and not the CSS, it accomplishes your goal and is usually considered the best practice when serving browser-specific stylesheets.

Answer 2

The best-practice way is to have a single stylesheet for IE-only fixes, like so:

<link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie-styles.css" media="screen" type="text/css" />
<![endif]-->

Then just override specific problem-causing styles in the ie-styles.css file.

Answer 3

Target ALL VERSIONS of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

For complete reference on the topic, Chris Coyier: How To Create an IE-Only Stylesheet

Answer 4

Here's a cleaner way to target IE 10+ in CSS only

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  /* IE10+ CSS styles go here */

}

(Source: Phil Newcomer)

Answer 5

Although the IE conditional can be used only in html and not in the CSS, you can use the following in your CSS files for your quick-and-short tests/hacks.

  p {
   /* all browsers */
   background-color: red; 

   /* for IE7 and below - append a * before the property */
   *background-color: blue; 

   /* for IE6 and below - append a _ before the property */
   _background-color: green;
  }

While you can use this for your quick and short requirements, I think, you should follow the suggestion by Mark Hurd given above for production-level heavy codes.

Answer 6

If you don't mind ugliness in your code, you can use something like the Holly hack:

div { padding:5px; }
* html div { padding:10px; }

There's a neat CSS Zen Garden example that does this to present two distinct designs, but I don't recall its name.