Skip to content

Instantly share code, notes, and snippets.

@kmiyashiro
Forked from monokrome/layout2.jade
Created August 11, 2011 18:50
Show Gist options
  • Star 42 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save kmiyashiro/1140425 to your computer and use it in GitHub Desktop.
Save kmiyashiro/1140425 to your computer and use it in GitHub Desktop.
HTML5 Boilerplate Conditional comments in Jade
!!! 5
//if lt IE 7
html(class="no-js ie6 oldie", lang="en")
//if IE 7
html(class="no-js ie7 oldie", lang="en")
//if IE 8
html(class="no-js ie8 oldie", lang="en")
// [if gt IE 8] <!
html(class="no-js", lang="en")
// <![endif]
head
title= title
body!= body
@arxpoetica
Copy link

Here's another take using comments and literals: https://gist.github.com/3879867

@jwerre
Copy link

jwerre commented Dec 27, 2012

I recommend the following since jade renders a closing html tag

!!! 5
//if lt IE 7
    <html class="no-js lt-ie9 lt-ie8 lt-ie7">
//if IE 7
    <html class="no-js lt-ie9 lt-ie8">
//if IE 8
    <html class="no-js lt-ie9">
// [if gt IE 8] <!
html(class="no-js", lang="en")
    // <![endif]
    head

@ghepting
Copy link

Nice improvement @jwerre -- have you attempted to remove the unwanted white space between these at all? I'm fairly confident there isn't really a way to do it, but if there is I'd love to find out as I'm completely OCD about stuff like that :)

@kumarharsh
Copy link

please do note that this behaviour has been ripped out of jade now...

pugjs/pug#1345

Now, you have to just use this:

<!--[if lt IE 8]>
link(rel='stylesheet', href='style-ie8.css')
<![endif]-->

@yamsellem
Copy link

Can you please define 'now'?
Which versions are concerned by the // IE 8 syntax and which are not?

Thanks.

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