IE conditional statements in Jade template engine

问题

How can I convert following IE conditional statements in JADE language :

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

I have tried following but it is not working:

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

It is showing following output :

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

Can some one guide me how it can be rectified.

回答1:

Support for the //if IE 8 conditional comment syntax was removed few months ago: Git Commit
Version 0.35 was the last version to support them; v1.0 is the first release after the removal.

I've been using the literal style @Jayram uses; only differences being conditional logic à la h5bp and the closing html tag:

| <!--[if IE 8]>         <html lang="en" class="lt-ie9"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

Note: Remember to close the document with | </html> since the initial html tag is not Jade's self-closing syntax.

回答2:

This code should work as expected. It works with Jade version up to 0.35.0.

Please note that the last html element needs to be proper Jade element (that's why attributes are inside parentheses (...)). The first two elements are parts of comments and therefore should be formated as formatted HTML elements.

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

Output in a page is as follows:

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

EDIT

As of version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and dropped support for IE conditional comments.

The new approach is to use well formatted IE conditional comments. It is safe to do so as now Jade ignores any line beginning with <.

Your code can 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]-->

Note that html element will be handled by Jade (with all its features e.g. set class name from a request handling method) so you should NOT append | </html> at the end of your Jade file.

You can also refer to IE Conditional Comments in Jade Template Engine post for alternative of using Jade mixing with IE conditional comments.

I hope that will help.

回答3:

Use it like this. This works for me.

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

来源：https://stackoverflow.com/questions/20853844/ie-conditional-statements-in-jade-template-engine

标签

node.js

express

pug