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?
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.
for list of conditions:
!!!
:plain
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]--> <!--[if gt IE 9]><!-->
%html.no-js{:lang => 'en'}
/ <![endif]
%head
%title Yinlang
It's been answered, but for those looking for the TL;DR version:
/[if IE]
This will only be rendered in IE
/[if lte IE 8]
This will only be rendered in IE 8 or less
= surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do
This will only be rendered in NON-IE browsers.
I am doing a rails app and I found bit issue following what @matt suggested in his answer, I am finding below issues:
HAML
!!!
= surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do
%html.no-js{:lang => 'en'}
%head
%body
Here is how the browser render the HTML (without ending tag at very end and adds it at declaring line itself)
<!DOCTYPE html>
<!--[if !IE]> --><html class='no-js' lang='en'></html>
<head>..</head>
<body>..</body>
So, here is the code that's working fine for me.
!!!
:plain
<!--[if !IE]><!-->
%html.no-js{:lang => 'en'}
/ <![endif]
