!IE conditional comment using OmniFaces

Question

I'm setting image width based on conditional comments as follows.

<o:conditionalComment if="lte IE 9">
    <style>
        .image-width {
            width: 210px;
        }
    </style>
</o:conditionalComment>

<o:conditionalComment if="!IE">
    <style>
        .image-width {
            width: 216px;
        }
    </style>
</o:conditionalComment>

It works on Internet Explorer (8). IE 8 sets the image width to 210px. The image width on other browsers however, should be set to 216px. The last conditional comment i.e !IE does not function on other browsers (Chrome and FF).

How to apply the width: 216px; style on browsers other than IE?

---

The generated HTML code appears to be correct as follows.

<!--[if lte IE 9]>
    <style>
        .image-width {
            width: 210px;
        }
    </style><![endif]-->

<!--[if !IE]>
    <style>
        .image-width {
            width: 216px;
        }
    </style><![endif]-->

Answer 1

The !IE is somewhat an extreme conditonal comment condition. It's namely utterly useless.

Basically, every browser ignores everything inside comments <!-- ... -->. IE is the only browser which actually interprets the content of comments matching <!--[if ...]> ... <![endif]-->. Note that other browsers don't interpret them and still treat them like <!-- ... -->.

When you use !IE, then IE browser won't interpret the comment's content. But other non-IE browsers also not, for the very simple reason that they don't support conditional comments. In effects, the comment is not being parsed by any browser. It has exactly the same effect as <!-- ... -->. The only feasible reason why !IE condition exists is that Microsoft assumed that "other" browsers would in some future support conditional comments as well (this was after all a severe misassumption; even more, the support for conditional comments is removed since IE10).

In order to achieve your concrete functional requirement, you'd better swap the two style declarations and make the main one non-conditional. In CSS, the latter declared one has higher precedence.

<style>
    .image-width {
        width: 216px;
    }
</style>
<o:conditionalComment if="lte IE 9">
    <style>
        .image-width {
            width: 210px;
        }
    </style>
</o:conditionalComment>

Simple as that. Even IE understands that.

By the way, you'd better use <h:outputStylesheet> resp. <link> elements instead.