internet explorer - "[ !IE]" conditional comments in Haml

Question

In a HAML doc, I have:

/[if IE]
  This is IE
/[if !IE]
  This is not IE

The first conditional evaluates properly in IE (and presumably in Firefox and Chrome, as "This is IE" does not render in those browsers). However, The second conditional does not seem to evaluate properly in Firefox or Chrome, as "This is not IE" is not rendered.

I'm guessing I've done something wrong. Any ideas?

Answer 1

When using IE conditional comments, there are two different types you need to be aware of. First, when the entire content is inside a HTML comment (between <!-- and -->), but IE will read it because of the condition:

<!--[if IE]>
  This is inside a HTML comment, so most browsers will ignore it, but IE will
  interpret it.
<![endif]-->

The other type is not a single comment, but some content that browsers will see, surrounded by two comments that will make IE ignore it:

<!--[if !IE]> -->
  This is not a HTML comment, so browsers should see it, but IE will ignore it.
<!-- <![endif]-->

(SO's code highlighting shows the difference - in the top one everything is grey as it's all comment, but in this one the text is darker as it's not a comment).

The Haml support for IE conditional comments is only useful for creating the first kind, as it is part of the syntax for creating block comments. If you try using it for the second kind (as you have here) you get something like:

<!--[if !IE]>
  This is inside a HTML comment, so other browsers will ignore it.
  IE will also ignore it, as the conditional states !IE.
  So everything ignores it.
<![endif]-->

which is effectively an unconditional comment.

In order to use the [if !IE] type in Haml, you'll probably have to do it manually:

%p Some other content
<!--[if !IE]> -->
%p
  Here's some content that shouldn't appear in IE.
<!-- <![endif]-->

You could also make use of the Haml surround helper, like this:

%p Some other content
=surround '<!--[if !IE]> -->', '<!-- <![endif]-->' do
  %p
    Here's some content that shouldn't appear in IE.

(If you’re using Rails then you’ll need to use html_safe on the strings, i.e. surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do).

If you're using this a lot, it might be worth creating a helper method that wraps this call to surround.