Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"[ !IE]" conditional comments in Haml

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?

like image 441
BronzeGate Avatar asked Feb 02 '12 05:02

BronzeGate


People also ask

How do you comment on HAML?

Haml Comments: -#The hyphen followed immediately by the pound sign signifies a silent comment. Any text following this isn't rendered in the resulting document at all.

What is a HAML file?

Haml (HTML Abstraction Markup Language) is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner.


2 Answers

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.

like image 58
matt Avatar answered Oct 08 '22 00:10

matt


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 
like image 40
Anja Ishmukhametova Avatar answered Oct 07 '22 23:10

Anja Ishmukhametova