Conditional comments not working for browsers other than Internet Explorer

Question

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<![endif]-->

This piece of code in head tags doesn't works never... why? I have been searching a lot throught internet and everyone says it works... but, actually, in my web-page doesn't. I have used it a lot of times and it worked... but something I should have wrong... Anybody can help me, please? Thanks in advance!

duplicate: http://stackoverflow.com/questions/13785587/if-ie-not-working — Jason P, Jul 14 '13 at 02:50
Only IE can read this, the style will never be applied anywhere. — Alerty, Jul 14 '13 at 03:07
Hi, Jason P, I know it's similar, but there is one of the places where I found it, but, anyway doesn't work. — Marcos Morales Rodrigo, Jul 14 '13 at 03:29
The code, as written, does not execute in IE. You are using !IE, which means "if Not IE". I'm not sure what the value of this is, since IE is the only browser that uses these.. — Erik Funkenbusch, Jul 14 '13 at 03:40
Hi, Mystere Man! Yes, you're right, this piece of code is not for IE, for that reason is !IE tagged. As you can see in the code, there is a couple of uses of rgba, which is not valid in most of the IE versions and it will be changed by another css. Do you think I should write it in another way? Thanks! — Marcos Morales Rodrigo, Jul 14 '13 at 03:57

score 6 · Answer 1 · edited May 23 '17 at 12:19

As posted in this SO answer (that I linked to in the comments):

Browsers other than IE treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

However, when you're targeting a browser that is NOT IE you have to use 2 comments, one before and one after the code. IE will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-IE browsers is therefore:

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

You have this:

<!--[if !IE]>
some stuff
<![endif]-->

which non-IE browsers see as this:

(There's nothing, because it's just a comment to non-IE browsers).

You need this:

<!--[if !IE]-->
some stuff
<!--[endif]-->

so that both the opening and closing tags are fully-contained comments to non-IE browsers, and the style is rendered.

score 1 · Answer 2 · answered Jul 14 '13 at 04:28

What Mystere Man means is that these conditional comments were only supported in versions of Internet Explorer prior to Internet Explorer 10. Since you are saying "apply these styles if it not Internet Explorer" you have a logical impossibility.

I would personally write these as follows-

  <style type="text/css" media="screen">
        .title {
            color: #000000;
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
  </style>

You will notice the extra "color" property of the title class - this will be overridden in browsers that support RGBA (which will use that value instead) but will be a fallback value for those browsers that do not support it. That way all browsers that do not support RGBA (for example Firefox 2 and below) will also have a usable fallback colour. I've not bothered providing a fallback for text-shadow as Internet Explorer 8 and below do not support this property either - your users can live without it.

There is no harm providing a standard CSS property that a browser does not understand, it will simply be ignored by that browser and only used in browsers that do understand it. See more about CSS fallback properties.

If you must use conditional comments to solve this you could look at targeting those versions of Internet Explorer you know do not support RGBa (don't penalise users of Internet Explorer 9 - 11 whose browsers do support the property).

<!--[if lte IE 8]>
<style type="text/css" media="screen">
        .title {
            color: #000000;
        }
</style>
<![endif]-->

Do not do this when fallback properties are a better solution, as in this case.

Hi, pwdst! Very impressive the information you wrote here. I appreciate the information you explained, but, sadly, I have to say that something must be wrong in my browser or whatever because the conditional doesn't work... in any way... it seems be working on yours browsers but not on mine (browser: IE 10 on windows 7 64 bits). I did a workaround asking with jquery if the browser is IE, then add a style which avoid the rgba attribute... it's not the best way, I know, but at the moment is the only one that works. Very, very odd... Thank you! — Marcos Morales Rodrigo, Jul 14 '13 at 04:59
As I stated in the answer conditional comments only work for Internet Explorer versions 9 and below - the comments were deprecated by Microsoft in Internet Explorer 10. I strongly recommend you use fallback colours rather than relying on jQuery for this, and if you are using jQuery at least target only Internet Explorer 8 and below as Internet Explorer 9-11 DO support RGBa. Lastly, if an answer solved your problem on StackOverflow please upvote and/or accept it. Users have given their time freely to help you. — pwdst, Jul 14 '13 at 05:08
Fallback colours way doesn't work either IE or Chrome, for that reasson I cannot vote as solved something that is not solved, because the solution is not that, I didn't compaint when somebody vote negative my question saying it was duplicated when clearly is not, so, please, be calm. I really appreciate your time, as well as other users appreciate my time when I help them, the same as you have done to me. So, thank you very much, but fallback colours doesn't fix the problem and even makes it worse in non-IE browsers. :) — Marcos Morales Rodrigo, Jul 14 '13 at 06:28

score 0 · Accepted Answer · answered Jul 14 '13 at 22:09

I will answer myself because I found the problem, which wasn't anything related with IE selector tag neither rgba attribute in itselves (as somebody said before: IE 10 supports this last one), but with the alpha gradient applied. For some reasson, the alpha value is not rendered very well in IE and it results in a completely different style. Changin the 0 (alpha value) in the font color and playing a little with those color values is possible to get a very similar result in IE and other browsers. So, thank you so much for everyone who has been trying to help me. I hope this helps another person. :)

score -1 · Answer 4 · answered Jul 14 '13 at 03:05

you're missing the [endif]:

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<!--[endif]-->

note: this will apply the style on non-IE browsers. If you wanted to use it on IE browsers, change the !IE to IE

Maybe the <![endif]--> tag is missing in copy-paste, sorry, but in my code is there, BTW, the correct is <![endif]--> not — Marcos Morales Rodrigo, Jul 14 '13 at 03:27

Conditional comments not working for browsers other than Internet Explorer

4 Answers4