Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to get HTML5 Boilerplate-style Conditional Comments Working in Slim
doctype html
/[if lt IE 7]
| <html class="ie6">
/[if IE 7]
| <html class="ie7">
/[if IE 8]
| <html class="ie8">
/[if IE 9]
| <html class="ie9">
| <!--[if (gte IE 9)|!(IE)]<!--> <html> <!--<![endif]-->
head
/ various head stuff
body
/ various body stuff
| </html>
@joe1chen
Copy link

joe1chen commented Jul 18, 2012

Thanks for the tip. I tweaked the above code to avoid the non-standard un-indented "head" and "body" and also removed the end "html" tag, which is no longer necessary. The advantage of this is that the "html" tag is now in slim, and can be styled (i.e. adding a class or id to the html tag).

doctype html
/[if lt IE 7]
  | <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7">
/[if IE 7]
  | <html class="ie ie7 lt-ie9 lt-ie8">
/[if IE 8]
  | <html class="ie ie8 lt-ie9">
/[if IE 9]
  | <html class="ie ie9">
| <!--[if (gte IE 9)|!(IE)]<!-->
html
  | <!--<![endif]-->
  head
    / various head stuff

  body
    / various body stuff

@wesbos
Copy link

wesbos commented Jul 22, 2014

Even simpler, just use the /! for an HTML comment:

doctype html
/[if IE 8]
  | <html class="ie8 lt-ie9" lang="en">
/[if IE 9]
  | <html class="ie9" lang="en">
/! [if (gte IE 9)|!(IE)]<!--> <html lang="en"> <!--<![endif]

@arxpoetica
Copy link

arxpoetica commented Aug 22, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment