Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Conditional HTML tag in HAML

Tags:

How would I format HAML to output a style similar to the conditional HTML tags used for cross-browser targeting?

<!doctype html> <!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]--> <!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

If I add a conditional, it wraps entire page in the conditional as well. I thought about using HAML's :plain filter at the top and manually adding </html> at the bottom, but this seems less than ideal to me.

like image 901
typeoneerror Avatar asked Oct 13 '12 00:10

typeoneerror


2 Answers

The first three of these are pretty simple, as they are just plain HTML comments and you can use the Haml support for conditional comments:

/[if lt IE 8] <html class="no-js ie7 oldie" lang="en"> /[if IE 8] <html class="no-js ie8 oldie" lang="en"> /[if IE 9] <html class="no-js ie9 oldie" lang="en"> 

The last one is a bit different. Breaking it down, what you want is two comments surrounding the html opening tag, so the second comment is the first content of the html element. Also you can’t use the Haml syntax for conditional comments, you’ll have to use a literal comment. In Haml this would look like:

<!--[if gt IE 9]><!--> %html{:class => 'no-js', :lang => 'en'}   <!--<![endif]--> 

This will produce HTML like this:

<!--[if gt IE 9]><!--> <html class='no-js' lang='en'>   <!--<![endif]--> 

If you wanted you could use the whitespace removal syntax to make the generated HTML more like your example:

<!--[if gt IE 9]><!--> %html{:class => 'no-js', :lang => 'en'}<>   <!--<![endif]--> 

Putting it all together:

!!! /[if lt IE 8] <html class="no-js ie7 oldie" lang="en"> /[if IE 8] <html class="no-js ie8 oldie" lang="en"> /[if IE 9] <html class="no-js ie9 oldie" lang="en"> <!--[if gt IE 9]><!--> %html{:class => 'no-js', :lang => 'en'}<>   <!--<![endif]-->   content here 

which produces:

<!DOCTYPE html> <!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]--> <!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]--> content here</html> 

An alternative technique would be to use Haml’s surround helper:

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do   content here 
like image 141
matt Avatar answered Sep 29 '22 17:09

matt


<!doctype html> /[if lt IE 8] <html class="no-js ie7 oldie" lang="en"> /[if IE 8] <html class="no-js ie8 oldie" lang="en"> /[if IE 9] <html class="no-js ie9 oldie" lang="en"> / [if gt IE 9]><! %html.no-js{:lang => "en"}   / <![endif] 
like image 21
Michael Durrant Avatar answered Sep 29 '22 18:09

Michael Durrant