Chrome Conditional Comments

Chrome conditional comments

You can target WebKit based browsers using this in your CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 

Body {}

}

Perhaps this will help?

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.

IE Conditional Comments and Chrome/Firefox

Conditional comments are a Microsoft IE-specific rule, and they are not part of any standard. If you check the structure of a conditional comment:

<!--[if gt IE 7]>
Here is some code.
<![endif]-->

As its name would imply, it is all just a big comment <!-- comment -->. IE checks comments for conditions such as these which, again, do not comply with HTML standards.

To create code which doesn't render in IE, but does render in other browsers, you use the following conditional:

<!--[if !IE]> -->
This will be rendered by anything but IE.
<!-- <![endif]-->

See how the conditions are enclosed in closed comments? That's why that is rendered in normal browsers, while IE checks for the conditional, and decides to omit everything up until the endif.

EDIT

If you want to add another condition, and keep rendering the code on non-IE browsers, you could use the following workaround:

<!--[if gt IE 7]> <!-- -->
Here is some code for anything but IE 7 and below.
<!-- <![endif]-->

Note I had to use open the comment again to prevent IE from rendering --> before the code. Other browsers will still consider it part of the comment.

HTML IE conditional statement: Not working with Chrome/Firefox

You're incorrectly terminating the IE conditional comments on the first line, so other browsers will see the content between the delimiters (you can also see how the text is highlighted black on the first line, which is not what you want):

<!--[if (IE)]>       i am IE <![endif]-->
<!--[if !(IE)]><!--> i am not ie <!--<![endif]-->

The second line is correct since you want to show that content to non-IE browsers.

Updated fiddle

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

Is it possible to use conditional comments from within a Chrome Frame?

The best way to detect that you're in Chrome Frame inside IE is checking for

var isChromeFrame = !!window.externalHost;

This is only available inside Chrome Frame. Currently there are no conditional comments-like construct for Chrome Frame.

More at http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/understanding-chrome-frame-user-agent.

But to your situation, if the user has Chrome Frame installed already and you're triggering it via a chrome=1 flag, then they'll never see any content inside of IE conditional comments.

IE conditional content showing up on chrome mobile

Never mind, I fixed it. Here is the solution:

Original code (outline):

    <!--[if lte IE 8]>
    <div id="section-1">
        CONTENT HERE
    </div><!-- Comment after -->
    <div id="section-2">
        CONTENT HERE
    </div><!-- Comment after -->
<![endif]-->

As the conditional comments create one long comment starting from the "if" and ending with the "endif", by adding comments at the end of "section-1" and "section-2", I was effectively ending the comment at that point rather than at the "endif". Everything after the accidental comment end was being displayed by the browser.

---

Related Topics