How to Do Ie Conditionals in CSS

How do I do IE conditionals in CSS?

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.

Can you use if/else conditions in CSS?

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

<p class="normal">Text</p>

<p class="active">Text</p>

and in your CSS file:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

That's the CSS way to do it.

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

Using IE conditional comments inside a stylesheet

Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.

For instance:

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.

Is there any equivalent to IE conditional comment for chrome and safari?

No, there are not.

You can hack it by doing browser detection in JS and attaching scripts/styles dynamically.

Or, if you are concerned only with having different css for different browsers, you can use css hacks. There are probably css hacks that work with the browsers you need.

Or, if the only thing you need to change is 'width' (of one css definition?) you can probably do it in jquery or javascript

jquery browser detection. see:
http://docs.jquery.com/Utilities/jQuery.browser

Else in html conditional for ie

The  will ensure that other browsers see the content between it and the next <!--. Notice how the syntax highlighter on Stack Overflow does not highlight the content as an HTML comment — that's how you can tell.

A more common variation that's somewhat shorter:

<!--[if gt IE 8]><!-->
  this is all browsers: IE9 or higher, firefox, chrome, etc.
<!--<![endif]-->

Put browser specific condition in CSS selector

Try this out:

*line-height:10px;  //* is hack for IE7
line-height:10px\0/;  //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers 
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    line-height:10px;
}

conditional comments IE 9

Yes, the way you set it up is correct and can be implemented in the <head> of the document.

As mentioned in the MSDN Compatibility documents about conditional comments:

<!--[if expression]> HTML <![endif]-->

is the way to write it. Any HTML element inside can be written, so <style> is valid to use.

<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->

Read more about conditional comments at MSDN or at Quirksmode (with some better examples).