Using Ie Conditional Comments Inside a Stylesheet

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

Conditional comment gt ie 7 breaks chrome and firefox

Conditional comment should only be used to target IE browsers. I don't think any other browsers support this "feature".

I would suggest that you put all your styles into a main style that all browsers can see and then using the conditional statements for pre-IE 8 browsers to add/remove any style declarations that don't work on those browsers.

Conditional stylesheets from Chrome-IE compatibility

As I mentioned in the comments, you missunderstand the conditional option. The IE7 will load both files and invoke the deinitions. For isolationg css style you have to mark the class names with special names.

Here an example:

Imagin there is a css rule:

.headless .content {background-color: yellow;}

All browser will understand this. If you want to change the background only for IE 7 you habe to define the rule as follow:

*:first-child+html .headless .content {background-color: red;}

How does it work:

Chrome browser:

.headless .content is a valid statement for me, so I will invoke it

:first-child+html .headless .content

is an invalid statement for me, so I will ignore it.

IE7:

.headless .content
is a valid statement for me, so I will invoke it

:first-child+html .headless .content
is also a valid statement for me, so I will invoke it either. And because the last statement does always win, I coulor the background red.

The keyword for it "cross browser hacks"

How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

You can use IE conditional comments such as this:

<!--[if IE]>
    According to the conditional comment this is IE<br />
<![endif]-->

So you could use something like this:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 10]>
        <link href="iestyles.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>

You can learn more about them here

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).

Using Ie Conditional Comments Inside a Stylesheet