Home/ Questions/Q 8688741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T23:27:10+00:00

How would I format HAML to output a style similar to the conditional HTML

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    • 0