web-dev-qa-db-fra.com

Comment mettre une balise html conditionnelle en jade?

Dans jade , je veux insérer une balise html conditionnelle selon cette méthode , qui met

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

au sommet 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 dans la balise finale </html>. Ceci est un code HTML invalide et entraîne IE ne rien afficher du tout.

Y a-t-il un moyen de le faire?

Je pense que je vais utiliser une solution javascript s'il n'y a pas moyen.

htmlinternet-explorernode.jspug
26
zlog

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

à partir de: https://Gist.github.com/kmiyashiro/1140425#comment-675550

Mettre à jour:

Comme indiqué par kumar-harsh ce comportement est désormais amorti. Si vous avez besoin de cette fonctionnalité, vous devez maintenant utiliser le langage HTML normal:

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

C’est ce que vous cherchez, et cela donnera également le tag 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
Stacey Cordoni

Utilisez simplement cette syntaxe, en tenant compte de l'indentation différente:

!!! 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
Frederic

Dans la version 1.0.0 (publié le 22 décembre 2013 ), Jade n’analyse plus le contenu des commentaires et le support des commentaires conditionnels IE a été supprimé (//if lt IE 7 ne fonctionnera pas comme dans la version 0.35.0 et au dessous de).

La nouvelle approche consiste à utiliser des commentaires conditionnels IE bien formatés. Donc, afin de générer ci-dessus IE commentaires conditionnels, le modèle 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 éléments html sont des éléments HTML bien formatés. Le dernier utilise la syntaxe Jade. De plus, le dernier commentaire <!--<![endif]--> doit être mis en retrait.

Avec la version 1.0.0 et les versions ultérieures de Jade, vous pouvez utiliser les commentaires HTML en toute sécurité, car Jade ignore toute ligne commençant par le caractère <.

Vous pouvez également visiter this post on IE Commentaires conditionnels dans Jade qui parlent de la différence entre la version Jade 0.35.0 et 1.0.0. Il montre également une autre approche consistant à utiliser le mécanisme Jade mixins pour les commentaires conditionnels.

8
Tom

À partir de la version 1.0.0, la // if construction n’est plus magique . Soit rendu textuellement HTML (toute ligne commençant par <est transmis tel quel par Jade) ou utilisez un mixin, comme indiqué dans 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
DomQ

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
Ronald Araújo