How do I insert multiple conditional comments using Jade?

Question

In Jade, How can I insert multiple conditional comments like the one below?

<!-- Foundation 3 for IE 8 and earlier -->
<!--[if lt IE 9]>
    <link rel="stylesheet" href="/css/foundation3/normalize.css">
    <link rel="stylesheet" href="/css/foundation3/foundation.css">
    <link rel="stylesheet" href="/css/foundation3/app.css">
<![endif]-->
<!-- Foundation 4 for IE 9 and earlier -->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/css/foundation4/normalize.css">
    <link rel="stylesheet" href="/css/foundation4/foundation.css">
<!--<![endif]-->

So far, I tried the following, but it does not create the extra .

//if lt IE 9
    link(rel="stylesheet",href="/css/foundation3/normalize.css")
    link(rel="stylesheet",href="/css/foundation3/foundation.css")
    link(rel="stylesheet",href="/css/foundation3/app.css")
//if gt IE 8
    link(rel="stylesheet",href="/css/foundation4/normalize.css")
    link(rel="stylesheet",href="/css/foundation4/foundation.css")

This will simply wrap each conditional comment block in <!--[if le IE X]> ... <![endif]>. I know I can do this, but is there anything better?

Did you ever get this figured out? – JGallardo Dec 24 '13 at 01:37 — JGallardo, Dec 24 '13 at 01:37

Tom · Accepted Answer · 2014-01-22T12:35:05.703

As the question was asked back in November 2013, I believe you were asking about the old method of generating IE conditional comments by Jade.

I will answer your question giving you the new approach which was introduced in Jade version 1.0.0 (released on 22 December 2013) as you probably use the new Jade version by now.

Note that the old approach (having IE conditional comments generated by Jade comments e.g. //if IE 8) is no longer supported in Jade 1.0.0 and above and there is no intention to put it back.

The new approach is to use well formatted IE conditional comments. So in order to generate above IE conditional comments, Jade template will have to be as follows:

<!--[if lt IE 9]>
link(rel="stylesheet",href="/css/foundation3/normalize.css")
link(rel="stylesheet",href="/css/foundation3/foundation.css")
link(rel="stylesheet",href="/css/foundation3/app.css")
<![endif]-->
<!--[if gt IE 8]><!-->
link(rel="stylesheet",href="/css/foundation4/normalize.css")
link(rel="stylesheet",href="/css/foundation4/foundation.css")
<!--<![endif]-->

The output HTML will be as follows:

<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/foundation3/normalize.css">
<link rel="stylesheet" href="/css/foundation3/foundation.css">
<link rel="stylesheet" href="/css/foundation3/app.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="/css/foundation4/normalize.css">
<link rel="stylesheet" href="/css/foundation4/foundation.css">
<!--<![endif]-->

Note that with Jade version 1.0.0 and above it is safe to use HTML comments as Jade will ignore any line beginning with < character.

You can also visit this post on IE Conditional Comments in Jade which talks about difference between Jade version 0.35.0 and 1.0.0. It also shows alternative approach of using Jade mixins mechanism for conditional formatting.

I hope that will help.

@NightOwl, the reason why I put that was to match HTML code provided in the question. Obviously you can amend your Jade to give you any output you want. — Tom, Jun 12 '14 at 09:55

How do I insert multiple conditional comments using Jade?

1 Answers1