CODEWITHSUNDEEP
htmlinternet-explorernode.jspug
zlog
zlog

Reputation: 3316

How do I put a html tag conditional in jade?

In jade, I want to put in a html tag conditional as per this method, which puts in 

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

at the top of a html file.

I tried 

//[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]
//[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]
//[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]
//[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]
  head
    ...

but jade ignores the html tag, and doesn't write in the end </html> tag. This is invalid html, and results in IE not displaying anything at all.

Is there any way of doing it?

I'm thinking I'll just use a javascript solution if there isn't a way.

Upvotes: 26

Views: 16976

Answers (7)

Ronald Ara&#250;jo
Ronald Ara&#250;jo

Reputation: 1479

Very simple.

Exemple:

HTML

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->

JADE

//[if lt IE 7]>
  <html class="ie ie6" lang="en"> <![endif]
//[if IE 7]>
  <html class="ie ie7" lang="en"> <![endif]
//[if IE 8]>
  <html class="ie ie8" lang="en"> <![endif]

Upvotes: 1

DomQ
DomQ

Reputation: 4644

Starting at version 1.0.0, the // if construct is not magical anymore. Either render HTML verbatim (any line starting with < is transmitted as-is by Jade) or use a mixin, as per Tom's blog cited in another answer:

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

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

Upvotes: 3

Tom
Tom

Reputation: 26819

In version 1.0.0 (released on 22 December 2013) Jade does not parse comments content any more and support for the IE conditional comments has been removed (//if lt IE 7 will not work as in version 0.35.0 and below).

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

Note that the first four html elements are well formatted HTML elements. The last one uses Jade syntax. Also the last comment <!--<![endif]--> has to be indented.

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 comments.

Upvotes: 8

Stephen
Stephen

Reputation: 631

This method works, with the 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
        title= title

    body!= body

from: https://gist.github.com/kmiyashiro/1140425#comment-675550

Update:

As pointed out by kumar-harsh this behaviour has now been depreciated, if you need this functionality you now should use regular html:

<!--[if IE]>
  <html class="ie">
<![endif]-->
<![if !IE]>
  <html class="not-ie">
<![endif]>
</html>

from: https://github.com/visionmedia/jade/issues/1345?source=cc#issuecomment-31920732

Upvotes: 21

Stacey Cordoni
Stacey Cordoni

Reputation: 171

This is what you're looking for, and it will also give the closing html tag.

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

Upvotes: 17

user409030
user409030

Reputation:

Simply use this syntax, mind the different indentation:

!!! 5
| <!--[if lt IE 7]> <html class="ie6 oldie" lang="en"> <![endif]-->
| <!--[if IE 7]>    <html class="ie7 oldie" lang="en"> <![endif]-->
| <!--[if IE 8]>    <html class="ie8 oldie" lang="en"> <![endif]-->
| <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
head
  …

Upvotes: 11

Ali Raza
Ali Raza

Reputation: 1215

as far as i know you can not put html tags like this in jade. for this either you need to include an html or by using trailing (.) in tags which supports text like:

p. <html><script></script>....

So html tag does not support text so you cant do it. the other solution is:

-if IE==6
    html.ie6
-if IE==7
    html.ie7
-if IE==8
    html.ie8
-if IE==9
    html.ie9
  head
  body
      h1 My sit

Upvotes: -5

Related Questions