Comment mettre une balise html conditionnelle dans jade?

jade je veux mettre dans une balise html conditionnelle comme par cette méthode, ce qui met en 

<!--[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]-->

en haut d'un fichier html.

j'ai essayé 

//[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
    ...

mais jade ignore la balise html, et n'écrit pas à la fin </html> balise. Ceci est invalide html, et les résultats dans IE ne montrent rien du tout.

Est-il possible de faire cela?

je pense que je vais juste utiliser une solution javascript si il n'est pas possible.

26
demandé sur zlog 2011-10-13 20:21:50

7 réponses

cette méthode fonctionne, avec la balise html de fermeture:

!!! 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
https://gist.github.com/kmiyashiro/1140425#comment-675550

mise à Jour:

Comme l'a souligné kumar-dure ce comportement a été déprécié, si vous avez besoin de cette fonctionnalité, vous devriez maintenant l'utilisation régulière html:

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

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

21
répondu Stephen 2017-05-23 11:53:50

C'est ce que vous recherchez, et il donnera aussi la balise html de fermeture.

!!! 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
17
répondu Stacey Cordoni 2013-01-07 14:39:10

utilisez simplement cette syntaxe, en gardant à l'esprit les différentes indentations:

!!! 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
  …
11
répondu Frederic 2011-10-25 18:37:56

dans la version 1.0.0 (publié sur 22 décembre 2013) Jade ne discute plus le contenu des commentaires et le support pour les commentaires conditionnels de IE a été supprimé (//if lt IE 7 ne fonctionne pas comme dans la version 0.35.0 et ci-dessous).

la nouvelle approche consiste à utiliser des commentaires conditionnels bien formatés. Ainsi, pour générer des commentaires conditionnels au-dessus D'IE, le modèle de Jade devra être comme suit:

<!--[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]-->
  ...

notez que les quatre premiers html éléments sont des éléments HTML bien formatés. Le dernier utilise la syntaxe de Jade. Aussi le dernier commentaire <!--<![endif]--> doit être indenté.

avec la version 1.0.0 de Jade et au-dessus, il est sûr D'utiliser les commentaires HTML car Jade ignorera toute ligne commençant par < personnage.

vous pouvez aussi visiter ce post sur IE Commentaires Conditionnels en Jade qui parle de la différence entre Jade version 0.35.0 et 1.0.0. Il montre également l'approche alternative de l'utilisation de Jade mixin mécanisme de commentaires conditionnels.

8
répondu Tom 2014-01-22 15:06:49

à partir de la version 1.0.0, le // if construction n'est pas magique plus. Soit rendre mot à mot HTML (toute ligne commençant par < est transmise telle quelle par Jade) , soit utiliser un mixin, selon le blog de Tom cité dans une autre réponse:

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')
3
répondu DomQ 2014-06-06 15:55:29

Très 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]
1
répondu Ronald Araújo 2015-09-04 16:47:24

autant que je sache, vous ne pouvez pas mettre des balises html comme ça dans jade. pour cela, vous devez inclure un code html ou en utilisant de fuite (.) dans des balises qui prend en charge le texte de la forme:

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

ainsi la balise html ne supporte pas le texte donc vous ne pouvez pas le faire. l'autre solution est la suivante:

-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
-5
répondu Ali Raza 2011-10-13 18:04:18