Home

How-To: Conditional HTML tag with HAML

Because you're all using HAML, right?

Many of you may have probably seen Paul Irish's clever conditional <html> tag solution which is now part of HTML5 Boilerplate. Yet you may be left wondering how to do this in your HAML templates without making a big mess. Luckily, I've written a simple Rails/Padrino helper for you!

Helper

def conditional_html( lang = "en", &block )
  haml_concat Haml::Util::html_safe <<-"HTML".gsub( /^\s+/, '' )
    <!--[if lt IE 7 ]>              <html lang="#{lang}" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>                 <html lang="#{lang}" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>                 <html lang="#{lang}" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>                 <html lang="#{lang}" class="no-js ie9"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <html lang="#{lang}" class="no-js"> <!--<![endif]-->      
  HTML
  haml_concat capture( &block ) << Haml::Util::html_safe( "\n</html>" ) if block_given?
end

Note: For Padrino you'll have to replace haml_concat with concat_content and capture with capture_html.

Usage

You can choose to pass it a block or not, personally, I prefer not to. Less indenting == more win, as well, the closing </html> tag is optional.

!!! 5

- conditional_html 'en-CA'

%head
  %title Website

%body
  = yield