Tom's Blog Various aspects of programming

Rendering IE conditional comments with Jade or Pug

3 min read

Details on rendering conditional comments for IE browser in Jade or Pug template engine in Node.js

Jade template engine was designed primarily for server-side templates in Node.js. It is only intended to produce XML like documents, e.g., HTML, etc. It is whitespace sensitive, so there’s no need to close your tags; Jade does that for you.

Sometimes it might be difficult to find out the syntax to generate content which is not very XML like. One of the examples might be IE conditional comments which are quite common in HTML pages. So let’s say, we would like to include a specific class in html element depending on IE version e.g.

<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
  ...
</html>

Jade version 0.35.0 and below

Jade template snippet generating above IE conditional comments is as follows:

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

Note that the first two html root elements are formatted as HTML code - they are part of the comment and should not be modified by Jade. The last html, on the other hand, leaves formatting (and generating the closing </html> tag) to the engine.

Jade version 1.0.0 and above

As of version 1.0.0 (released on 22 December 2013), Jade does not parse comments content anymore. Also, support for the IE conditional comments has been removed, i.e., expressions like //if IE 8 will generate standard HTML comment now (<!--if IE 8 ... -->).

You can read more about changes implemented in Jade version 1.0.0 here.

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 IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if !IE]><!-->
html(lang="en")
  <!--<![endif]-->

Jade will ignore any line beginning with <. The new approach matches the HTML syntax so it will be well understood by anyone reading it.

Jade mixins

In some cases, the Jade mixins mechanism can do a great job with IE conditional comments. Let’s say we want to put some HTML code for specific IE version. Following code snippet would do the trick:

mixin ie(condition, content)
  | <!--[!{condition}]>!{content}<![endif]-->

doctype html
html
  head
    title= title
    +ie('if IE 8', '<link href="/stylesheets/style.css" rel="stylesheet"></link>')
  body
    block content

Rendered HTML would contain properly formatted IE conditional comment like:

<!--[if IE 8]><link rel="stylesheet" href="/stylesheets/style.css" /><![endif]-->

We could also let Jade format conditional HTML for us like in this example:

mixin ie(condition)
  | <!--[!{condition}]>
  block
  | <![endif]-->

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    +ie('if IE 8')
      link(rel='stylesheet', href='/stylesheets/style-ie8-1.css')
      link(rel='stylesheet', href='/stylesheets/style-ie8-2.css')
  body
    block content

Rendered HTML (conditional comments part) would be like:

...
<!--[if IE 8]>
  <link rel="stylesheet" href="/stylesheets/style-ie8-1.css" />
  <link rel="stylesheet" href="/stylesheets/style-ie8-2.css" />
<![endif]-->
...

I hope this post will help you out to choose the correct approach for your IE conditional comments which sometimes is not that trivial task.